23 replies [Last post]
rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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!

Smartpill
Offline
newbie
Last seen: 14 years 49 weeks ago
Timezone: GMT-7
Joined: 2005-06-21
Posts: 5
Points: 0

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

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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!

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 11 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

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. Wink

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

- R

Smartpill
Offline
newbie
Last seen: 14 years 49 weeks ago
Timezone: GMT-7
Joined: 2005-06-21
Posts: 5
Points: 0

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 13 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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.

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.)

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Rollover problems in CSS

Thanks Tyssen I'll give that one a whirl instead

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: Backround Images are Overwritten by Inline Code

Smartpill wrote:
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 Laughing out loud you have made on mistake - <a> is an inline element, and therefore cannot contain <div>, which is a block-level element.

Verschwindende wrote:
  • CSS doesn't make pies

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Rollover problems in CSS

rsmithinfo wrote:
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.

Verschwindende wrote:
  • CSS doesn't make pies

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Rollover problems in CSS

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

rsmithinfo
Offline
Regular
Last seen: 12 years 45 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

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!

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 12 years 23 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

CSS Rollovers

Hi,

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

Patrick :thumbsup:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent, thanks for

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

Verschwindende wrote:
  • CSS doesn't make pies