CSS Rollover Problem

**Javaboey** · 02-16-2010 11:15 AM

I have a button that has an arrow on it that's suppose to glow on a rollover. The part in question is really in the CSS on the ".button:hover .rightSide" section. So far this works in Chrome, Opera, Safari, but not FF. Would FF for some reason not support this?

HERE'S THE HTML............................

<html>
<head>
<link type="text/css" href="ss.css" rel="stylesheet" />
</head>
<body>

<div id="container">

<div class="button">
<div class="leftSide"> </div><span>Special Sales</span><div class="rightSide"> </div>
</div>

</div>
</body>
</html>

HERE'S THE CSS.............................
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 130px;
height: 25px;
}

.button {
background: url("middle.png");
background-repeat: repeat-x;
height: 25px;
}

.button:hover .rightSide {
background: url("rightSideGlow.jpg");
background-repeat: no-repeat;
width: 26px;
height: 25px;
display: inline;
position: absolute;
right: 0px;
}

.button span {
position: absolute;
top: 2px;
left: 9px;
}

.leftSide {
position: absolute;
background: url("leftSide.jpg");
background-repeat: no-repeat;
width: 23px;
height: 25px;
display: inline;
}

.rightSide {
background: url("rightSide.jpg");
background-repeat: no-repeat;
width: 26px;
height: 25px;
display: inline;
position: absolute;
right: 0px;
}

**appletree** · 02-16-2010 11:32 PM

The hover property only works on a elements (links) in older browsers. Use this:

Demo: http://search-this.com/css_buttons2.html
Code: http://search-this.com/website-desig...lover-buttons/

**iandevlin** · 02-17-2010 07:52 AM

I suggest using csshover.

**Javaboey** · 02-17-2010 09:48 AM

Thanks for the reply guys. Interesting note, my HTML/CSS works fine. I just didn't have a doctype in there. Once I put in the doctype, everything worked! I think w/o the doctype, the browser interprets my code as being built for an older browser; one that doesn't support hover.

Thread: CSS Rollover Problem

Thread Tools

Display

CSS Rollover Problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions