473,700 Members | 2,539 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 5631
<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
2522
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
4694
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
7111
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 spacing is independant of the font size and is consistent between all lines. ie: it's not larger...
7
5770
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
2831
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 the trick -I will go try. But aside from that could some one explain why this occurs? And will I get...
5
8949
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
11046
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? -- ----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ ...
2
29604
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
2493
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 files coding.(except images) i don't know how to upload my files in this site(forum). So i am...
0
8649
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9219
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8975
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6564
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5904
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4408
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4660
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3097
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2395
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.