CODEWITHSUNDEEP
htmlcsscross-browsermarginsass
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

Margins set by pixels are inconsistent between Firefox, Chrome and IE8

In this case, IE8 and Chrome look the same, but Firefox displays something different:

In Firefox:

enter image description here

In Internet Explorer 8:

enter image description here

In Google Chrome:

enter image description here

Why do the last two have a very slim separation?

Here's the HTML:

    <ul id="navigation">
        <li><a href="@Url.Action("Index", "Home")">HOME</a></li>
        <li><a href="@Url.Action("Index", "OurApproach")">OUR APPROACH</a></li>
        <li><a href="@Url.Action("Index", "Menu")">MENU</a></li>
        <li><a href="@Url.Action("Index", "Contact")">GET IN TOUCH</a></li>
    </ul>

Here's the CSS, (using SCSS):

/* The inconsistency is in the margin-top rule of the UL. */
#navigation { /* This is just a UL element. I used the margin-top, to position it. */
    float: left;
    list-style-type: none;
    margin-left: -16px;
    margin-top: 117px;

    li {
        background-color: #934B00;
        @include nav-radius;
        color: White;
        float: left;
        font-size: 14px;
        margin-right: 6px;
        padding: 5px;
        cursor:pointer;

         a { text-decoration:none; color:White; }
         a:hover { text-decoration:none; color:#904E00;}
         a:visited { text-decoration:none; color:White; }
         a:link { text-decoration:none; color:White; }
    }

    li:hover {
        color:#904E00;
        background-color:#EEA74F;
    }
}

Upvotes: 0

Views: 3253

Answers (2)

JimmiTh
JimmiTh

Reputation: 7449

Looks like a line-height issue, actually - and considering normalize.css doesn't reset that for <li>, it might be.

Try:

line-height: 1;

... and play around with it a bit to see if it makes any difference.

(Update: Rewrote entire answer, sorry)

Upvotes: 1

KP.
KP.

Reputation: 13730

A couple of things to try - first - you need to be sure the Sass CSS extension library isn't the problem so test without it.

Secondly - use Firebug in Firefox and Chrome's equivalent (Firebug light or something along those lines) to inspect the elements. Using the HTML inspector and Layout tab, you should be able to see exactly how those elements are being styled/rendered.

Lastly, if you aren't already, use a CSS reset stylesheet to ensure all browsers play nice. Good discussion of the best reset sheets here.

Upvotes: 0

Related Questions