CSS Rollover Problem - Webmaster Forum - Web Design, Programming and SEO forums

12-06-2006, 07:23 AM

bscdesign_com

Status: I'm new around here
Join date: Nov 2006
Location:
Expertise:
Software:

Posts: 20

iTrader: 0 / 0%

bscdesign_com is on a distinguished road

CSS Rollover Problem

I have the rollovers working in Firefox but in IE the bacground isn't the right hight.

Take a look.

It is supposed to go all of the way up and down covering the brown.

Here is my code.

Code:

a.nav:link {
	padding: 5px;
	color: #333333;
	text-decoration: none;
	height: 26px;
}
a.nav:visited {
	padding: 5px;
	text-decoration: none;
	color: #333333;
	height: 26px;
}
a.nav:hover {
    padding-top: 5px;
	padding: 5px;
	text-decoration: none;
	color: #988D52;
	height: 26px;
	background: #E1D7B3;
}
a.nav:active {
	padding: 5px;
	text-decoration: none;
	color: #333333;
	height: 26px;
}

Sorry here is the XHTML code.

Code:

<tr>
    <td height="26" align="center" valign="middle" bgcolor="#C7BD87" class="top_nav"><a href="index.shtml" class="nav">Home</a> <a href="about_us.shtml" class="nav">About Us</a> <a href="" class="nav">Gallery</a> <a href="current_projects.shtml" class="nav">Current Projects</a> <a href="sites_available.shtml" class="nav">Sites Available</a> <a href="partnerships.shtml" class="nav">Partnerships</a> <a href="testimonials.shtml" class="nav">Testimonials</a> <a href="contact.shtml" class="nav">Contact Us</a></td>
  </tr>

Can anyone help.

12-06-2006, 11:51 AM

Jeff Andersen

Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 4,449

iTrader: 10 / 100%

Jeff Andersen is on a distinguished road

Can you post the HTML as well?

12-06-2006, 07:40 PM

bscdesign_com

Status: I'm new around here
Join date: Nov 2006
Location:
Expertise:
Software:

Posts: 20

iTrader: 0 / 0%

bscdesign_com is on a distinguished road

Justr added the HTML to my original post.

12-08-2006, 02:21 AM

jono1

Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:

Posts: 1,172

iTrader: 0 / 0%

jono1 is on a distinguished road

First off, you have too much code there. If you just set the parameters that stay the same (padding, color, text-decoration, height) inside an a.nav rule, it will set it for all states. You only need to change the values for the state where they're different, in this case :hover.

Code:

a.nav {
	color: #333;
	padding: 5px;
	text-decoration: none;
	height: 26px;
}
a.nav:hover {
	color: #988D52;
	background: #E1D7B3;
}

It looks to me that the wrong height is caused by the extra padding-top: 5px; parameter you have added. If you use the code above, it should work ok.

12-08-2006, 03:32 AM

bscdesign_com

Status: I'm new around here
Join date: Nov 2006
Location:
Expertise:
Software:

Posts: 20

iTrader: 0 / 0%

bscdesign_com is on a distinguished road

Thanks jono1 I have fixed the problem.

12-13-2006, 08:27 PM

Xi0s

Status: Sin Binner
Join date: Dec 2006
Location: Huddersfield, UK
Expertise:
Software:

Posts: 384

iTrader: 3 / 83%

Xi0s is on a distinguished road

Just for a note if anyone searches and comes here, you can do a css image rollover by making a combined image with both the image and the roll-over image in one, and then :hover just set the background image to move across, therefore making a seamless rollover, and people think your a genious for not using any javascript preloaders.

12-13-2006, 09:35 PM

thatjamie

Status: Ruby on Rails Developer
Join date: Oct 2004
Location: England, UK
Expertise: Ruby, Rails, jQuery
Software: Chocolat, Sublime Text 3

Posts: 2,343

iTrader: 14 / 94%

thatjamie is on a distinguished road

Shouldn't it be .nav a:hover?

Also if you're wanting to apply a rollover to a whole div or span you can add :hover after it's name, eg; #jamiebox :hover { background: #000; } will make the background black when i hover over it.

Regards

12-14-2006, 02:26 AM

jono1

Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:

Posts: 1,172

iTrader: 0 / 0%

jono1 is on a distinguished road

It would be .nav a:hover if he was doing something like

HTML Code:

<div class="nav"><a href="#">link1</a> <a href="#">link2</a></div>

because the a elements are inside the .nav element, which means they appear after it in the CSS definition. However, because he's using

HTML Code:

<a class="nav" href="#">link1</a> <a class="nav" href="#">link2</a>

the .nav attribute belongs to the a element, meaning the a comes first in the CSS.