<ul> formatting problem Mozilla

Discussion in 'HTML' started by Paul Furman, Feb 25, 2004.

  1. Paul Furman

    Paul Furman Guest

    Mozilla 1.4 pushes the nav list over with a large false left padding of
    some sort:
    http://www.edgehill.net/html/css/nav.htm

    Any idea what's going on? It works fine in IE6. I've simplified this to
    try and track the problem. I boxed the nav menu so you can see how it's
    out of whack.

    source:


    <html>
    <head>
    <style>
    .left {
    float: left;
    padding-right: 1em;
    }
    ul.menu-left {
    border: 1px solid #444;
    list-style: none;
    width: 1em;
    }
    li.menu-left {
    margin-top: 1em;

    }
    li.menu-first-left {
    }
    li.menu-last-left {
    margin-top: 1em;
    }
    </style>
    </head>
    <body>
    <center>
    <table class=".constrained">
    <tr>
    <td class=".constrained">
    <div class="left">
    <ul class="menu-left">
    <li class="menu-first-left"><a href="index.php" >home</a></li>

    <li class="menu-left"><a href="ecards.php" >ecards</a></li>
    <li class="menu-last-left"><a href="class-links.php">class
    links</a></li>
    </ul>
    </div>
    Photo Galleries:
    <p>
    pictures<br>
    travel<br>
    nature<br>

    </center>
    </td>
    </tr>
    </table>
    </body>
    </html>
     
    Paul Furman, Feb 25, 2004
    #1
    1. Advertising

  2. Paul Furman

    Els Guest

    Paul Furman wrote:

    > Mozilla 1.4 pushes the nav list over with a large false left padding of
    > some sort:
    > http://www.edgehill.net/html/css/nav.htm
    >
    > Any idea what's going on? It works fine in IE6. I've simplified this to
    > try and track the problem. I boxed the nav menu so you can see how it's
    > out of whack.
    >
    > source:
    >
    > <html>
    > <head>
    > <style>
    > .left {
    > float: left;
    > padding-right: 1em;
    > }
    > ul.menu-left {
    > border: 1px solid #444;
    > list-style: none;
    > width: 1em;


    width: 1em?
    haven't copy-pasted it, but could that have to do with it?

    [snip rest of code]

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 25, 2004
    #2
    1. Advertising

  3. Paul Furman

    Paul Furman Guest

    Els wrote:
    >>
    >> source:
    >>
    >> <html>
    >> <head>
    >> <style>
    >> .left {
    >> float: left;
    >> padding-right: 1em;
    >> }
    >> ul.menu-left {
    >> border: 1px solid #444;
    >> list-style: none;
    >> width: 1em;

    >
    >
    > width: 1em?
    > haven't copy-pasted it, but could that have to do with it?


    I just did that to emphasize the problem. If I set it to 4 ems or
    whatever then it fits inside but still has this crazy left margin
    problem. The box resizes somewhat to hold the menu text. In fact, I can
    set the width to "0" and it still gives about 3-4 ems with the contents
    outside that.
     
    Paul Furman, Feb 25, 2004
    #3
  4. Paul Furman

    Paul Furman Guest

    Paul Furman wrote:

    > Els wrote:


    >>
    >> width: 1em?
    >> haven't copy-pasted it, but could that have to do with it?

    >
    >
    > I just did that to emphasize the problem. If I set it to 4 ems or
    > whatever then it fits inside but still has this crazy left margin
    > problem. The box resizes somewhat to hold the menu text. In fact, I can
    > set the width to "0" and it still gives about 3-4 ems with the contents
    > outside that.


    IE also moves the list in from the left edge of the page about 4em
     
    Paul Furman, Feb 25, 2004
    #4
  5. Paul Furman

    kchayka Guest

    Paul Furman wrote:

    > Mozilla 1.4 pushes the nav list over with a large false left padding of
    > some sort:
    > http://www.edgehill.net/html/css/nav.htm


    Both ul and li elements have either a default left margin and/or
    padding, depending on the browser.

    If you don't want the default values applied, set both margin-left and
    padding-left to 0. Adjust to taste.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 25, 2004
    #5
  6. Paul Furman

    Paul Furman Guest

    kchayka wrote:

    > Paul Furman wrote:
    >
    >
    >>Mozilla 1.4 pushes the nav list over with a large false left padding of
    >>some sort:
    >>http://www.edgehill.net/html/css/nav.htm

    >
    >
    > Both ul and li elements have either a default left margin and/or
    > padding, depending on the browser.
    >
    > If you don't want the default values applied, set both margin-left and
    > padding-left to 0. Adjust to taste.



    I tried

    margin-left 0;
    padding-left 0;

    on everything.


    The url above now shows a paragraph of text wrapping around the menu (if
    the window is small) which does not have this big left margin.
     
    Paul Furman, Feb 25, 2004
    #6
  7. Paul Furman

    Sieue Guest

    Paul Furman wrote:
    > Mozilla 1.4 pushes the nav list over with a large false left padding
    > of some sort:
    > http://www.edgehill.net/html/css/nav.htm
    >


    Its not that mad. Unordered lists are supposed to be indented and Mozilla
    renders them properly. You can set margins so they don't indent though.

    --
    Sue
     
    Sieue, Feb 25, 2004
    #7
  8. Paul Furman wrote:

    > I tried
    > margin-left 0;
    > padding-left 0;
    > on everything.


    Did you try it with colons?

    Aside: Instructions for fueling a coal fire...

    if d B mt put :
    if d B .

    Translation:

    If the grate be empty, put coal on.
    If the grate be full, stop.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 25, 2004
    #8
  9. Paul Furman

    Paul Furman Guest

    kchayka wrote:

    > Paul Furman wrote:
    >
    >
    >>Mozilla 1.4 pushes the nav list over with a large false left padding of
    >>some sort:
    >>http://www.edgehill.net/html/css/nav.htm

    >
    >
    > Both ul and li elements have either a default left margin and/or
    > padding, depending on the browser.
    >
    > If you don't want the default values applied, set both margin-left and
    > padding-left to 0. Adjust to taste.



    Thanks, I must have done something wrong, looks like it's only needed
    for the <ul>

    ul.menu-left {
    border: 1px solid #444;
    list-style: none;
    width: 9em;
    margin-left: 0;
    padding-left: 0;
    }
     
    Paul Furman, Feb 25, 2004
    #9
  10. Paul Furman

    Els Guest

    Paul Furman wrote:

    > kchayka wrote:
    >
    >> Paul Furman wrote:
    >>
    >>> Mozilla 1.4 pushes the nav list over with a large false left padding
    >>> of some sort:
    >>> http://www.edgehill.net/html/css/nav.htm

    >>
    >> Both ul and li elements have either a default left margin and/or
    >> padding, depending on the browser.
    >>
    >> If you don't want the default values applied, set both margin-left and
    >> padding-left to 0. Adjust to taste.

    >
    > Thanks, I must have done something wrong, looks like it's only needed
    > for the <ul>
    >
    > ul.menu-left {
    > border: 1px solid #444;
    > list-style: none;
    > width: 9em;
    > margin-left: 0;
    > padding-left: 0;
    > }


    Just a hint:
    When you need to know where spaces come from, write at the
    top of the stylesheet
    *{border:1px solid red; margin:0; padding:0;}

    See what it looks like then, and see what difference it
    makes when you take padding:0 away, and then check what
    happens when you take margin:0 away.

    Usually works for me :)

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 25, 2004
    #10
  11. Paul Furman wrote:

    > Thanks, I must have done something wrong, looks like it's only needed
    > for the <ul>


    Be *very* careful there. Unless you really know what you're doing,
    explicitly set margin and padding for the <li>s too, as this is an area
    where browser behaviour deviates greatly.

    You may also want to look at li { margin-bottom: 0; } (no this isn't
    always the default!)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 25, 2004
    #11
  12. Paul Furman

    Paul Furman Guest

    Els wrote:
    >
    > Just a hint:
    > When you need to know where spaces come from, write at the top of the
    > stylesheet
    > *{border:1px solid red; margin:0; padding:0;}
    >
    > See what it looks like then, and see what difference it makes when you
    > take padding:0 away, and then check what happens when you take margin:0
    > away.
    >
    > Usually works for me :)



    Ooohh

    That's useful!
     
    Paul Furman, Feb 25, 2004
    #12
  13. Paul Furman

    Paul Furman Guest

    Toby A Inkster wrote:

    > Paul Furman wrote:
    >
    >>I tried
    >> margin-left 0;
    >> padding-left 0;
    >>on everything.

    >
    >
    > Did you try it with colons?



    <hanging head in shame>
    I swear I tried it 5 times back & forth
    surely I put colons in one of those times <g>.
     
    Paul Furman, Feb 25, 2004
    #13
  14. Paul Furman

    Eric Bohlman Guest

    Toby A Inkster <> wrote in
    news:p:

    > Aside: Instructions for fueling a coal fire...
    >
    > if d B mt put :
    > if d B .
    >
    > Translation:
    >
    > If the grate be empty, put coal on.
    > If the grate be full, stop.
    >


    After the surgeon removed his: he had no *
     
    Eric Bohlman, Mar 1, 2004
    #14
    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. anony
    Replies:
    2
    Views:
    1,291
    Colin Young
    Sep 21, 2004
  2. =?Utf-8?B?Qm9iIEtpcmJ5?=

    htmlInputFile problem in mozilla

    =?Utf-8?B?Qm9iIEtpcmJ5?=, Oct 18, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    391
    bruce barker
    Oct 18, 2004
  3. Alex D.

    treeview problem in Firefox-Mozilla

    Alex D., Feb 10, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    759
    Alex D.
    Feb 10, 2006
  4. Henri
    Replies:
    9
    Views:
    1,904
    Toby Inkster
    Feb 22, 2005
  5. Replies:
    5
    Views:
    4,893
Loading...

Share This Page