Mozilla spacing/padding problem

Discussion in 'HTML' started by delerious@no.spam.com, Dec 20, 2003.

  1. Guest

    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/mozilla_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.
     
    , Dec 20, 2003
    #1
    1. Advertising

  2. SwissCheese Guest

    <> wrote in message
    news:...
    > 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/mozilla_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>
     
    SwissCheese, Dec 21, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adi Schwarz

    padding in divs - with mozilla

    Adi Schwarz, Dec 22, 2003, in forum: HTML
    Replies:
    2
    Views:
    2,917
    David Dorward
    Dec 22, 2003
  2. Henri
    Replies:
    9
    Views:
    1,845
    Toby Inkster
    Feb 22, 2005
  3. =?Utf-8?B?R3JlZw==?=

    Gridview horizonal cell spacing/padding

    =?Utf-8?B?R3JlZw==?=, Sep 7, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    846
    =?Utf-8?B?R3JlZw==?=
    Sep 7, 2007
  4. Steven

    Line spacing error in Mozilla?

    Steven, Jul 6, 2003, in forum: Javascript
    Replies:
    2
    Views:
    99
    Steven
    Jul 6, 2003
  5. Ron Croonenberg

    Mozilla vs IE spacing

    Ron Croonenberg, Mar 26, 2008, in forum: Javascript
    Replies:
    14
    Views:
    143
    The Magpie
    Apr 1, 2008
Loading...

Share This Page