IE PC Horizontal Image Menu Problem

Hello,

I recently dove head-first into a new site design with a bit of a deadline. The site works perfectly in every browser for the Mac (including IE) that I've tested it on, but is presenting a bit of a problem with IE PC.

I've set-up an horizontal nav bar with image swaps, and very specific widths, etc. IE PC renders the images correctly side by side, except seems to "step" each consecutive image down 10px.

Screenshots here:

Correct: www.landworksvt.com/IE_MAC_screenshot.gif
Incorrect: www.landworksvt.com/IE_PC_screenshot.gif

The relevant code is:


<div id="nav">
<ul>
<li id="n-company"><a href="company/index.html">Company</a></li>
<li id="n-capabilities"><a href="capabilities/index.html">Capabilities</a></li>
<li id="n-portfolio"><a href="portfolio/index.html">Portfolio</a></li>
<li id="n-contact"><a href="contact/index.html">Contact Us</a></li>
<li id="n-client"><a href="client/index.html">Client Log-In</a></li>
</ul>
</div>


#nav {
z-index: 2;
background-image: url(../images/nav_bar.gif);
background-repeat: repeat-x;
position: absolute;
top:50px;
height:44px;
width:688px;
}

ul {
list-style: none;
position: relative;
margin: 0;
padding: 0;
height:44px;
}

#n-company a, #n-company a:hover,
#n-capabilities a, #n-capabilities a:hover,
#n-portfolio a, #n-portfolio a:hover,
#n-contact a, #n-contact a:hover,
#n-client a, #n-client a:hover {
text-indent: -9000px;
overflow: hidden;
float: left;
height: 44px;
background-repeat: no-repeat;
}

#n-company a { background: url(../images/buttons/company.gif); width: 150px;}
#n-company a:hover { background: url(../images/buttons/company_up.gif) }
#n-company a.current { background: url(../images/buttons/company_up.gif) }

#n-capabilities a { background: url(../images/buttons/capabilities.gif); width: 131px; margin-left:-1px; }
#n-capabilities a:hover { background: url(../images/buttons/capabilities_up.gif) }
#n-capabilities a.current { background: url(../images/buttons/capabilities_up.gif) }

#n-portfolio a { background: url(../images/buttons/portfolio.gif); width: 131px; margin-left:-1px; }
#n-portfolio a:hover { background: url(../images/buttons/portfolio_up.gif) }
#n-portfolio a.current { background: url(../images/buttons/portfolio_up.gif) }

#n-contact a { background: url(../images/buttons/contact.gif); width: 131px; margin-left:-1px; }
#n-contact a:hover { background: url(../images/buttons/contact_up.gif) }
#n-contact a.current { background: url(../images/buttons/contact_up.gif) }

#n-client a { background: url(../images/buttons/client.gif); width: 149px; margin-left:-1px; }
#n-client a:hover { background: url(../images/buttons/client_up.gif) }
#n-client a.current { background: url(../images/buttons/client_up.gif) }

I'm working in a MAC only environment, so am relying on the help of friends and screenshots for the PC browsers.

The site validates as XHTML and CSS.

The site is live at: www.landworksvt.com . Any help would be much appreciated. Thanks!

I'm thinking its because you're using a list to line up your images. Try using a table, inside the DIV, like this:

<div>
<table class="my nav bar class">
<tr>
<td>
<img src="1st image">
</td>
<td>
<img src="1st image">
</td>
<td>
<img src="1st image">
</td>
<td>
<img src="1st image">
</td>
<td>
<img src="1st image">
</td>
</tr>
</table>
</div>

Dan

that would work however slight line breaks may appear in IE if left that way
<div>
<table class="my nav bar class">
<tr>
<td><img src="1st image"></td>
<td><img src="1st image"></td>
<td><img src="1st image"></td>
<td><img src="1st image"></td>
<td><img src="1st image"></td>
</tr>
</table>
</div>
td tags should be butted up against the content or just use a single div and have all of the images one right after the other setting padding:0px;
<div style="padding:0px;"><img src="image.jpg" border="0"><img src="image2" border="0"><img src="image3" border="0"><img src="image4" border="0"><img src="image5" border="0"></div>

Thats kinda dumb. Whitespace should N-O-T matter in A-N-Y language!

Dan

thats IE for ya

I'm thinking its because you're using a list to line up your images. Try using a table, inside the DIV, like this:
AUUUUGH. Noooooooooooooooooooooooooooooooooooo :eek:

Try floating the list items instead of the links, and declare links as block-level elements so they fill up the list items. That usually works for me...

#nav li {
float: left;
}

#nav a {
height:44px;
display: block;
background-repeat: no-repeat;
text-indent: -9000px;
overflow: hidden;
}


Remember also to give your <li>s height and width...

p.s. nice looking site, btw!

I was totally missing giving any direction to the <li>s! Floating them did the trick.

Thanks for the help!

Alright -- who's idea was it to suggest tables over semantic, proper markup? I know we're here to help people -- but what about 'current' methods, not coding like it's 1997!?

Tables for a list... that's great. http://css.maxdesign.com.au/listamatic/

sorry, I was just thinking for a quick fix until something else works...

Dan

sorry, I was just thinking for a quick fix until something else works...

Dan

Don't take it offensive, I was serious but joking around, so I hope you don't think I was yelling:)

Your suggestion was useful, but it's better to teach what we're doing now so that we can all improve is all!