CSS Nav and Content UL & LI

[MicahDB]

All,

This might be a stupid question but I'm not the best in the world at css.

I love how nice css styles look and I like tinkering with them to get'em to do what I'm looking for. However, now that I've spent time get that done, what do I do with my regular UL and LI elements in my site?

For example I have a UL style that looks like this...
ul{list-style-position: outside;
list-style-image: url(/images/blue_arrow.gif);}

li {padding-left:5px;}

And a Nav style that looks like this...(this is obviously just part of the nav styles)
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
margin: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
background-color: #FFFFFF;
color: #999999;
text-decoration: none;
width: 100%;
padding-left:15px;
padding-bottom:8px;
}

So, my question...Can I create a pseudo class or something for one of these so they don't conflict? Something that isn't going to break across browsers.

Thanks,
Micah

 

[monksnake]

I don't know how many of each ul you have on your page, but you can do this a few ways.

1. Don't define the styles for all UL and LI if they don't all need to have the styles defined, instead create classes (there are no psuedo classes for UL that will work in IE6).

2. Overwrite the styles defined globally with the styles you want in the more specific lists.

if you have this:

ul{list-style-position: outside; list-style-image: url(/images/blue_arrow.gif);}

li {padding-left:5px;}

and you have a list that you don't want a blue arrow by (example in navcontainer), just set ul list-style-image to none, which it looks like you did.

#navcontainer ul
{
[!]list-style: none;[/!] /* That should remove the image as well */
margin: 0;
padding: 0;
border: none;
}

<.

 

[BillyRayPreachersSon]

What are you actually wanting to do? Your question doesn't really explain this (when you say you don't want the nav UL to conflict with the other ULs - it won't as it has an ID of its own).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[MicahDB]

Here's what I'm trying to avoid...

test site

Well, it is kind of strange. When I click on one of the links at the side there, I get a blue arrow to the left of all of my links (WHEN I LEAVE THE CURSOR ON THE LINK). If I mouseover another link the disappear.

Maybe this is a weird IE issue or just something I've done. I can't get it to happen in FF or Opera.

Any thoughts would be appreciated.

Thanks,
Micah