List/menu spacing is browser dependent (argh)

[Jim Moe]

Hello,
I am (slowly) in the process of changing a table-based layout to
CSS/div-based. One area that uses tables a lot is the main nav menu. I
have discovered that tables have advantage: all browsers display them the
same.
I created a CSS to use <ul> as the list container rather than <table>.
It works quite well -- in Mozilla. With IE V5 or 6 extra spacing is added
between each button image and the large spaces are compressed; it is
almost a uniform spacing between all buttons. Opera 7 completely ignores
the attempts to provided additional space; all buttons are abutted, no
space at all.
(Another exciting discovery is about the nature of lists. They do not
take kindly to varying heights in the content. That is why the spacing
looks irregular when viewed with Mozilla (or Firefox).)
So. Is there a CSS/div method that works for most current(-ish)
browsers? Um, that looks like Mozilla's rendering?
(Yes, I could go to text for the menu items rather than the images. I'd
rather not. Not yet, anyway. Clients get cranky that way.)

<http://www.sohnen-moe.com/test.html>

The relevant CSS is:
#menuleft1 { width: 160px;
margin: 50px 0 0 0;
padding: 0; }
#menuleft1 ul {
margin: 0 0 0 5px;
padding: 0; }
#menuleft1 li { float: left;
line-height: 0%;
list-style: none; }
#menuleft1 li p { height: 30px; }
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Tim]

On Thu, 20 Jan 2005 23:15:01 -0700,
Jim Moe <jm***************@sohnen-moe.com> posted:

I am (slowly) in the process of changing a table-based layout to
CSS/div-based. One area that uses tables a lot is the main nav menu. I
have discovered that tables have advantage: all browsers display them the
same.
Not entirely true...
I created a CSS to use <ul> as the list container rather than <table>.
It works quite well -- in Mozilla. With IE V5 or 6 extra spacing is added
between each button image and the large spaces are compressed; it is
almost a uniform spacing between all buttons. Opera 7 completely ignores
the attempts to provided additional space; all buttons are abutted, no
space at all.

If you want to control the layout, then you really need to set all of the
parameters (margins and padding on the UL, and the LI elements, and perhaps
the surrounding element). Then on some browsers you'll have to be very
careful of how you type the HTML. e.g. <li><img></li> may be treated
differently than <li> <img> </li> (whether that white space be blank spaces
or new lines).

There's sometimes an additional problem with using images: Whereabouts
they sit. We tend to think of them starting at the top of the available
space and filling it, but they're an inline text replacement, and sit on
the baseline of the text (by default). This can mean seemingly
inexplicable blank space below an image (reserved for the descenders of
text that isn't there).

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.