Thanks to all for the feedback...
I used http://jigsaw.w3.org/css-validator/ to clean-up the CSS and added a
DOCTYPE. Adding the doctype required that I had pixel to each width and
height parameter.
Also after adding doctype, the roll over stopped working in IE.
To solve the problem I create a hover class for each option in the
Navigation bar.
I suppose there is no way to nest layers to make the hover property come
from the parent layer?
e.g.
.NavOption a:hover {
color: black !Important;
background-color:#2A9FFF !Important;
text-decoration: none;
display: block;
}
.NavOption1 a {
padding: 1px 0 1px 12px;
font-size:.90em;
width: 226px;
display: block;
background-color: #004D79 !Important;
color: White !Important;
font-weight: 900 !Important;
border-top: 0px solid #eee !Important;
border-right: 0px solid #666 !Important;
border-bottom: 0px solid #999 !Important;
border-left: 0px solid #999 !Important;
text-decoration: none;
}
<div class="NavOption">
<div class="NavOption1">Option 1</div>
<div class="NavOption2">Option 2</div>
<div class="NavOption3">Option 3</div>
</div>
There are more options NavOption2..NavOption8. The only difference between
each option is the color of the background. Each section of options has a
unique background color.
I was hoping the hover property would cascade from the NavOption layer. As
you saw in quirk mode, IE picked up the hover layer, FireFox did not. I
ended up creating a Hover class for each Option in the Navigation Bar.
Now, I have got to propagate the changes to the other pages.
Hope you have a nice day,
Rich
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
