The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Can't get menu to display correctly in IE

The navigation menu on the right seems to drop down below the two left columns in Internet Explorer. I assume it's a padding issue, but I can't seem to fix it. I've don't actually have padding specified on any <div> where there is also width specified. I've got an extra <div> inside the container with the conten to specify padding, so to get around the broken box model (or so I thought).

I tried to simply remove all padding from the page and still got the same result.

Remove the extra <div> in #navmenu, you don't need it. Any padding you want can be put on the <ul>. Also you only put some top padding on the extra <div> and since you didn't specify a height on #navmenu, you don't need an extra element to avoid box model issues.

I changed a few things around in the stylesheet and the layout seems to work now. All I did different was float all three content areas left instead of having a two left and the naviagtion right. I fixed the menu simply by removing the 2px padding that was added to the left side. So now it seems to work in IE 6 and FF. Can you check it out and see what you think? Would there be any issues with floating all three left opposed to what i had before?

Also now that I've done this, there seems to be two other small problems.

1. In IE in the nav menu, if you look under "links" there is the three letters "nks". I guess this is some bug, because I have no idea where that "nks" is coming from.

2. The #wrap div has 50px margin on top and bottom. The bottom is there to separate the top section of the page, from the #secondary section of the page. In FF, there is no separation on the bottom, dispite the 50px margin. IE displays this correctly.

Hey, sorry I've taken so long to get back here for a response. I've been trying to work this #secondary div out, but can't seem to fix it.

That IE duplicate character bug is crazy. It was freaking me out. Weird that -3px right margin will fix it on the last left float.

As far as my #secondary div having no separation from the top #wrap div, I still can't seem to figure that one out. I know you said to take a look at clearing floats (which I did take a look at that link) and used "option 7" to try and clear the floats so that #secondary div has some space between it and #wrap (like it renders in IE) but did not work. I tried to add "height: xx;" to the clearer that I added and it worked in FF, but it just made the gap that much bigger in IE, so it still looks off. I thought I had it right anyway since I "clear:both;" the #secondary div as well as #footer, but evidentely not.

Have anymore links in your bag that I can look at to sort this out? I don't want the answer, I'd like to work it out myself, but everything I try seems to be a dead end.

Hey, I've finally got it working right. I ended up going with option #2 (althought I'm still working through exactly what it all means). I only went with option #7 the first time because the publisher of that site said that is the option he currently went with.

I thought everything was great, until I checked out the site on a monitor in a class I'm taking today. It's IE 6.0 at a resolution of 1024x768 but when I check out the site, the menu is really spread apart, almost like each link has about 15px margin under each one. Weird since I've got IE 6.0 at home also and it displays fine. Could it just be this monitor? It is an older CRT monitor.

EDIT: Well it's not the the older CRT monitor (didn't think so, but you never know). Seems it's doing it here on my monitor as well and wasn't before. I'm going to try to find my mistake in the code, because it was fine and then all of a sudden, not fine. So must be something small.

Thanks. I used the _height: 0; attribute and that seems to have worked, although IE still shows a little more space between links in that list than does Firefox. What do you think? Is it just me trying to be to perfect?

I have discovered one more thing that puzzles me. I'm sure it's simply because I don't understand the rule for it, but anyway, if I specify a width to the navigation menu, it seems to jump down under the #middle-content in IE. As you can see now from the source, I've got the widths for the #navmenu commented out, but if you take the comments off the navigation drops down below #middle-content. If my math is correct, the 440px for the left content, 170px for the middle, and 150px for the navigation equals 760 total which is specified for #wrap. But for some reason when I actually specify 150px for the navigation it jumps down, with it commented out it's fine, what's the difference here? Either way their still is 150px of space there right? The padding I have on the left content and middle content shouldn't be a factor as I've applied the padding to an inner #div as to get around the box model.

In Firefox the width seems to be 146px when you don't have it set to 150px.

Try removing the negative right margin.

Yeah, FF is fine either way though, whether I have it set at 150px or not. IE is mucking it up (imagine that)

I have that negative right margin in there to take care of IE's duplicate character bug. I took the negative margin out and used conditional comments so that IE cannot see the comments making the bug and it works fine for the duplicate character bug, but taking the negative margin out did nothing for the layout in IE. With 150px width specified, the menu still drops down below the middle content and without 150px specified, everything is fine. I'm about to just call it a take and just not specify a width, but I'm worried it might cause some other problem later down the road? It's just really not making much sense to me since I have no other padding/margins that could be making the width wider.

EDIT: I took the 150px width off of #navmenu ul li a and that seems to be what was triggering it. Seems okay now that I've done this.