Forum Moderators: not2easy
a:link {
color: #755752;text-decoration: none;
}
a:visited {
color: #755752;text-decoration: none;
}
a:hover
{
background-color: #369;
color: #FFF;
}
#leftNav {
width: 200px;
height: 26px;
background-color: #f1f6f4;
color: #755752;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration: none;
background-repeat: no-repeat;
font-size: 12px;
border-right-color: #FFFFFF;
display: inline;
border-right-width: 0px;
border-bottom-width: 0px;
border-top: 0px;
}
#mainTitleLeftMenu {
font-weight: bold;
background-color: #ffffff;
color:#755752;
border-bottom-style: solid;
border-bottom-color: #008040;
border-width: 1px;
font-size: 14px;
}
#subTitleLeftMenu {
color:#755752;
font-size: 10px;
text-indent: 20px;
}
#TitleLeftMenu {
color:#755752;
font-size: 12px;
font-weight: bold;
}
The :hover attribute in CSS will work in all good browsers. Crap being served as a browser (IE MSIE) will not achieve this. Read below the code for further information.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>!your title!</title>
<style type="text/css">
p {
background-color: #000;
color: #fff;
}
p:hover {
background-color: #fff;
color: #000;
}
</style>
</head><body>
<p>This is a random text paragraph that is just for an example.
We love webmasterworld though Brett needs to get his butt in gear on the email notification bug!</p>
</body>
</html>
To make IE work correctly with :hover you should do a google for "IE7". If you do not understand you can also use javascript to change the class manually.
<table class="p3" onmouseover="this.className='p3h'" onmouseout="this.className='p3'">
To get the htc file you need to google "whatever:hover"
The only downside to using this method is that your page won't completely validate because the "behavior" command isn't W3C compliant but it fixes the problem in IE.
To make IE work correctly with :hover ...
Another option is the whatever:hover ...
Why not look at what the guy actually asked (and maybe save the 'IE Sucks' polemic for another time)?
So far my CSS rollover color change is only behing the text not the whole cell
The solution to this problem a) is pretty basic css, b) works in IE just fine, and c) doesn't require any javascript solutions. Sample follows:
HTML
<table id="hoverTest">
<tr>
<td>No hover</td>
<td><a href="#">Hover!</a></td>
<td>No hover</td>
</tr>
</table>
CSS
#hoverTest td {
height:30px;
}#hoverTest td a {
display:block;
line-height:30px;
}#hoverTest td a:link,
#hoverTest td a:visited {
background:#f90;
}#hoverTest td a:hover,
#hoverTest td a:active {
background:#fc0;
}
For more information about how to achieve this effect and lots of examples, try this search [google.ca].
-B
