[Solved] Menu spilling out in IE (all IE’s)

[EamonnMac]

Hey guys, long time no post!

Was hoping someone might have the time to take a look at the main nav on this site – I based it on the new Smashing magazine menu, and I’m happy with the result (if I do say so myself! :D ) but I’m damned if I can get it to work in IE. The odd thing is that it works fine on most of the pages, just runs amok on a few such as xxxx. It’s included via PHP, along with the logo and ads below it – so I’m flummoxed as to how it works in one case and not in another.

Tested it – and it works fine – in FF, Opera, Safari and Chrome – all on Windows. IE tester shows the exact same problem in every IE version all the way to 5.5.

A word to the wise, this is a site I put up for my dad and I’m always playing with it – beware! Here be legacy code!

Site home url: xxxx
Problem pages: xxxx

[AshtonSanders]

I don’t know if you’re working on it right now, but it doesn’t look good in FF or IE right now.

Assign a width to the navigation’s <LI>s and float them left.

[EamonnMac]

Sorry Ashton – I was trying an IE conditional comment and you may take it that it didn’t work! :oops: It’s back to normal now. Here’s the CSS as it is in the style sheet:

Code:

#faux-top {
position: absolute;
top: 0px; left: 0px;
width: 100%; height: 80px;
background: url(images/new-theme/faux_nav_bg.jpg) repeat-x top left #092517;
border-bottom: 2px solid #8d8d46;
}

ul#main-nav {
position: relative; clear: both;
z-index: 100;
list-style: none;
margin: 2px auto 0 auto;
padding: 0;
min-width: 990px; height: 82px;
overflow: visible;
width: 90%;
}

ul#main-nav li {
position:relative;
float:left; z-index:100;
}

ul#main-nav li a {
background: url(images/new-theme/top_nav_bg.jpg) repeat-x scroll left top;
color: #d8d8d8;
display: block;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
height: 50px;
border-top: 1px solid #376b55;
padding: 25px 25px 0 25px;
text-align: center;
}

ul#main-nav li.admin,
ul#main-nav li.search-li {
float: right;
margin-right: 10px;
}

ul#main-nav li.admin a {
background: url(images/new-theme/top_nav_bg.jpg) repeat-x scroll left top;
color: #d8d8d8;
display: block;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
height: 50px;
border-top: 1px solid #376b55;
padding: 25px 15px 0 15px;
text-align: center;
}

ul#main-nav li a:hover {
background: url(images/new-theme/top_nav_bg.jpg) bottom left repeat-x;
border-top: 1px solid #4e836e;
}

[AshtonSanders]

"EamonnMac" wrote:

Code:

ul#main-nav li {
position:relative;
float:left; z-index:100;
}

"AshtonSanders" wrote:

Assign a width to the navigation’s <LI>s and float them left.

And remove the relative positioning… unless its actually doing something. ;)

[EamonnMac]

Ta Ashston – did that and it has folded them into the ul. Their top padding is off though, and for some reason IE isn’t centering my page-wrap on this page. I’m just not clear on why this is happening here and not on other pages – why do I need to specify a width, which I didn’t want to do, just for three pages out of X?

[AshtonSanders]

"EamonnMac" wrote:

Ta Ashston – did that and it has folded them into the ul.

I’m not sure I understand what you mean. Is that good?

"EamonnMac" wrote:

for some reason IE isn’t centering my page-wrap on this page. I’m just not clear on why this is happening here and not on other pages –

Where is here? It looks centered to me.

"EamonnMac" wrote:

why do I need to specify a width, which I didn’t want to do, just for three pages out of X?

Because a floated <li> with a display:block element inside does not automatically collapse in IE.

[EamonnMac]

Sorry Ashton, I was very unclear.

I specified the widths for the li’s in question and they popped right back into place at the top of the screen. That info regarding the display:block property was news to me, so thanks for that – good to know.

My problem now, however, is that the padding properties of these li’s seems to have been affected by this change. They seem to have been jogged up-screen a pixel or so, while the search box has definately seen better days. Meanwhile, all the content below the navigation links – that is, everything else on the page – is no longer centered on the screen, but rather aligned to the left. This is despite IE’s Developer Tools showing, correctly, a page-wrap div with a margin:0 auto attribute.

Again, let me just say this only happens on three pages in the entire site – even before applying the width’s to the li’s. Every other page is fine, on all browsers. All my browser versions are bang up to date as well.

Any further help you can give me here would be hugely appreciated, thanks Ashton. :?

[AshtonSanders]

That is strange. I have a feeling this is the problem:

http://validator.w3.org/check?verbose=1 … odmares%2F

[EamonnMac]

The doctype??? trying it now…

[EamonnMac]

It WORKED!!!!!

Instead of putting the doctype in the header, I had it in the page template. I must have deleted it along the way during my many many changes. Thanks again Ashton – you’re a patient man! (You are a man, right? :? :D )

[AshtonSanders]

You’re very welcome. [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

Hahaha, yes, I am. I’m actually one of the few male Ashton Sanders‘s on the net.

[Author]

Posts