[Solved] Rollover problems in CSS

Here's some info about it. I went through the same hell a few months ago.

http://www.xs4all.nl/~peterned/csshover.html

Basically, you have to add a link in the header to the hover.htc file within a conditional statement

<!--[if IE]>
<style type="text/css" media="screen">

/* csshover.htc file version: V1.21.041022 - Available for download from: http://www.xs4all.nl/~peterned/csshover.html */

body{behavior:url(http://www.yourpathtofile.com/csshover.htc);}

<![endif]-->

If you want to pick through the code on this site where I implemented it, feel free. http://www.newhavenindependent.org

This doesn't seem to have worked, no difference on my screen?

I am trying to do hover on an <a> tag so that shouldn't be the problem as it's native to IE?

Thanks!

I ran the CSS that you provided throught the validator and several errors appeared. I don't know if that contributes to the issue, but you may want to check it out.

http://jigsaw.w3.org/css-validator/

- R

If you specify an image inline in your code, it's going to override the background image in the stylesheet. Get that image code with the spacer gif out of there. For instance:

<a id="homeLink" href="cssIndex.htm"><img src="images/spacer.gif" alt="Home" width="49" height="15"></a><br /><br />

should be <a href="cssIndex.htm" alt="Home"><div id="homeLink"></div></a> The width and height should be set in the stylesheet, not in your html. The line breaks should also he specified as top and bottom margin in the CSS, not in the HTML.

reverse the order of the active and hover states in the css. The correct order to declare the psuedo classes is:
link
visited
focus
hover
active

Hi Wolfcry, I tried that but it didn't seem to make any difference to the IE problem of sticking rollovers. Not sure about Safari.

Smartpill: how can I do as you suggested? The stylesheet code is based on the div being attached to the <a> tag, not it's own div? Otherwise hover won't work. I tried it anyway with your code and the image doesn't even appear.

ragamuffin thanks for pointing that out but even which those errors fixed as it is now, they IE rollovers are still sticking?

I'm sorry, I don't know the answer to your problem, but using a spacer image which you then replace with a CSS background image seems to be very odd way to style your links. You might want to consider putting them in a list as well.

Tyssen,

I used this method because I found it on the net from the O'Reilly website.

I'm using it because I have graphical rollovers but I wanted to do them with CSS, not with Javascript and this was a solution.

If there's a better way of doing it I'll try that for sure?

I've never actually seen a tutorial for it, but the method I use quite often is one I first saw on www.zeldman.com and involves using a single background image for all your links & their hover state. (More examples on my site; link is below.)

Thanks Tyssen I'll give that one a whirl instead

ok so I tried Tyssen's way of doing things at it works pretty damn well but I have a problem with alignment in IE..here's my css:

div#globalnav ul#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
ul#menu li, ul#menu a {
	height: 20px;
	display: block;
	}
	
div#globalnav ul#menu li a {
	text-indent: -9999px -9999px;
	text-decoration: none;
	}
	
#home	{top: 0; width: 49 px;}
#blueleaf	{top: 20px; width: 63 px;}
#portfolio	{top: 40px; width: 68 px;}
#casestudies {top: 60px; width: 87 px;}
#services	{top: 80px; width: 61 px;}
#contact	{top: 100px; width: 60 px;}
#clientarea	{top: 120px; width: 78 px;}

#home a:hover	{background: transparent url(../images/nav/homePageNav.gif) -140px 0px no-repeat;}
#blueleaf a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -20px no-repeat;}
#portfolio a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -40px no-repeat;}
#casestudies a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -60px no-repeat;}
#services a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -80px no-repeat;}
#contact a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -100px no-repeat;}
#clientarea a:hover {background: transparent url(../images/nav/homePageNav.gif) -140px -120px no-repeat;}

and the html:

<div id="mainNav">
	<ul id="menu">
		<li id="home"><a href="home.htm" title=""></a></li>
		<li id="blueleaf"><a href="blueleaf.htm" title=""></a></li>
		<li id="portfolio"><a href="portfolio.htm" title=""></a></li>
		<li id="casestudies"><a href="casestudies.htm" title=""></a></li>
		<li id="services"><a href="services.htm" title=""></a></li>
		<li id="contact"><a href="contact.htm" title=""></a></li>
		<li id="clientarea"><a href="clientarea.htm" title=""></a></li>
	</ul>
</div>

basically in firefox it's perfect. But in IE the second rollover is 5 px out, the third 10 px out, third 15 px out etc. Is this something to do with IE's margins or something? I don't know all the bugs yet!!

Thanks

Quite hard to say without seeing an actual page. The code looks pretty much like what I've used before except you don't need two -9999px for text-indent (just one is required) and I don't know if IE would baulk at the space between your number & px, e.g. width: 49 px.

<a id="homeLink" href="cssIndex.htm"><img src="images/spacer.gif" alt="Home" width="49" height="15"></a><br /><br />

should be <a href="cssIndex.htm" alt="Home"><div id="homeLink"></div></a> The width and height should be set in the stylesheet, not in your html. The line breaks should also he specified as top and bottom margin in the CSS, not in the HTML.

Smartpill, although fantastically helpful you have made on mistake - <a> is an inline element, and therefore cannot contain <div>, which is a block-level element.

I knocked out the second -9999px now.

Also when I removed the spaces from between the number and px the rollovers stopped working altogether in Firefox and IE!

As for the full page that's up at:

http://www.blue-leaf.co.uk/blnew/cssIndex2.html

and the css is

http://www.blue-leaf.co.uk/blnew/css/css2.css

Thanks to everyone for all their help so far, especially Tyssen!

I'm trying to recreate your page here using the full path to your images, but your nav image doesn't seem to exist.
Also, you'll need some actual text in your anchor tags.

damn it sorry yeah I put the new page up but forgot the new nav image grrr, it's at:

http://www.blue-leaf.co.uk/blnew/images/nav/homePageNav.gif

and I removed the text from the anchors because I wanted to just see the rollovers, how do you hide the text behind the image?

Thanks again

Thanks again

Link anchors need text. Put the text in and hide it with a massive text-indent.

ok no problem but why does IE have that weird problem of the rollovers being out of line?

div#mainNav ul#menu	{
	width:140px;
	height:340px;
	background: transparent url(../images/nav/homePageNav.gif) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}

div#globalnav ul#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
ul#menu li, ul#menu a {
	height: 20px;
	display: block;
	}
	
div#globalnav ul#menu li a {
	text-indent: -9999px;
	text-decoration: none;
	}

Your problem is you're calling div#globalnav which doesn't exist. You don't actually need to specify anything before ul#menu as calling an element with an ID is usally specific enough.

Thanks Tyssen, I changed those but my rollovers were still out in IE. Figured out why now though and it's my old friend font size and line height, if you add the two lines into:

div#mainNav ul#menu li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	top: 0px;
	line-height:0px;
	font-size:1px;
}

Then the rollovers line up: I so should have thought of that before

Thanks for all your help though guys!

Hi,

This thread helped me out quite a bit on a rollover problem I've been having. Appreciate it!

Patrick :thumbsup:

Excellent, thanks for letting us know it worked for you!