Mozilla spacing/padding problem

liunx

Guest
Could someone please take a look at this page:

<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index11.html">http://home.comcast.net/~delerious1/index11.html</a><!-- m -->

The set of links on the left should not have any whitespace between them, and the set of links on the right should have one pixel of whitespace between them. That's how it looks in IE and Opera. But in Mozilla, a few of the links on the left have whitespace between them, and some of the links on the right don't have whitespace between them and have a little too much vertical padding.

Here are screenshots, in case you don't see what I'm seeing:

How it should look: <!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/opera_correct.gif">http://home.comcast.net/~delerious1/opera_correct.gif</a><!-- m -->

How it looks in Mozilla: <!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/mozilla_incorrect.gif">http://home.comcast.net/~delerious1/moz ... orrect.gif</a><!-- m -->

I am not sure that the problem with the links on the left is the same as the problem with the links on the right. I think that the problem with the links on the left is related to the following style on those anchors:

padding-bottom: 0.1em

If I change the value to "1px" instead of "0.1em" then Mozilla displays those links correctly with no whitespace in between. I'm not sure why a value of 0.1em would cause Mozilla to incorrectly add some whitespace between some (and not all) of the anchors.

The problem with the links on the right might be due to the images. If I remove the IMG tags from the HTML, then Mozilla correctly displays the links with one pixel of whitespace between all of them.

Anyone have any idea on how to solve these problems? Thanks.em is a calculated value prone to rounding errors. You should use absolute units(px) for small values.

Use vertical-align: bottom; for the images. Images, Tables, and Mysterious Gaps (<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m -->)em is a calculated value prone to rounding errors. You should use absolute units(px) for small values.

It's weird that Mozilla would calculate it correctly for some links and incorrectly for other links. I would expect it to get them all right or all wrong. Anyways, I guess using pixels is the way to go here. Thanks.
 
Back
Top