3

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

mu is too short
  • 426,620
  • 70
  • 833
  • 800
user763597
  • 31
  • 1
  • 2

2 Answers2

1

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

Vic
  • 11
  • 1
0

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>
heymrcarter
  • 678
  • 1
  • 7
  • 20
  • I take issue with the second point, but more out of curiosity. If you were to have multiple uses of a dotted line would it not make sense to employ class dotted line then styling your li? Furthermore, what if you want an li without a dotted line later? Or are you suggesting inline css? Isn't that considered a faux pas? – matchew May 21 '11 at 03:11
  • @matchw yes it would make sense to use a class if you wanted the dotted line between some `
  • `, but not all. However, the rule only applies to `
  • ` in the `
      ` with the class links. So this would only be an issue if you wanted some of the `
    • ` in that `
        ` to not have the border. The point is more that using css for the line is more semantically correct that a `
      • ` full of dashes
    • – heymrcarter May 21 '11 at 03:18
  • oh, I had not realized he had an
  • -----
    • , that is a bigger faux pas than inline css. Good catch. – matchew May 21 '11 at 17:58