<de*******@no.s pam.com> wrote in message
news:3f******** *******@news.md .comcast.gigane ws.com...
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/..._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>
