css margin differences between servers

Question

I have a development server and a production server to host my website. I am seeing differences in how the html is rendered on these servers but only in Internet Explorer.

I am rendering a list of tags. Here is the markup.

<div class="tag">
    <ul>
        <li><a href="#">tag1</a></li>
        <li><a href="#">tag2</a></li>
        <li><a href="#">tag3</a></li>
    </ul>
</div>

Here is the css.

.tag
{

}

.tag ul
{
    margin-top: 5px;
    padding-left: 5px;
}

.tag li
{
    display:block;
    float:left;
    margin: 1px 1px 1px 0px;
}

.tag a
{
    color: white;
    font-weight: bold;
    text-decoration: none;
}

Scenarios:

1. When I view this page in IE8 on any machine that is not the server, the tag div is adding about a 50px left margin or padding.

2. When I view this page in IE8 physically on the Windows Server 2008 machine, the tag div properly shows margin and padding

3. When I view this page in IE8 on my local development server, the tag div properly shows margin and padding.

4. Viewing this page in Google Chrome and Firefox hosted on both my development server and production server, the tag div properly shows margin and padding.

This tells me I have a very specific case that the margin/padding gets added. I do not seem to have any Javascript errors on the page and I even had my page validated through W3C to check for markup problems.

Using the IE development tools, the only difference I can see between div elements in the case where it works and where it does not work is the div looks like below when it does not work:

<div class="tag" sizcache="0" sizset="2">

The difference being the sizcache and sizset attributes. I tried taking the two attributes off in the developer tools but it did not change the end result. They could be there because I do some jQuery styling of tags:

$('.tag ul').buttonset();

Taking this jquery code out does not change the end result. Using the development tools I have even taken off all styling (even the body inherited styling) but I still get the margin/padding.

Answer 1

In IE8, there are a couple of things I would check. The problem could relate to your browser being in IE7 compatibility mode. This could be a setting you changed yourself via the toolbar or the server can enforce this by setting an HTTP header such as the following:

X-UA-Compatible "IE=EmulateIE7"

Microsoft has more information about Compatibility View.

Answer 2

In IE8, UL's are defaulted with left margins, to indent them. To remove it, add the following to your .tag ul:

margin-left: 0px;