Positioning an li

[Paul F. Johnson]

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

 

[Steve Pugh]

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


I have


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

 

[Paul F. Johnson]

Hi,

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