473,236 Members | 1,668 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,236 software developers and data experts.

Mozilla spacing/padding problem

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.

Jul 20 '05 #1
1 5600
<de*******@no.spam.com> wrote in message
news:3f***************@news.md.comcast.giganews.co 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>


Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

32
by: Werner Partner | last post by:
Hier is the problem: http://asterix/sonoptikon.de/artemis/index.php The <h1> and <h2> make their ellbows so broad that in the picture arise borders on top and bottom. The general question is:...
3
by: Pete Gray | last post by:
I have this in my style sheet: ..intro { font-size:1.2em; font-family:"Comic Sans MS", cursive; letter-spacing:0.1em; } p.intro:first-letter {
7
by: Danny | last post by:
I have a small <div> element which contains two text blocks - one within <h5> tags and the other within <p> tags. I don't want any extra line spacing between elements so use the display:inline...
7
by: Marc | last post by:
Hi everyone. I am having trouble with a stylesheet in mozilla. It is part of turning a list into a menu: #menu li{ margin: 0; display: inline; vertical-align: bottom;
6
by: hsomob1999 | last post by:
so i have a <ul> and I allow the user to append items to it. The problem is that on mozilla the <span class="line"> which is just a line to divide the sections gets overlaped and doesnt move down...
5
by: Goldy | last post by:
Hello, w/ code like this: <table border="0" cellspacing="0" cellpadding="0"> <asp:Repeater runat="server" id="op"> <HeaderTemplate></HeaderTemplate> <ItemTemplate> <tr> <td...
10
by: phil-news-nospam | last post by:
I have a table with 3 columns in 1 row. I want to increase the spacing _between_ the columns (gutter) _without_ increasing the spacing between those columns and the table itself. Is there a way...
2
by: =?Utf-8?B?R3JlZw==?= | last post by:
Is there a way to set the horizontal cell spacing or padding of a gridview without setting the vertical spacing/padding? I'd like to be able to put some space between the columns without putting...
7
by: praveenb000 | last post by:
Hi, every one on this forum.... I am new to web designing (using HTML/CSS). i designed a web page using HTML, Css with dream weaver. Here is the code i used for the desinging. it appears well...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.