5 replies [Last post]
s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 8 years 18 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

Hi! I have sometimes used CSS to make a neat mouseover effect for links. I have simply styled the

<a>-tag with length, width, border, padding, and background properties, like on this page:

http://www.johanolsson.net/, where i have used regular text and then used a backround image

for the :hover pseudoclass.

This solution has worked fine in IE6pc and Op7pc, but on Mac's Safari the "width" property isn't

recognised on links... which ruins the whole thing...

So i came up with a workaround: I thought i could use a transparent GIF as a link <img> to size up the

link to correct proportions, and then use different background images for the <a>.

...well, this worked in IE6 on the PC...

...but on Safari and Opera the background image gets "shoved" downwards, as if it can't be placed

behind the empty GIF. Here is a page i'm working on: http://www.johanolsson.net/medikus/

Here's the HTML:


<div class="main_meny">

<a href="#" class="meny_01">
<img class="meny" src="images/k/tom.gif" border="0">
</a>

</div>

...and the css:


.main_meny {
	position: absolute;
	left: 35px;
	top: 105px;
	vertical-align: top;
	width: 190px;
	height: 270px;
	font: 1px Georgia;
	padding: 0px;
	margin: 0px;
	}

img.meny {
	padding: 0px;
	margin: 0px;
	}

a.meny_01:link {
	font: 1px Verdana;
	color: #000;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	background-image: url(images/k/filo_0.gif);
	background-position: top left;
	}


a.meny_01:visited {
	font: 1px Verdana;
	color: #000;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	background-image: url(images/k/filo_0.gif);
	background-position: top left;
	}


a.meny_01:hover {
	font: 1px Verdana;
	color: #888;
	text-decoration: underline;
	padding: 0px;
	margin: 0px;
	background-image: url(images/k/filo_1.gif);
	background-position: top left;
	}


a.meny_01:active {
	font: 1px Verdana;
	color: #000;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
	background-image: url(images/k/filo_0.gif);
	background-position: top left;
	}

I just can't see why this isn't working... is it a bug in Safari/Opera? is it my doctype? (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)? Or am i blind?

regards, J

Validator.w3.org compels you! Validator.w3.org compels you!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

:hover-Mouseover trouble in Safari, Opera etc.

Hi s4ndp4pper,
I don't have a Mac to test this on but like you mention it could well be the doctype. The one you currently use throws the page into quirks mode.
Try this one.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
One other thing I noticed, the hover image was very slow to load initially, try preloading it.

Hope that helps

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 26 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

:hover-Mouseover trouble in Safari, Opera etc.

Hi

I note you don't have an alt for an image. Safari WILL NOT load an empty image (one that does not show) UNLESS it has an alt, even alt="".

This was a 'feature' designed to let Safari load pages faster. Earlier versions loaded every image they found in the code, which was great for pre-loading images, but wasted bandwidth and was slow. So it has now gone the other way. You can't preload images with Safari (not effectively anyway). If they aren't in the viewport (including any area you can scroll down to) on startup, it won't load until it has to.

Even worse, my testing seems to suggest that slipping the image in as a 1 x 1 pixel doesn't work either, as Safari spots this as not really viewable (or at least it seems to)!

In the main, my testing of pre-loading suggests it doesn't work reliably enough to work on demand for menu's. This leaves us to fall back on css color changes (the DOM Menu system is an excellent example), or have one background and just change the font color (assuming the text is superimposed). Or, of course, flash menu's, which can be really cool and not too big.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 36 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

:hover-Mouseover trouble in Safari, Opera etc.

Does this help in anyway?

http://pub.c-o2.net/link.htm

First of all I thought you meant the width of the white bordered frame of the links. I now realise this is a feature (a nice one Wink )... You can add a hover that'll extend the full amount, if you add the hover state to the <li> that contains the <a> as I have done (I've changed the code to an unordered list, which is becoming vastly preferable for navigation links (for good reason)).

Unfortunately, IE for Windows will not show the image hover, but it will not mess up either (will show the link hover state of a white underline).

The next sentence is true. The previous sentence is false. Discuss...

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 8 years 18 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

:hover-Mouseover trouble in Safari, Opera etc.

Thanks everyone! Your replies were interesting, but i couldn't get it to work the way i wanted - either it looked like crap in PC-IE or it looked bad in Safari. I finally managed to get the CSS-mouseover to work - the trick was to set the font size for the <a> tag - but nevertheless the damn thing had an offset in either Safari or IE, and no background:;, padding:; or margin:; could put it where i wanted. This posed a problem as i had to use static images that looked weird when placed next to the mouseovers.

So i gave up and did the thing in Dreamwaver instead using javascript. I am a traitor Smile But thanks 4 the help.

/J

Validator.w3.org compels you! Validator.w3.org compels you!

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 36 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

:hover-Mouseover trouble in Safari, Opera etc.

8-[ Gasp... we know where you live Laughing out loud Wink

It takes several cracks at relearning/learning CSS. You'll be back, mark my words Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...