How can I combine my css?

[Rightz]

Hi,

Basically I have a dropdown menu table. With the following code:

<style>
body{font-family:arial;}
table.menu1{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

The menu table is class=menu1

Now I just need to stop the style for the menu table overriding everything else?

Basically I just want every other link on the page to remain underlined - unlike the table links which I don't want underlined

I already have style tags with the following on the page which I don't want to change:

<style fprolloverstyle>A:hover {color: #FF0000; font-family: Comic Sans MS (cursive); font-weight: bold}
</style>

Can I combine the two?

Thanks

[JAB Creations]

Hi Rightz,

If you are trying to make a drop down menu you should use hover psuesdo-element (ul.menu:hover) in combination with an unordered list. Mine works great in IE7, Firefox 1, and Opera 7.

Here is how to get your anchors underlined for all your links except those in table.menu....

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

table.menu a:link {
text-decoration: none;
}
table.menu a:visited {
text-decoration: none;
}
table.menu a:hover {
text-decoration: none;
}
table.menu a:active {
text-decoration: none;
}

Notice I'm using advanced selectors in the second half of my example. First we choose the parent element and it's class name (your table which is the menu). Then we select the child element we want to style.

You can get pretty specific with advanced selectors...

table tr td p a.crazy {}

Also keep in mind that you can not select parent elements from the child (yet). That won't happen until CSS3.

Which is the parent?

table.parentofbob p.bob {}

Which is the child?

table.bob p.childofbob {}

Now lets combine everything...

I'm not going to give you the cut and run...going to help you understand it so you can do this on your own.

element.class
{
property: value;
property: value;
}

element.class;
{
property: value;
property: value;
}

element.class;
{
property: value;
property: value;
}

Order them as so...

If you have...

<table class="menu" style="border: #000 solid 1px;">

and...

table.menu {padding: 8px;}

You'd just combine them as...

table.menu
{
border: #000 solid 1px;
padding: 8px;
}

So yes you can combine the two.

Read the post and detect the pattern. It should be visual and it'll click if you're good at detecting patterns because learning is nothing more then the conscious detection of patterns.

John

[encyclo]

The huge hole with JAB_Creation's proposal for using the

:hover

pseudo-element is that it won't work in IE6 without using extra Javascript, which represents at least 80% of the browser share for most sites.

Do I understand it correctly that you want to remove the underline just within the menu? If so, you can define the anchor style just within that menu:

table.menu [b]a[/b] { 
text-decoration:none;
}

[sldesigns]

I thought the problem with IE was

:hover

not

a:hover

consider the following:

a (color:#cc3300;}
a:hover {color:#000}
so #whatever a:hover {text-decoration:none;}

so hovering over regular orange links changes the color to black, and only in div "whatever" do the links not have an underline

[Rightz]

Great. Thanks for the tips guys. Think I've got it!

[JAB Creations]

True encyclo, I did passively (and unintentionally) leave out IE6. Thanks for pointing that out for Rightz.

John