8 replies [Last post]
Tommy
Tommy's picture
Offline
newbie
York, England
Last seen: 11 years 27 weeks ago
York, England
Joined: 2003-03-14
Posts: 6
Points: 0

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)

Tony
Tony's picture
Online
Moderator
Brisbane
Last seen: 10 min 39 sec ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

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.

Tommy
Tommy's picture
Offline
newbie
York, England
Last seen: 11 years 27 weeks ago
York, England
Joined: 2003-03-14
Posts: 6
Points: 0

Navigation List

Yeah, I was trying to avoid doing that. But if it's the only way then I'll have to do it. Sad

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 7 years 15 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

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.

Tommy
Tommy's picture
Offline
newbie
York, England
Last seen: 11 years 27 weeks ago
York, England
Joined: 2003-03-14
Posts: 6
Points: 0

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. :?

Tony
Tony's picture
Online
Moderator
Brisbane
Last seen: 10 min 39 sec ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

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 :?:

Tommy
Tommy's picture
Offline
newbie
York, England
Last seen: 11 years 27 weeks ago
York, England
Joined: 2003-03-14
Posts: 6
Points: 0

Navigation List

ul { background: #ccc; }

tripod
Offline
newbie
Last seen: 11 years 27 weeks ago
Joined: 2003-03-16
Posts: 1
Points: 0

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;"

Tommy
Tommy's picture
Offline
newbie
York, England
Last seen: 11 years 27 weeks ago
York, England
Joined: 2003-03-14
Posts: 6
Points: 0

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. Stare