I have two problems with my rollovers:
In IE 6 the rollovers stick on their hover state
In Safari they don't even appear!
Works fine in Firefox
Here is the css of the rollovers and the containing div(#mainNav), followed by their HTML
a img { background: top left no-repeat; height: 15 px; border:0; } a#homeLink img { background-image: url(../images/nav/1-home.gif); width: 49 px; } a#homeLink:active img {background-image: url(../images/nav/1-home.gif); } a#homeLink:hover img {background-image: url(../images/nav/1-home_on.gif); } a#blueleaf img { background-image: url(../images/nav/2-blueleaf.gif); } a#blueleaf:active img { background-image: url(../images/nav/2-blueleaf.gif); } a#blueleaf:hover img {background-image: url(../images/nav/2-blueleaf_on.gif); } a#portfolio img { background-image: url(../images/nav/3-portfolio.gif); width: 68 px; } a#portfolio:active img { background-image: url(../images/nav/3-portfolio.gif); width: 68 px; } a#portfolio:hover img {background-image: url(../images/nav/3-portfolio_on.gif); } a#casestudies img { background-image: url(../images/nav/4-casestudies.gif); width: 87 px; } a#casestudies:active img { background-image: url(../images/nav/4-casestudies.gif); width: 87 px; } a#casestudies:hover img {background-image: url(../images/nav/4-casestudies_on.gif); } a#services img { background-image: url(../images/nav/5-services.gif); width: 61 px; } a#services:active img { background-image: url(../images/nav/5-services.gif); width: 61 px; } a#services:hover img {background-image: url(../images/nav/5-services_on.gif); } a#contact img { background-image: url(../images/nav/6-contact.gif); width: 60 px; } a#contact:active img { background-image: url(../images/nav/6-contact.gif); width: 60 px; } a#contact:hover img {background-image: url(../images/nav/6-contact_on.gif); } a#client img { background-image: url(../images/nav/7-client.gif); width: 78 px; } a#client:active img { background-image: url(../images/nav/7-client.gif); width: 78 px; } a#client:hover img {background-image: url(../images/nav/7-client_on.gif); } #mainNav { position:absolute; left:20px; top:220px; width:140px; height:340px; line-height:5px; z-index:1; } <div id="mainNav" align="right"> <a id="homeLink" href="cssIndex.htm"><img src="images/spacer.gif" alt="Home" width="49" height="15"></a><br /><br /> <a id="blueleaf" href="blueleaf.htm"><img src="images/spacer.gif" alt="blueleaf" width="63" height="15"></a><br /><br /> <a id="portfolio" href="portfolio.htm"><img src="images/spacer.gif" alt="portfolio" width="68" height="15"></a><br /><br /> <a id="casestudies" href="casestudies.htm"><img src="images/spacer.gif" alt="casestudies" width="87" height="15"></a><br /><br /> <a id="services" href="services.htm"><img src="images/spacer.gif" alt="services" width="61" height="15"></a><br /><br /> <a id="contact" href="contact.htm"><img src="images/spacer.gif" alt="contact" width="60" height="15"></a><br /><br /> <a id="client" href="client.htm"><img src="images/spacer.gif" alt="client" width="78" height="15"></a><br /><br /> </div>
Please can anyone help it's been driving me crazy and I can't find the solution anywhere!
Anymore information that anyone needs let me know. The page can be viewed http://www.blueleafcommunications.com/blnew/cssindex.html
Thanks!
IE6 Doesn't Do Hover Pseudoclass
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
Rollover problems in CSS
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!
Rollover problems in CSS
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
Backround Images are Overwritten by Inline Code
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.
Rollover problems in CSS
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
Rollover problems in CSS
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.
Rollover problems in CSS
ragamuffin thanks for pointing that out but even which those errors fixed as it is now, they IE rollovers are still sticking?
Rollover problems in CSS
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.
Rollover problems in CSS
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?
Rollover problems in CSS
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.)
Rollover problems in CSS
Thanks Tyssen I'll give that one a whirl instead
Rollover problems in CSS
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
Rollover problems in CSS
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.
Re: Backround Images are Overwritten by Inline Code
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.
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.
Rollover problems in CSS
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!
Rollover problems in CSS
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.
Rollover problems in CSS
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
Rollover problems in CSS
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
Link anchors need text. Put the text in and hide it with a massive text-indent.
Rollover problems in CSS
ok no problem but why does IE have that weird problem of the rollovers being out of line?
Rollover problems in CSS
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
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!
CSS Rollovers
Hi,
This thread helped me out quite a bit on a rollover problem I've been having. Appreciate it!
Patrick :thumbsup:
Excellent, thanks for
Excellent, thanks for letting us know it worked for you!