Problem with a:hover in IE vs. Firefox

I'm working on a template for a site. I'm making a basic tabbed navigation using clear gif images with a changed background on hover. However, in IE, the image moves down a pixel. But if Firefox it works perfectly. I can't figure out why. Does anyone have any suggestions?

The site is here:
http://animalsense.com/_new/


THanks.

 

Post your style sheet for the navigation

 

Common issue when using images + image replacement javascripts in IE - ESPECIALLY when without a doctype your page is in 'quirks mode'.

I would add a valid doctype, recombine all the images to a single file, then assign them as background properties using the hover state (and a 'current' class) to slide the background to the appropriate image.

 

Interesting... I never new about doctype before. I'll have to learn more about that. I added a doctype.

However, I'm a bit confused by this because I'm not using javascript. I'm just using css. Here's the basic code...

Navigation:

<div id="globalnav">
  <TABLE WIDTH=800 height="139" BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD><img src="http://animalsense.com/_new/images/animalsense-dog-training_01.gif" alt="AnimalSense Canine Training &amp; Behavior" width="211" height="139"> </TD>
		<TD id="home"><a href="http://animalsense.com/_new/"><img src="http://animalsense.com/_new/images/animalsense-dog-training_02.gif" alt="AnimalSense Dog Training" width="79" height="139" border="0"></a> </TD>
		<TD id="about"><a href="http://animalsense.com/_new/about"><img src="http://animalsense.com/_new/images/animalsense-dog-training_03-on.gif" alt="About AnimalSense Dog Training &amp; Behavior" width="111" height="139" border="0"></a> </TD>
		<TD id="classes"><a href="http://animalsense.com/_new/classes"><img src="http://animalsense.com/_new/images/animalsense-dog-training_04.gif" alt="AnimalSense Classes" width="92" height="139" border="0"></a> </TD>
		<TD id="services"><a href="http://animalsense.com/_new/services"><img src="http://animalsense.com/_new/images/animalsense-dog-training_05.gif" alt="AnimalSense Services" width="98" height="139" border="0"></a> </TD>
		<TD id="blog"><a href="#"><img src="http://animalsense.com/_new/images/animalsense-dog-training_06.gif" alt="AnimalSense Blog" width="66" height="139" border="0"></a> </TD>
		<TD><img src="http://animalsense.com/_new/images/animalsense-dog-training_07.gif" width="143" height="139" border="0" usemap="#Map"></TD>
	</TR>
  </TABLE>
</div>

Code (markup):

And here's my css:

#globalnav td a:link {
	display: block;
	}
	
#globalnav td a:hover {
	background-image: url('http://www.animalsense.com/_new/images/background-bn_05.gif');
	display: block;
	}

Code (markup):

Pretty basic stuff. A table with a div tag, cells with a css style telling it to hover with an image. But in IE it's shifting the images down. Any suggestions would be appreciated.

Thanks.

 

Do you have dimensions set? width/height?

 

I don't have dimensions set. Should I? In the CSS or in the HTML?

 

try changing the deminsion sizes in the CSS

 

I don't know what exactly the problem, haven't really looked into it (I'm not on my XP right now but a Kubuntu),
so I recreated the page from scratch instead:
http://xem247.com/vimf/070814-animalsense-new/example.html

The CSS is here:
http://xem247.com/vimf/070814-animalsense-new/all.css

I also put everything (html, css and images) in a .zip here:
http://xem247.com/vimf/070814-animalsense-new/archive.zip

Haven't checked it in IE, Opera and Safari yet but so far it looks OK in Firefox and Konqueror.

 

Hmm. Remarkably clean code with proper indenting, VERY familiar image replacement techniques - huh, wonder what insipired that

Though I would probably change that first LI to a H1, and make that 'side menu' in the header separate from the parent list... Probably stack them with floats or use absolute positioning (padding the sides of the main menu UL so flow is preserved)

Maybe change that footer to a UL/LI as well since it too is a list. (though that means using something other than a colon between items)

Oh, and the H2's, should probably be kin to the P, not inside them. (hence your example not validating!)... and there's no reason for that clearing DIV to be necessary.

Still, pretty good rewrite, and it does seem to work in Opera, Saffy and IE.

 

Ok, here's how I'd have done it - there's a bit more CSS, but the images are smaller so it's roughly equal to the original in size, 5k less than VimF's (best of both worlds, same size, less files)

http://battletech.hopto.org/for_others/marklbishop/template.html

The directory is unlocked:
http://battletech.hopto.org/for_others/marklbishop

So folks can grab the drippy gooey bits.

Validates XHTML 1.0 Strict, CSS WOULD validate if not for the use of 'expression' to give lte IE6 min-width/max-width (I can live with that). Tested and working in IE 6 & 7, FF, Opera and Saffy.

I implemented a min-width of 755px and a max-width of 1024 - I figure that will give you some room to play... it's also been swapped to content first on the columns and had the class names switched to something a bit more meaningful.

Also implemented are :focus and :active states in addition to :hover so keyboard and other alternative navigation devices aren't left out.

Some of the fonts got bumped in size, and I left the content area AND sidebars to use %/em fonts for enlargement purposes. (I'm half tempted to switch the column widths and min/max widths to pt so large font users get the real treat)

I also put some effort towards styling a 'pretty' appearance when images are turned off so the page isn't completely nuetered for the folks that turn images off but leave CSS on. *RIMSHOT*

Images were recut to save a few bytes, though there wasn't a whole lot of optimization left after VimF got through with that (good work) - I cropped the logo down a bit smaller (more on that in a sec), removed all the excess white space from the menu, and also stripped out the white space from the top of that background 'stripe'.

The logo got moved over left justified to #container so the menu would actually FIT centered at out desired min-width. Both the original and VimF's put it slightly off-center to the right, which just looked wonky to me - moreso once I added min/max-width.

Hope this helps.

 

That's a whole lot more than just some helps (as usual). I learned a lot from it, too.

Apparently those errors I made are pretty basic, so looks like I still have a long way to go.

 

With the OP's permission, I want Bloggiddy blog blog blog. I'm a dog, playing with my blog. Dogs love blogs. Blogs and dogs. for a sig.