Hello everyone I'm trying to use image sprites for a horizontal navigation menu on a new site and getting a layout issue in most browsers that has me a little demented. I'm very new to sprite menus but love the idea. It's great. Except for one thing...
*Problem*: In IE 8 the positioning of the background image is aligned tightly to the left margin (which is what I want) while in Firefox 3.6.3 it is indented a bit to the right. http://broswershots.org is showing this indentation in Flock and Opera as well, although not in IE 6 or 7. *Screenshot comparison*: http://www.eisa.org.za/20100406/images/spritehell.png *URL with demo of problem*: http://www.eisa.org.za/20100406/index.html(validating as CSS2 and XHTML 1Transitional) *CSS*: www.eisa.org.za/20100406/styles/eisagtf.css menu id styles: ul#menu { width: 750px; margin-left: 0px; margin-top: 0px; /*margin: 0px auto;*/ list-style-type: none; } ul#menu li {display: inline;} ul#menu li a { display: block; float: left; height: 50px; width: 750px; background-image: url("../images/navsprite.png"); text-indent: -9999px; } After commenting out all the other layout elements in my page, I tried just using an img tag to see my sprite image in entirety and that lines up beautifully in both IE and FF. btw the red border doesn't make a difference, just used it to mark the container. So am thinking it must be 1. my css for the #menu id (see above) 2. a background positioning issue. 3. an IE bug that I have unwittingly used to lay this out while breaking it in every other browser 4. could also be something to do with floating or li floating? Have tried searching for info but can't find anything helpful; perhaps I am searching for the incorrect terms. I think there must be something fundamental that I'm not understanding. There are so many web sites using these things perfectly... what on earth am I doing wrong? Any help/pointers/resources that will help me understand and resolve this much appreciated. Thanks Alka ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
