Hover effect not working in Firefox but does in IE

[Vern1271]

I have a button contained within a div that has a hover effect on it. The hover effect on the div works fine in both IE & Firefox but in Firefox the button (also with a hover effect) does not work. Any suggestions/help would be helpful.

Here's the code snippets:

html:

<div class="event">
<div class="eventName"><?php echo $row_SummerConcertSeries['title']; ?><br />
<span class="eventDate"><?php echo date('D, m/d',strtotime($row_SummerConcertSeries['showdate'])); ?></span>
<span class="eventTime"><strong>Time:</strong> <?php echo date('g:i A',strtotime($row_SummerConcertSeries['showtime'])); ?></span>
<span class="eventBut"><a href="#" rel="gb_page_center[600, 400]" class="viewInfo">View Info</a></span> </div>
<div class="eventPic"><img src="<?php echo $path; ?>_gfx/eventImages/<?php echo $row_SummerConcertSeries['imgPath_thumb']; ?>" /></div>
</div>

CSS:

#outerWrapper #contentWrapper #rightColumn1 .event {
background-image: url(../_gfx/eventBg.gif);
background-repeat: no-repeat;
height: 100px;
width: 231px;
margin-bottom: 5px;
}
#outerWrapper #contentWrapper #rightColumn1 .event:hover {
background-image: url(../_gfx/eventBg2.gif);
background-repeat: no-repeat;
z-index:100;
}

#outerWrapper #contentWrapper #rightColumn1 .event .eventPic {
left: 2px;
top: 2px;
position: relative;
}
#outerWrapper #contentWrapper #rightColumn1 .event .eventName {
margin-top: 5px;
margin-left: 3px;
float: right;
width: 130px;
font-weight: bold;
color: #000066;
}
#outerWrapper #contentWrapper #rightColumn1 .event .eventDate {
font-size: 16px;
font-weight: bold;
display: block;
padding-top: 5px;
padding-bottom: 5px;
color: #C98726;
padding-left: 10px;
}
#outerWrapper #contentWrapper #rightColumn1 .event .eventTime {
font-size: 12px;
font-weight: normal;
color: #000066;
padding-left: 10px;
}
#outerWrapper #contentWrapper #rightColumn1 .event .eventBut {
font-size: 12px;
display:block;
padding-left:10px;
padding-top:10px;
}

#outerWrapper #contentWrapper #rightColumn1 .event .eventBut a.viewInfo:link, a.viewInfo:visited {
padding:0;
color:#FFF;
text-align:center;
width:80px;
height:22px;
text-decoration:none;
font-weight:bold;
display:block;
line-height:22px;
background-image: url(../_gfx/viewInfoBtn.gif);
background-repeat: no-repeat;
background-position: top;
}
#outerWrapper #contentWrapper #rightColumn1 .event .eventBut a.viewInfo:hover {
background-position:bottom;
color:#DDD;
cursor: pointer;
}

[Vern1271]

Also, the button is not clickable in Firefox.

[enigma1]

I cannot tell much without the rest of the html for the wrappers. Try taking out the float:right see if the link works.

[fishfinger]

If you are declaring a global 'a:link' style for html/body in your CSS file, or in 'wrapper' tag (using id=) these link styles will override link styles in nested elements, stopping them from working.