Wednesday, December 1, 2010

CSS Consistency Issue between IE7 and IE8

While I was creating a short menu out of a bullet list, I observed an inconsistency in padding that surface between websites being viewing Internet Explorer 6 or 7 and Internet Exporer 8.

With IE 8, when I set the margins of my <ul> tags and my <li> tags to 0px, the bulleted list is still indented.


However, with IE 7 and 6, when I set the margins to 0px, the list lines up with the text above it.


From my research and testing, it would appear there is no way to correct for this.
It especially becomes a problem when developing in IE 8 and correcting the margin-left to -30px.
While IE 8 will show the text of the list left aligned with the rest of the text on the page, previous versions of the browser will bleed the list far left beyond the placement of the control's container.


To avoid this problem, the best practice going forward for the next couple years is either to account space for the list to be indented or avoid using lists.

    1 comments:

    Anonymous said...

    Is it possible that IE8 is using padding instead of margins to indent the items?

    Post a Comment