Positioning an li

Discussion in 'HTML' started by Paul F. Johnson, Nov 25, 2003.

  1. Hi,

    I'm playing with my website (http://www.all-the-johnsons.co.uk) which is
    starting to take shape (loads of broken links, but the material is there,
    just needs linking around).

    I'm having a problem though with the list on the left. Under Mozilla, the
    yellow background fills the entire portion of the screen to the left of
    the dashed line. IE 6 has a gap which is annoying!

    The other problem is that I wish to reduce the spacing between the li
    elements so instead of

    > something
    > next


    I have

    > something
    > next


    I have tried

    ul li ul { padding-left: 15px; }

    which is fine under Moz, but does nothing under IE 6.

    Any suggestions would be appreciated. The style sheet validates as does
    the index.html file (well, it did about 30 mins ago!)

    TTFN

    Paul
     
    Paul F. Johnson, Nov 25, 2003
    #1
    1. Advertising

  2. Paul F. Johnson

    Steve Pugh Guest

    "Paul F. Johnson" <paul@spammersahoy!.co.uk> wrote:

    >I'm playing with my website (http://www.all-the-johnsons.co.uk) which is
    >starting to take shape (loads of broken links, but the material is there,
    >just needs linking around).
    >
    >I'm having a problem though with the list on the left. Under Mozilla, the
    >yellow background fills the entire portion of the screen to the left of
    >the dashed line. IE 6 has a gap which is annoying!


    Um, in IE6 I see the yellow background overlapping the dashed line.

    >The other problem is that I wish to reduce the spacing between the li
    >elements so instead of
    >
    >> something
    > > next

    >
    >I have
    >
    >> something
    > > next

    >
    >I have tried
    >
    >ul li ul { padding-left: 15px; }
    >
    >which is fine under Moz, but does nothing under IE 6.


    Actually it adds to the indent in IE6.

    The different browser use different combinations of padding and margin
    on UL and LI to position the bullets. You need to set all the values,
    not just one of them, to achieve more or less consistent cross browser
    sesults.

    This may be helpful: http://steve.pugh.net/test/test37.html

    I'd suggest starting with
    ul {margin-left: 0; padding-left: 0;}
    li {margin-left: 15px;}

    and tweaking that last value until you're happy. Be sure to hide all
    the above from NN4.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 25, 2003
    #2
    1. Advertising

  3. Hi,

    On Tue, 25 Nov 2003 15:35:58 +0000, Steve Pugh wrote:

    > "Paul F. Johnson" <paul@spammersahoy!.co.uk> wrote:


    >>I'm having a problem though with the list on the left. Under Mozilla, the
    >>yellow background fills the entire portion of the screen to the left of
    >>the dashed line. IE 6 has a gap which is annoying!

    >
    > Um, in IE6 I see the yellow background overlapping the dashed line.


    I get a gap between the yellow background and the dashed line at 800 x
    600. That said, there is a definate flakiness about IE 6 - have a look at
    http://ahnews.music.salford.ac.uk/riscstation at a resolution > 1024 x 768
    and watch the formatting explode into a great horrible mess!


    > I'd suggest starting with
    > ul {margin-left: 0; padding-left: 0;} li {margin-left: 15px;}


    That's great - thanks. I'll look at the website as well :)

    TTFN

    Paul
     
    Paul F. Johnson, Nov 25, 2003
    #3
    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. Peter J. Hunter

    Positioning in dropdownlists

    Peter J. Hunter, Jan 14, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    530
    Peter J. Hunter
    Jan 14, 2004
  2. Harry
    Replies:
    1
    Views:
    1,692
    Natty Gur
    Jun 25, 2003
  3. John
    Replies:
    0
    Views:
    348
  4. Guest
    Replies:
    1
    Views:
    376
    Tommy
    Nov 27, 2003
  5. Bill Zack
    Replies:
    3
    Views:
    428
    Bill Zack
    Dec 5, 2003
Loading...

Share This Page