Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Mozilla spacing/padding problem

Reply
Thread Tools

Mozilla spacing/padding problem

 
 
delerious@no.spam.com
Guest
Posts: n/a
 
      12-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/..._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.

 
Reply With Quote
 
 
 
 
SwissCheese
Guest
Posts: n/a
 
      12-21-2003
<(E-Mail Removed)> wrote in message
news:(E-Mail Removed) m...
> 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>




 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Mozilla pieces versus Mozilla Suite Doug Chadduck Firefox 40 02-12-2006 10:27 PM
Windows Media opening outside Mozilla not in a Mozilla Window Jim Firefox 3 12-17-2005 02:00 AM
CSS Mozilla: Make Mozilla not ignore height style of an inline element Henri HTML 9 02-22-2005 06:08 PM
My CUSTOM Versions Of Mozilla Fiorefox & Mozilla Thunderbird Norvin Adams III Firefox 6 07-13-2004 03:26 PM
mozilla 1.5 from mozilla 1.4 Disco Firefox 6 11-07-2003 04:34 PM



Advertisments