ywoolf
asked on
Simple CSS hover background color change issue...
I have a simple table menu and I'm trying to have the background color change on hover.
see: http://tjsc.org/gallery_2006.html and hover over 2004, 2006, 2007, 2008
When I hover, the text rises to the top and I would like the text not to move.
I'm using firefox and internet explorer...
I'm sure this is fairly simple and would appreciate instruction as to what I should do.
Thank you!
see: http://tjsc.org/gallery_2006.html and hover over 2004, 2006, 2007, 2008
When I hover, the text rises to the top and I would like the text not to move.
I'm using firefox and internet explorer...
I'm sure this is fairly simple and would appreciate instruction as to what I should do.
Thank you!
THIS IS THE CSS:
.gallery_year {
font-size: 18px;
font-weight: normal;
color: #B72E2C;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.gallery_year a:link{
text-decoration: none;
color: #BF4644;
font-size: 18px;
font-weight: normal;
}
.gallery_year a:hover{
color: #B72E2C;
font-size: 18px;
background-color: #FFFFFF;
font-weight: normal;
display: block;
height: 40px;
}
.gallery_year a:visited{
text-decoration: none;
color: #B72E2C;
font-size: 18px;
font-weight: normal;
}
THIS IS THE HTML:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="40" class="gallery_year"><a href="gallery_2004.html">2004</a></td>
<td width="100" height="40" bgcolor="#FFFFFF" class="gallery_year"><a href="gallery_2006.html">2006</a></td>
<td width="100" height="40" class="gallery_year"><a href="gallery_2007.html">2007</a></td>
<td width="100" height="40" class="gallery_year"><a href="gallery_2008.html">2008</a></td>
<td height="40" class="gallery_year"> </td>
<td height="40" class="gallery_year"> </td>
<td height="40"> </td>
<td height="40"> </td>
</tr>
</table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Use the following code ,,,, works out much easier. For another link add another
<li><a href="#" target="_self">#</a></li>
This works over all browsers.
<li><a href="#" target="_self">#</a></li>
This works over all browsers.
This is the CSS
#galleryyear {
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#galleryyear li {
float: left;
font-size: 18px;
font-weight: normal;
color: #B72E2C;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
}
#galleryyear a {
color: #B72E2C;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight:normal;
}
#galleryyear a:hover {
color: #B72E2C;
background-color:#FFF;
padding-bottom: 8px;
}
and the HTML
<ul id="galleryyear">
<li><a href="gallery_2004.html" target="_self">2004</a></li>
<li><a href="gallery_2006.html" target="_self">2006</a></li>
<li><a href="gallery_2007.html" target="_self">2007</a></li>
<li><a href="gallery_2008.html" target="_self">2008</a></li>
<li><a href="#" target="_self">#</a></li>
<li><a href="#" target="_self">#</a></li>
</ul>
ASKER
Thanks SHANE ! That is really what I wanted to do but I am not a CSS expert clearly.
I knew about ul menus but I didn't think it was worth the time for this tiny project but it looks like it would be much easier and faster.
I knew about ul menus but I didn't think it was worth the time for this tiny project but it looks like it would be much easier and faster.
ASKER
Hey - what is this for?
<li><a href="#" target="_self">#</a></li>
<li><a href="#" target="_self">#</a></li>
and how can I make the active page stay white?
<li><a href="#" target="_self">#</a></li>
<li><a href="#" target="_self">#</a></li>
and how can I make the active page stay white?
ASKER
Active page "tab" li to stay white....
ASKER
Thanks!