On 4/6/10 7:44 AM, alka wrote: > 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; } [...] > > 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? >
Internet Explorer adds a left margin to UL and OL to make space for the list markers, whether present or not. Other browsers add padding. As you have zeroed out IE's left margin, the menu sits snugly to the left. If you zero out the left padding as well, other browsers will follow suit. Nothing "wrong" - and nothing to do with your sprites... HTH. Cordially, David -- ______________________________________________________________________ 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/
