Mozilla spacing/padding problem

delerious · Dec 20, 2003

Could someone please take a look at this page:

http://home.comcast.net/~delerious1/index11.html

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: http://home.comcast.net/~delerious1/opera_correct.gif

How it looks in Mozilla:
http://home.comcast.net/~delerious1/mozilla_incorrect.gif

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 problem? Thanks.

SwissCheese · Dec 21, 2003

Could someone please take a look at this page:

http://home.comcast.net/~delerious1/index11.html

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: http://home.comcast.net/~delerious1/opera_correct.gif

How it looks in Mozilla:
http://home.comcast.net/~delerious1/mozilla_incorrect.gif

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 problem? Thanks.

Here is one solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
A.a1, A.a2 {
background-color: rgb(0,128,255);
color: white;
display: block;
font-family: Verdana, Geneva, Lucida, Tahoma, Arial, Helvetica,
sans-serif;
font-size: small;
padding-right: 1px;
text-decoration: none;

}

A.a1 {
padding-bottom: 1px;
padding-left: 1px;
}

A.a2 {

}

A.a1:hover {
background-color: rgb(0,192,255);
}

DIV#div1 {
left: 20px;
position: absolute;
top: 50px;
}

DIV#div2 {
left: 150px;
position: absolute;
top: 50px;
}

IMG {
border-width: 0;
vertical-align: middle;
float: left;

}
#p2 {
line-height:18px;
border: 0;
margin: 0 0 1px 0;
padding: 0;
}
</STYLE>
</head>

<body>

<div id="div1">
<a class="a1" href="fakepage.html">Link 1</a>
<a class="a1" href="fakepage.html">Link 2</a>
<a class="a1" href="fakepage.html">Link 3</a>
<a class="a1" href="fakepage.html">Link 4</a>
<a class="a1" href="fakepage.html">Link 5</a>
<a class="a1" href="fakepage.html">Link 6</a>
<a class="a1" href="fakepage.html">Link 7</a>
<a class="a1" href="fakepage.html">Link 8</a>
<a class="a1" href="fakepage.html">Link 9</a>
</div>
<div id="div2">
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link A</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link B</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link C</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link D</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link E</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link F</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link G</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link H</a></p>
<p id="p2"><a class="a2" href="fakepage.html"><img src="images/image11.gif"
height="18" width="27">Link I</a></p>
</div>

</body>

</html>

spacing display: inline elements	10	Mar 2, 2013
Spacing problem	5	Dec 19, 2005
<ul> <li> links and spacing	3	May 27, 2009
How do I get this to work?	11	Dec 4, 2003
Correct javascript generates problems	1	Dec 31, 2022
Can't solve this problem from my university	7	Oct 6, 2022
IFRAME padding problem	1	Nov 27, 2006
IE cannot put padding on IMGs?	17	Dec 21, 2003

Mozilla spacing/padding problem

delerious

SwissCheese

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads