开发者

Margin Discrepancies between Firefox and Chrome/Safari

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


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


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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜