padding not even in IE

Question

If you paste the following code into a test.html and browse with firefox,it's ok. But if you browse with IE,you can see that there are more space to the right of <a> element.:

<style>
li { 
    display:inline;
    margin:0 90px;
    padding:6px 12px;
    background:#777777 none repeat scroll 0 0;
}



li a {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>


<div id="tabs">
    <div class="nav">
     <ul>
      <li><a href="test">test</a></li>
      <li><a href="test">test</a></li>
      <li><a href="test">test</a></li>
      <li><a href="test">test</a></li>
      <li><a href="test">test</a></li>
     </ul>
    </div>
</div>

EDIT:How to make the text even in IE?

Answer 1

I did look at your source and tried it for myself.

In Firefox 3.0.11 and Internet Explorer 8 I was showing pretty much identical pages.

One thing I can say is that the pages looked different initially because my browsers were at different widths but not the margin problem you were having. In my case resizing the browser worked.

But the problem you're having is common. Internet Explorer will almost always display pages different than a typically standards-compliant browser will. One way that people have found to work around this (and this may very well solve your problem) is to use a CSS Reset sheet.

Some good ones are:

• Eric Meyer's Reset CSS
• Yahoo! YUI Reset CSS

Answer 2

The problem is an unfortunate disagreement between the browsers as to where the CSS box model decides what to do about the padding:

• IE decreases the space for the content within a div when you increase the padding, so keeping the div size the same
• Firefox increases the div size with the padding, keeping the content size the same.

Answer 3

Tested in IE6, it seems to add an extra space to the anchor tags. Copy and Paste it and you will see for yourself. Firefox does not add the extra space.

You can change the margin for IE if you want. Its not a perfect solution, but it may help you to make the tabs look similar. If you need it to be identical in all browsers, you could always use an image instead. But try this:

li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

Answer 4

To answer your question simply: put all your li elements on a single line or float them, IE has some issues with white-space and lists.