Fri, 2003-03-14 15:28
Hi,
I'm trying to use an unordered list as a horizontal navigation bar. To space out each list item I've used borders and padding. However, IE 5 (Win) and Safari don't display the borders and padding on the list item elements. Any ideas how to get this to work?
XHTML: http://www.editmonkey.co.uk/list/
CSS: http://www.editmonkey.co.uk/list/screen.css
Here's some screen shots:
Camino 0.7 (How it should look.)
Internet Explorer 5 for Windows
Safari (v.60)
Fri, 2003-03-14 23:03
#1
Navigation List
Hi Tommy,
It seems ie5 can't handle borders on inline elements, I'm not sure about Safari.
You might have to find a work around such as use pipes "|" and nbsp between items for browsers that don't handle the border and padding properties correctly.
Let us know how you go.
Sat, 2003-03-15 00:15
#2
Navigation List
Yeah, I was trying to avoid doing that. But if it's the only way then I'll have to do it. 
Sun, 2003-03-16 09:34
#3
Shame it's a problem...
It's a shame it isn't working for you - I appreciate your efforts to build navigation using a logical structure, not just a visual one. Let us all know what you end up going with.
Sun, 2003-03-16 11:57
#4
Navigation List
I can get it to work in IE 5 if I float the list items to the left. However, this caused another problem. I think I&ll just stick with a paragraph and vertical bar characters to achieve the same effect.
One thing that puzzles me is why lists can't have background colours. :?
Sun, 2003-03-16 12:35
#5
background-color on lists
Hi Tommy,
I'm not sure what you mean.
In ie6, Opera 7 and Moz 1.3 possibly many others, background colors show up ok.
How are you specifying the style :?:
Sun, 2003-03-16 12:40
#6
Navigation List
ul { background: #ccc; }
Mon, 2003-03-17 22:06
#7
Background-color
Uhmmm, That should work :?:
Are you only worried about ie 5, as it seems to work in other browsers.
I wonder if something else is interfering with the UL background.
:idea: Could you add the background setting to your example page.
Another thing you could try is "background-color: #CCC;"
Mon, 2003-03-17 22:42
#8
Navigation List
Well it turns out when you float the list items the unordered/ordered list's height collapses which is why the background colour wasn't showing up. 