Helpful Information
 
 
Category: Web Design and HTML
CSS hover question

Small issue....

In the site http://kscu.dakindesign.com the nav bar changes color when rolled-over (a.link:hover)

In FireFox/Mozilla, this is triggered by rolling over the cells of the nav bar, but in IE you have to roll over the actual text in the cel. The exception is the Home cel.

They are formatted the same way, so why would Home trigger :hover when rolling over the cell, but the rest only trigger when rolling over the text? My CSS is a little messy, but it does the job. Anyone know what could be wrong?

Thanks!
Ross

Hard to say for sure but it should work. I use something similiar and get the hover when I hit the cell. The one thing that I notic is in your post you say... a.link:hover when it should be a.link1:hover acording to your source code wich shows that the class for those are set to "link1"

The best I can do is post what I use and see if you can catch any differences between yours and mine.

The css file:


.mainmenu{ font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #660000; }
a.mainmenu:hover{ color: #660000; background-color: #FFCCFF }
.qopt { background-image: url(images/framepink.gif); border: #CC9900; border-style: ridge; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

.qopted { background-color: #FF99FF; background-image: url(images/framgld.gif); border: #CC9900; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

The buttons:


<table cellspacing="2" cellpadding="1" border="0" class="mainmenu">
<tr>
<td class="qopted" nowrap="nowrap">
<a href="/thelink.html" title="title" class="mainmenu"> Log </a>
</td>
</tr>
</table>


The qopt and qopted classes are what are used to control the boarders and such of the <td> My script changes it depending on if they are viewing the page or not. You could use the same idea to control your borders on yours or at least the last link "DJ Area" to get the right border instead of setting the style in the tag. You might look at the linkbar class to see if it could be affecting things.

My links are displayed as individual buttons which is why I have the cellspacing set to 2 on my table. You can see the example of these on my puppet site....(puppetsandstuff.com/index.php)










privacy (GDPR)