CSS - rollover issue - need quick fix

My cells are rolling over, but the text is moving to the top ;(

[zander213]

Hello!

I am trying to get these rollover links to work using CSS, and I am almost there, but something is off a little and when you rollover the cells the text shoots to the top of the cell instead of remaining "middle"...

And here is the CSS file I am using:

.navlink {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CDCDCD;
border-right-color: #CDCDCD;
border-bottom-color: #CDCDCD;
border-left-color: #E1E1E1;
}
td.navlink :hover {
display: block;
color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-top-color: #CDCDCD;
border-right-color: #CDCDCD;
border-bottom-color: #CDCDCD;
border-left-color: #CDCDCD;
background-repeat: repeat;
background-color: #A8A8A8;
background-position: 100% 100%;
vertical-align: middle;
position: relative;
height: 32px;
width: 100%;
top: auto;
bottom: auto;
left: auto;
right: auto;
}

Any help would be greatly appreciated! I've been beating my head into the desk for a while... ;)

[edited by: rogerd at 1:36 pm (utc) on Nov. 14, 2004]
[edit reason] No specifics, please. [/edit]

[BonRouge]

Here, I've cleaned up your code a little. This is exactly the same only shorter.

.navlink {
border:1px solid #CDCDCD;
border-left-color: #E1E1E1;
}
td.navlink :hover {
color: #FFFFFF;
border:1px solid #CDCDCD;
border-bottom-style: none;
border-left-style: none;
background-repeat: repeat;
background-color: #A8A8A8;
background-position: 100% 100%;
vertical-align: middle;
position: relative;
height: 32px;
width: 100%;
}

The problem was display:block - take it out and you're sorted.

[zander213]

Thanks for the help! The only thing now is the problem I had before - just the text background is highlighted and not the cell background.

I was going for the rollover look where the whole cell would change color upon mouse over.

Any ideas?

[BonRouge]

Hey. You use too much html and not enough css.

Change your nav sheet to this:

.navlink {
background: white;
width:728px;
height:35px;
}
.navlink td#title {
font-size:1.5em;
}
.navlink td {
color: #333333;
border:1px solid #CDCDCD;
border-left-color: #E1E1E1;
border-left-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
font-weight:bold;
line-height: 33px;
text-align: center;
text-decoration:none;
}
.navlink a {
text-decoration:none;
display:block;
}
* html .navlink td a {width: 100%;}
.navlink td a:hover {
color: #FFFFFF;
background-color: #A8A8A8;
line-height: 33px;
display:block
;}
.navlink td a:visited {text-decoration:none}

and change your html from this :

 <table bgcolor="#ffffff" cellpadding="0" cellspacing="0" height="35" width="728">
 <!--DWLayoutTable-->
 <tbody><tr> 
  <td class="bordersidestop" valign="middle" width="180"> 
  <div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>Shoe 
   Deals</strong></font></div></td>
  <td class="navlink" bgcolor="#f4f4f4" valign="middle" width="118"> 
  <div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="1"><strong><a href="">Women's 
   Shoes</a></strong></font></div></td>
  <td class="navlink" bgcolor="#f4f4f4" valign="middle" width="93">
<div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="1"><strong><a href="">Men's 
   Shoes</a></strong></font></div></td>
  <td class="navlink" bgcolor="#f4f4f4" valign="middle" width="84">
<div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="1"><strong><a href="">Kid's 
   Shoes</a></strong></font></div></td>
  <td class="navlink" bgcolor="#f4f4f4" valign="middle" width="108">
<div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="1"><strong><a href="">Shoes 
   by Brand</a></strong></font></div></td>
  <td class="navlink" bgcolor="#f4f4f4" valign="middle" width="109">
<div align="center"><font color="#333333" face="Verdana, Arial, Helvetica, sans-serif" size="1"><strong><a href="">Shoes 
   by Style</a></strong></font></div></td>
 </tr>
 </tbody></table>

to this :

 <table class="navlink" cellpadding="0" cellspacing="0">
 <!--DWLayoutTable-->
 <tbody>
<tr> 
  <td id="title">Shoe Deals</td>
  <td><a href="">Women's Shoes</a></td>
  <td><a href="">Men's Shoes</a></td>
  <td><a href="">Kid's Shoes</a></td>
  <td><a href="">Shoes by Brand</a></td>
  <td><a href="">Shoes by Style</a></td>
 </tr>
 </tbody></table>

It's not exactly the same as you have it now, but if you don't like it, I'm sure you can tweak it a little.

I seriously recommend taking things like font colours and background colours out of your html in future - such a waste of space and so messy.

I hope this helps.