Conflicting CSSs solutions? (Again) HELP!?!

href drops text down - list/hard return

[GeddyLeeRocks]

Hello All
Yes another CSS conflict from your truly. On the website I am redoing there is a header with links and a left nav menu that is dynamic (expanding/collapsing). I am using of course a littel JS and CSS to do this. The problem (I think) with assigning links to the text in the header is a CSS conflict with the left nav. When I assign a link to "Contact Us" in the header - it drops down like a hard return or like a list item in the left nav. I have made numerous sets a.set1 - and nothing is working for me.
here's the css at least:

<style type="text/css">
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #FFFFFF;
}
a:active {
color: #000000;
}
*{margin:0;padding:0;}
#container{width:180px;}
#menu{width:180px;background:#609f83;font:0.8em/1.7 "Lucida Grande", Helvetica, Arial, sans-serif;}
#text{float:right;width:180px;font-size:1em;background:#000;border:1px solid #fff;}
#text p{padding:2px 10px;}
a{display:block;text-decoration:none;line-height:30px;border-top:1px solid #fff;}
ul{list-style-type:none;text-align:left;margin-left:5px;}
li{display:inline;}
#main li a:link,ul#main li a:visited {background:#609f83;color:#000000;border-top:1px solid #fff;}
#main li a:link:hover,ul#main li a:visited:hover {background:#609f83;}
#ul_one, #ul_two, #ul_three, #ul_four {display:none;margin-left:5px;}
ul#main li ul.sub li a:link,ul#main ul.sub li a:visited {border-top:1px solid #fff;background:#CDDBB7;color:#333;padding:5px;line-height:20px}
ul#main li ul.sub li a:link:hover,ul#main ul.sub li a:visited:hover {background:#D8E3C6;color:#fff;padding:5px;line-height:20px}
body {
margin-left: 0px;
margin-top: 0px;
}
#footer {
font:Arial, Helvetica, sans-serif;
padding-bottom: 5px;
padding-top: 5px;
font-size: 10px;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.style1 {color: #FFFFFF}
.style2 {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
padding-left: 5px;
}
.style3 {font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:left;
font-weight: bold;
background-color: #000066;
background: #000066;
padding-left: 10px;
}
</style>

[bedlam]

Hi,

As I mentioned in a reply to a previous question of yours [webmasterworld.com], you need to get to know contextual selectors. Right now, you've got this in your css:

a{display:block; ... }

This is going to cause every single link on any page that uses these styles to force a line break. presumably you don't want that ;-p

This means that you need to fine a way to make links behave one way in one context, and another way in another context. To do this you probably need to try something like this:

CSS

a { /* Put whatever properties are common to ALL your links in here (like 'font-size', for example... */ }

/* The following selector is equivalent to saying 'apply these styles to links occuring INSIDE an element with the id 'navigation': */
#navigation a {
/* Put whatever styles belong ONLY to your menu in here: */
display:block
}

Please have a look at the examples and links in my answer to your other question :-)

-B

[D_Blackwell]

To expand upon bedlam's point:

ul{list-style-type:none;text-align:left;margin-left:5px;}
li{display:inline;}

This is saying that every ul and li will have these specific values. That may be ok for now, but down the road some of those values might not fit so well, especially if it is found in an external stylesheet that is responsible for many pages.

You can avoid some of the conflicts, and the need to override them, by being careful with generic selectors. I usually try to avoid ul{} altogether, and stick to ids or classes such as ul#list or #some-div ul {}.

[g1smd]

The #one #two #three etc, could you not use one class instead of three IDs?

It is also better if you name stuff according to what it does #nav #footer etc.