IE7 Displaying Horizontal Menu Vertically

IE7 and earlier not displaying horizontal rollover menu correctly

[Foxhole]

Hi all,

Having now tested my website on an older IE browser, my horizontal rollover menu bar is now displaying vertically, I was hoping someone may be able to help me and show me how I can get around this.

I am basically using a <ul> and displaying as an inline block, not sure if this was supported in IE7 and earlier?



Here is my HTML code:


<div id="navcontainer">

<ul>

<li id="menufill"></li>
<li id="homeat"><a href="index.html" title="Home"><span>Home</span></a></li>
<li id="aboutus"><a href="aboutus.html" title="About Us"><span>About Us</span></a></li>
<li id="services"><a href="services.html" title="Services"><span>Services</span></a></li>
<li id="portfolio"><a href="portfolio.html" title="Portfolio"><span>Portfolio</span></a></li>
<li id="contactus"><a href="contactus.html" title="Contact Us"><span>Contact Us</span></a></li>
<li id="menufillr"></li>
</ul>

</div>



And here is the CSS:


#navcontainer {
margin: 0 auto;
width: 100%;
text-align: center;
display: inline-block;
}

#navcontainer ul {
list-style-type: none;
text-align: center;
padding: 0 0 10px 0;
margin-top: 0;
display: inline-block;
}

#navcontainer li {
display: inline-block;
text-align: center;
padding-left: 0;
padding-right: 0;
}
/* menu filler image control */
#navcontainer li#menufill {
margin: 0;
width: 80px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdmenufill.png") no-repeat;
}

#navcontainer li#menufillr {
margin: 0;
width: 80px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdmenufillr.png") no-repeat;
}

/* home button image control */
#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdhome.png") no-repeat;
}

#navcontainer li#homeat a:link, #navcontainer li#homeat a:visited, #navcontainer li#homeat a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdhome.png") no-repeat;
background-position: 0 -80px;
}

/* about us button image control */
#navcontainer li#aboutus a:link, #navcontainer li#aboutus a:visited, #navcontainer li#aboutus a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdaboutus.png") no-repeat;
}

#navcontainer li#aboutusat a:link, #navcontainer li#aboutusat a:visited, #navcontainer li#aboutusat a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdaboutus.png") no-repeat;
background-position: 0 -80px;
}

/* services button image control */
#navcontainer li#services a:link, #navcontainer li#services a:visited, #navcontainer li#services a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdservices.png") no-repeat;
}

#navcontainer li#servicesat a:link, #navcontainer li#servicesat a:visited, #navcontainer li#servicesat a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdservices.png") no-repeat;
background-position: 0 -80px;
}

/* portfolio button image control */
#navcontainer li#portfolio a:link, #navcontainer li#portfolio a:visited, #navcontainer li#portfolio a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdportfolio.png") no-repeat;
}

#navcontainer li#portfolioat a:link, #navcontainer li#portfolioat a:visited, #navcontainer li#portfolioat a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdportfolio.png") no-repeat;
background-position: 0 -80px;
}

/* contact us button image control */
#navcontainer li#contactus a:link, #navcontainer li#contactus a:visited, #navcontainer li#contactus a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdcontactus.png") no-repeat;
}

#navcontainer li#contactusat a:link, #navcontainer li#contactusat a:visited, #navcontainer li#contactusat a:active {
margin: 0;
width: 150px;
height: 40px;
display: inline-block;
background: url("kwd_buttons/kwdcontactus.png") no-repeat;
background-position: 0 -80px;
}




Sorry about the long code, I hope one of you can help me, I have been messing around with this for days now and can't get around the problem,

Surely there must be a much more simple way to acheive the same result?

Thanks for the help all,

Regards,

Foxhole

[alt131]

Hi foxhole, yes the trouble is the implementation of in-line block: it is only applied to elements with a default of display:inline, and it is not implemented as expected for a div, ul and li with display:block/list-item).

Ms has provided a table of css implementation [msdn.microsoft.com], and quirksmode has more detail plus examples.

There are a number of options. Some are:

• Code this so it works cross-browser. The traditional way is to use "float" rather than display.
  
• Use inline-block, plus a conditional comment to "trip" ie:
  CSS display: inline-block; is usable now [webmasterworld.com]
  
• Try something interesting like display:table (as a horizontal menu can be considered a table-row with a series of cells - but that will create similar compatibility issues for other older browsers)
  
• Use a conditional comment to apply float:left and other required styles to ie<8 (being aware this creates issues for older versions of other browsers that do not understand display:inline-block)
  
• Use a javascript solution

Just be aware there are mixed opinions about using javascript or conditional comments - am not saying "use them" - just alerting you to some of the options so you can decide.

[Foxhole]

Thanks for the info alt131, much appreciated,

It has given me more options to think about that I hadn't even considered,

I will have a mess about with it tonight and see where I get, I think I will go with the float option as that will probably be the most stable option.
I started changing all the code last night but tangled myself in knots!

Thanks again,

Best regards,

Foxhole