View Full Version : IE image shifting issues

05-04-2009, 10:21 PM
Hey hey forum!!!

I'm pretty new to website coding but trying to make a go of it, and having some serious issues with IE


Why do I have to put a hack in to correct the image position in the sidebar LI elements under IE? And, why isn't the pixel spacing consistent between workstations (on my widescreen display images are shifted more than on a standard monitor)? It works fine in FF without the LI image position hack?

ul#sidebar_nav li {margin-left:-15px;}

I bet I'm not clearing something or floating wrong. This has been bugging me for weeks!!! Any insight anyone has is soooooo appreciated!!!

05-05-2009, 12:28 PM
Hi there

The issue in IE7 (at least) is coming from the code:

<ul id="sidebar_nav">
<li class="nav_party"><a href="party.html">Party With Us</a></li>

In IE7 the <a> tag is indented from the <li> - so the background image is correctly aligned on the <a> tag but the <a> tag is indented. IE is leaving a space for the bullet even though one isn't displayed -caused by the css inherited from:

#container ul {
list-style: none inside;

which applies the "inside" value to ul#sidebar-nav. You can see this using the IE Developer toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en) - this can be useful for debugging this sort of thing.

You could try adding:

#container ul#sidebar_nav{list-style:none outside}

to your css, and see how that looks. I guess IE and FF treat this slightly differently which is why it's OK in FF anyway.

Hope this helps....

05-07-2009, 10:52 PM
Yarp! That was the trick. Thanks sooooo much! +1 Internets for you!

Going to install that IE Developer toolbar you recommended as well...have FireFox developer tools already but IE makes me insane o_O

Thanks again