CSS Rollovers - Webmaster Forum - Web Design, Programming and SEO forums

03-04-2007, 02:00 PM

Katy

Status: Junior Member
Join date: Jan 2007
Location: Finland
Expertise:
Software:

Posts: 40

iTrader: 0 / 0%

Katy is on a distinguished road

CSS Rollovers

I have a CSS rollover menu and it works great in Firefox, but not in IE. When I hover over the buttons they look ugly and the background disappers for a few seconds and all other links turn white. I tried fixing it by adding

* html .nav a:hover {
visibility: visible;}

but that only fixed the font.

Here's my CSS:

Code:

.nav a {
display: block;
width: 188px;
background: inherit;
background-image: url(images/link.jpg);
padding: 11px 0px 11px 0px;
text-indent: 17px;
text-decoration: none;
text-transform: capitalize;
font: bold 9pt Verdana, arial;
color: #CCCCCC;}

.nav a:hover {
background: inherit;
background-image: url(images/hover.jpg);
color: #FFFFFF;}

* html .nav a:hover {
visibility: visible;}

And HTML:

HTML Code:

<div class="nav">

<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>

</div>

I can't use javascript, cos it requires to put my buttons directly on the page, but I have them all as backgrounds...

So, is there anything I can do to fix this, or is IE hopeless?

Hope someone can help!

03-04-2007, 02:14 PM

Garyrae

Status: Request a custom title
Join date: Dec 2005
Location: Colchester, UK
Expertise:
Software:

Posts: 4,625

iTrader: 16 / 100%

Garyrae is on a distinguished road

Try this:

Code:

#nav * {
	padding: 0;
	margin: 0;
}

#nav li {
	float: left;
	width: 188px;
	text-align: center;
	list-style: none;
	margin: 0 5px;
	background: url(images/link.jpg);
}

#nav li a {
	display: block;
	padding: 11px 0;
	font: bold 9pt Verdana, arial;
	text-transform: capitalize;
	width: 188px;
	color: #CCC;
	text-decoration: none;
}

#nav li a:hover {
	background: url(images/hover.jpg);
	color: #FFF;
}

Code:

<ul id="nav">
	<li><a href="#">Link goes here</a></li>
	<li><a href="#">Link goes here</a></li>
	<li><a href="#">Link goes here</a></li>
	<li><a href="#">Link goes here</a></li>
</ul>

03-04-2007, 03:05 PM

Katy

Status: Junior Member
Join date: Jan 2007
Location: Finland
Expertise:
Software:

Posts: 40

iTrader: 0 / 0%

Katy is on a distinguished road

Thank you! It works better now, but my buttons are aligned horizontally..

03-04-2007, 03:10 PM

Garyrae

Status: Request a custom title
Join date: Dec 2005
Location: Colchester, UK
Expertise:
Software:

Posts: 4,625

iTrader: 16 / 100%

Garyrae is on a distinguished road

Oops, sorry [x

Remove:

Code:

margin: 0 5px;

And:

Code:

float: left;

03-04-2007, 04:04 PM

Katy

Status: Junior Member
Join date: Jan 2007
Location: Finland
Expertise:
Software:

Posts: 40

iTrader: 0 / 0%

Katy is on a distinguished road

Great! Thanks a lot! Btw, do you know why the images disappear for a few secs in IE? Seems like it's only an IE problem...

03-04-2007, 04:23 PM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

Originally Posted by Katy

Great! Thanks a lot! Btw, do you know why the images disappear for a few secs in IE? Seems like it's only an IE problem...

It's the image loading which makes it disappear. You can preload the images with javascript.

03-04-2007, 04:25 PM

Katy

Status: Junior Member
Join date: Jan 2007
Location: Finland
Expertise:
Software:

Posts: 40

iTrader: 0 / 0%

Katy is on a distinguished road

You mean there's a javascript that will load the image for IE or something?

03-04-2007, 05:29 PM

LittleJohnny

Status: I'm new around here
Join date: Feb 2007
Location:
Expertise:
Software:

Posts: 11

iTrader: 0 / 0%

LittleJohnny is on a distinguished road

http://www.pageresource.com/jscript/jpreload.htm

03-04-2007, 09:37 PM

union1864

Status: I'm new around here
Join date: Mar 2007
Location: Ljubljana, Slovenia
Expertise:
Software:

Posts: 5

iTrader: 0 / 0%

union1864 is on a distinguished road

Maybe this would fix this:
Instead of using alternative image for hover make one image with both instances. Put hover image under the original and save it - button.gif

Then add this in your CSS (change background position of button image):
#nav li a{
background-position: center top;
}
#nav li a:hover{
background-position: center bottom;
}

This way is image already "preloaded".

03-04-2007, 09:50 PM

#10

opserty

Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:

Posts: 606

iTrader: 0 / 0%

opserty is on a distinguished road

Else you can just add them to the background of the list item anchor and give them a position which can't be seen

E.g.

HTML Code:

#nav li a {
...
background: url('../images/menu_hover.jpg') -100px -100px no-repeat;
}

Haven't tested but I found it somewhere else and heard that it works.