SuckerTree Help

[sportsannouncing]

My coding is the exact same as the web site, however it comes out different.

http://www.sportsannouncing.com/diamondelite/de.htm

When you mouse over the menus that expand, I keep getting a gap between the buttons. I don't know why. Is it because I'm using Front Page?

[Medyman]

My coding is the exact same as the web site, however it comes out different.

Exact same? Not quite...

First, you're using a whole host of deprecated HTML tags. You should ditch the frames, adopt CSS and your page site will behave much better.

If you want to use something like the suckerfish menu which is highly dependent on positioning, it's important to be confident that the browser will render the page properly. This can't be done unless you're using standards compliant code.

There are quite a few errors that are causing what you see with your menu due to some of the changes that you've made. I'm guessing that most of those changes were inadvertent and you really only wanted to make styling changes (colors, fonts, etc...). So, what I would suggest is to restart with the original stylesheet.

So delete everything between the <style></style> tags on your page and add this:

<style type="text/css">

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style>

Then, you can go back and add the colors back in.

Lastly, please do look into using proper CSS-based techniques to style your page. It'll save you *a lot* of aggravation in the long run. There is a very good reason that things like the <font> tag are deprecated and why tables aren't recommended for layouts.

[sportsannouncing]

Thanks for the help, I've got another question.

I've been going between using the frames and not using frames. I have other sites that don't use frames so I will not use the frames here too.

In order to lay out the page so that I can have the text line up under the header and everything correctly, I use tables to set everything up. I'm just getting into CSS but don't understand it much. I'm teaching myself the same way I taught myself HTML and Java, by looking at other scripts then adjusting them for my needs.

The question: What's the best method to set up the page so that it can be viewed on all kinds of screens (wide, regular, etc.)? Should I use a table or work on something else?

[Medyman]

Something else...almost always.

Tables, forgetting all the other technical reasons behind it, just limit you. You're able to do a lot more with CSS.

What you're looking for here is using liquid CSS. Have a look at some of these layouts for some examples: http://www.dynamicdrive.com/style/layouts/category/C13/

Basically, the idea is to set a percentage for a width instead of an absolute width. So something like 50% (for half of the container, either the screen or another div) instead of 800 pixels or sticking it in a table ...inside a table, inside a table. Ahh, the thought of that just scares me.

I have a project now where I have to update a 500+ page corporate website that was created with MS Word's save-as-webpage feature. So forgive me for my absolute hatred of tables and deprecated techniques. It's complete torture for a standards nerd like me.

[traq]

...Is it because I'm using Front Page?

I think it's a possibility. I use FrontPage, and ever since I started paying attention and working with the code directly, I've noticed that FrontPage likes to make changes to your code as you work. Usually when you're saving the page, or if you do something to work around something FPSE does. Also, when you try to copy/paste formatted text (i.e., copying code from a script you find here on Dynamic Drive), it usually doesn't import well. I copy it to a text file first, then to FrontPage.

SO, check your work after you save it, and make sure it's what you actually wrote down!