Hi all,
I’m having some trouble with IE 7 and css hovers/selects. On my menu, when you hover over an item, a hover is applied that displays a border. When you’re on that page, the same blue border is solid (selected). This works perfectly in Firefox, but as usual IE is having some issues. First, IE does not want to display the hover border. I corrected this by adding a position: absolute; element. However, the selected state does not want to display. When the position: absolute is applied to the selected state, it appears, however, extends the entire length of the word and spacing. In addition, when hovered over, the selected state does not disappear, it is just pushed down. Here is the code in question:
The Mark-Up:
The CSS
Code:
#menu-right {
float:right;
padding-top:5px;
}
#menu-right ul {
float:right;
word-spacing:23px;
}
#menu-right li {
display:inline;
}
#menu-right a {
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-transform:uppercase;
}
#menu-right a:hover {
position: relative;
text-decoration:none;
padding-bottom:17px;
border-bottom:4px solid #26bcec;
}
.menu-item-select {
text-decoration:none;
padding-bottom:16px;
border-bottom:4px solid #26bcec;
color:#fff;
}
Any help would be greatly appreciated.
