Need Fast help, with background rollover!

Okay, so here's the problem. My rollovers are working fine in Fire Fox, but IE is not responding to it, just test the tabs in both browsers; you'll know what I mean:

http://hpa.strawberry-gashes.net/docters/


What am I doing wrong? Please, help needed, urgently....


thanks to whoever helps

 

Not certain if it's relevant, but you know your %/em fonts are enlarging 25% on 'large font/120dpi' machines and wrapping to two lines, right? If you are going to use a image background, use a font measured in the same metric - px.

ok, first off, this:

<div class="nav" id="nav"><a href="#">Cryo-Embedder</a></div>
<div class="nav"><a href="#">Consulting</a></div>
<div class="nav"><a href="#">About Us</a></div>
<div class="nav"><a href="#">Contact</a></div>
<div class="nav"><a href="#">Techniques</a></div>
<div class="nav"><a href="#">Place Order</a></div>
<div class="nav"><a href="#">Workshop</a></div>

Code (markup):

is a sure indicator you are doing something wrong - first they are in a row so you shouldn't need wrapping DIV's, second it's a list of options so it SHOULD be a list - finally if you wrapped all of them with a single class or ID you wouldn't need to say it on each and every item.

<ul id="mainMenu">
	<li><a href="#">Cryo-Embedder</a></li>
	<li><a href="#">Consulting</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Techniques</a></li>
	<li><a href="#">Place Order</a></li>
	<li><a href="#">Workshop</a></li>
</ul>

Code (markup):

Secondly, there's no such thing as a fraction of a pixel. (0.8px, 4.5px - no such thing)...

... and I'd suggest combining your two image states down to a single file, and using an image format that will give you better compression like .png given it's such a simple button style. Just put the two images one atop the other as a 62px tall image, and the following CSS would work with the above list:

#mainMenu {
	list-style:none;
	padding-left:1px;
}

#mainMenu li {
	display:inline; /* keep IE happy */
}

#mainMenu a {
	float:left;
	width:97px;
	height:31px;
	margin-right:5px;
	text-align:center;
	text-decoration:none;
	font:bold 12px/31px arial,helvetica,sans-serif;
	color:#FFF;
	background:url(images/nav.png) 0 0 no-repeat;
	border-bottom:5px solid #EAEAEA;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-position:0 -31px;
}

Code (markup):

One less file, one less handshake so faster load time, and no need to waste time 'playing' with image caching if you don't want that annoying delay on the first mouse-over as the second image tries to load.

 

Still having problems in IE:

http://hpa.strawberry-gashes.net/docters/testingnew.html

Please help

 

only problem I'm seeing is a wrapping issue - try decreasing the border between the items to 4px - then tweak the left margin on the UL to get the centering right... Kind of odd they are centering though - leads me to wonder if something's actually wrong with your wrapping container...

Actually, try deleting that extra 'tabs' div - it serves no purpose and could be mucking things up. (that it's declaring a width WIDER than the container around it could have something to do with the problem!)

 

Well, If I remove the class div classed "tabs", it messes in FF, God! it's so difficult to keep these to happy, lol.

 

Well, fixed everything, thanks for the support dude!