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)