Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Simple CSS hover background color change issue...

Posted on 2008-10-27
7
Medium Priority
?
1,045 Views
Last Modified: 2012-05-05
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!
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">&nbsp;</td>
        <td height="40" class="gallery_year">&nbsp;</td>
        <td height="40">&nbsp;</td>
        <td height="40">&nbsp;</td>
      </tr>
    </table>

Open in new window

0
Comment
Question by:ywoolf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 16

Accepted Solution

by:
brad2575 earned 1000 total points
ID: 22811788
well you have this:

display: block;
        height: 40px;


in the hover code and not in the others, try removing them (or adding to the others) and that should fix the problem.
0
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 1000 total points
ID: 22811822
Like Brad said:
<style type="text/css">
.gallery_year {
background-color:lightGrey;
        font-size: 18px;
        font-weight: normal;
        color: #B72E2C;
        font-family: Georgia, "Times New Roman", Times, serif;
        text-align: center;
}
.gallery_year a {
        text-decoration: none;
        color: #BF4644;
        font-size: 18px;
        font-weight: normal;
		height:31px;
		padding-top:9px;
	width:100px;
	display:block
}
.gallery_year a:hover{
        color: #B72E2C;
        font-size: 18px;
        background-color: #FFFFFF;
        font-weight: normal;
}
.gallery_year a:visited{
        text-decoration: none;
        color: #B72E2C;
        font-size: 18px;
        font-weight: normal;
}
</style>

Open in new window

0
 
LVL 1

Author Comment

by:ywoolf
ID: 22811861
I just added a line height of 40px to the a link hover and visited.

Thanks!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:ShaneJones
ID: 22811940
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.
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>

Open in new window

0
 
LVL 1

Author Comment

by:ywoolf
ID: 22812027
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.
0
 
LVL 1

Author Comment

by:ywoolf
ID: 22812047
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?
0
 
LVL 1

Author Comment

by:ywoolf
ID: 22812081
Active page "tab" li to stay white....
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question