473,560 Members | 3,037 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 5623
<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>


Jul 20 '05 #2

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

Similar topics

32
2485
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: How can I force left frame and banner to be exactly as broad resp. as high as the picture?
3
4688
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
7097
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 property. This works for IE6 but Opera7.54 and Netscape7.1 add large line spacing between the text blocks and any lines of wrapped text. The line...
7
5757
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
2822
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 and adjust to the newly added items like it does in iE. It just occured to me that i dont really have to use a span, and a html <hr> tag could do...
5
8938
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 class="label-item" align="left"> <asp:Label runat="server" id="b1" />
10
11027
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 to do that in CSS without having to code in extra dummy columns in HTML to create gutters? --...
2
29542
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 space between the rows. Thanks, Greg
7
2481
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 in IE 6 browser but not in Mozilla 4.0 some components are disappears. This is the whole code i used for designing this page and i also given css...
0
7632
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7552
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7841
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8066
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6191
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5458
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5175
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3585
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
877
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.