Can't remove spacing between <li> items in IE6

Hi All,

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6 there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

Many thanks,

JB

JB wrote:

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6 there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

There are no gaps. When hovering, the blue backgrounds aren't
separated from each other. I think you have to look at the line-height
on the a element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

"Els" <els.aNOSPAM (AT) tiscali (DOT) nl> wrote

JB wrote:

This is doing my head in! Please help.

I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and
compact with no extra spacing - but in Microsoft Internet Explorer 6
there
are huge gaps between each list item.

URL :http://217.154.67.191/left_menu.htm

It's got to be a simple thing I'm missing so please point it out to me.

There are no gaps. When hovering, the blue backgrounds aren't
separated from each other. I think you have to look at the line-height
on the a element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Thanks for that Els but apparently this is a documented issue:
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug

None of the solutions there worked but I eventually found a fix by hiding a
couple of commands from all browsers except IE by putting an underscore
before them.

#navigationContainer ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size:0.6em;
padding-bottom:8px;
_float:left;
_clear:both;
}

Not ideal but it works!

JB

On Fri, 13 Jan 2006, JB wrote:

font-size:0.6em;

Ouch!

Not ideal but it works!

"For very small values of the term 'works'."

New problem in Firefox. Tell me why there is a large left margin when margin
is set to 0 and there are no instance of huge amounts of padding.

http://217.154.67.191/left_menu.htm

Thanks,

Jeff

"Alan J. Flavell" <flavell (AT) ph (DOT) gla.ac.uk> wrote

On Fri, 13 Jan 2006, JB wrote:

font-size:0.6em;

Ouch!

Not ideal but it works!

"For very small values of the term 'works'."

0.6em is bad is it?

I've changed it to x-small.

Thanks,

JB

JB wrote:

New problem in Firefox. Tell me why there is a large left margin when margin
is set to 0 and there are no instance of huge amounts of padding.

http://217.154.67.191/left_menu.htm

Thanks,

Jeff

changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.

changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.

Thanks for that. All sorted in Firefox but the problem has transferred to
IE6! I now have the list starting from the center of the page!

Help!

Jeff

JB wrote:

"Alan J. Flavell" <flavell (AT) ph (DOT) gla.ac.uk> wrote in message
news:Pine.LNX.4.62.0601131328160.25873 (AT) ppepc56 (DOT) ph.gla.ac.uk...
On Fri, 13 Jan 2006, JB wrote:

font-size:0.6em;

Ouch!

Not ideal but it works!

"For very small values of the term 'works'."

0.6em is bad is it?

I've changed it to x-small.

Just as bad. Use: font-size: 100%;
so most people can read it, and in doing so you respect their chosen
default size.

BTW, the comment tags in your style sheet need to be removed.
The <!-- and the -->. There can't be any HTML in a style sheet.

When you are ready:
http://jigsaw.w3.org/css-validator/validator-uri.html

--
-bts
-Warning: I brake for lawn deer

On Fri, 13 Jan 2006, JB wrote:

changing the padding on navigationContainer ul to

padding: 0 0 8px 0;

fixes it. Not sure where it got the larger left padding from though.

Thanks for that. All sorted in Firefox but the problem has
transferred to IE6! I now have the list starting from the center of
the page!

You know, this isn't a write-only newsgroup: most of the simple issues
have been discussed before and solutions presented, and can be
consulted in newsgroup archives such as google groups.

The fact is that different browsers have different in-built default
styles for formatting list items, even though the final results look
similar.

As a starting point, if one it trying to apply one's own style to list
items, it's necessary to specify at least the following properties
explicitly: left margin and left padding for ul and li (and for ol, of
course, if you're using that).

This doesn't seem to be the case yet for your posted sample URL
http://217.154.67.191/left_menu.htm

I haven't seen any reason yet (or justification for) using CSS
constructs which fail at the W3C CSS checker. Sometimes, such syntax
trickery can solve an otherwise insoluble browser defect - but at
least get all the other things right *first* before deciding whether
to go for that "last resort".

Don't overlook the diagnostic technique of defining distinctive
visible borders on different elements, to help to understand how
various browsers are interpreting your CSS.

As for text sizing, I recommend
http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html