Margin Discrepancies between Firefox and Chrome/Safari

Question

I seem to have a slight issue with some spacing in between my lines between Firefox and Safari/Chrome.

This first image is how the links on the left, and the line of text after the table on the bottom are supposed to look like:

How webpage looks in Safari/Chrome

As you can see, the links are lined up well with the rectangle "first genesis group" logo.

This is how it looks in firefox

As you can see, the links are a bit stretched vertical on the left, thus somehow causing the bottom line to shift downwards a little.

I found the issue being a margin-top:1px; that I gave to every link in the set of links (home, about us, products, contact), and it seems that firefox is making that 1px margin much bigger than Safari or Chrome and distorting it.

I tried putting in the universal tag

• { margin:0; padding:0; border:0;}

But it doesn't seem to be helping. Any ideas how to fix this in firefox? Here's the actual link: www.snowwhitepowers.com/genesis

Answer 1

It is about how different browsers render different fonts. (You'll notice that Verdana for example is rendered well by both of them)

Answer 2

I would edit your css to the following:

ul.link{
    list-style:none;
    /*rest of your rules*/
}

ul.links li{
    display:block;
    width:145px; /* or however wide the ul is*/
    height:20px; /* or however tall they need to be*/
    line-height:20px; /* setting the line-height equal to the height centers text vertically*/
    border-top:1px dashed #5c6b40;
}

ul.links a{
    /* styles for links */
}

You'll also need to to format your html more semantically. The <li class="dottedline> isn't doing anything for you and it would be much better to just put a border on the <li>

Something like:

<ul class="links">
    <li><a href="home.html" target="iframe">Home</a></li>
    <li><a href="about.html" target="iframe">About Us</a></li>
    <li><a href="eggroll.html" target="iframe">Products</a></li>
    <li style="border-bottom:1px dashed #5c6b40;"><a href="contact.html" target="iframe">Contact Us</a></li>
</ul>