Tue, 2004-03-16 08:53
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
Tue, 2004-03-16 09:55
#1
: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
Tue, 2004-03-16 10:47
#2
: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
Tue, 2004-03-16 12:22
#3
:hover-Mouseover trouble in Safari, Opera etc.
Does this help in anyway?
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 
)... 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).
Mon, 2004-03-22 21:41
#4
: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 
But thanks 4 the help.
/J
Mon, 2004-03-22 23:40
#5
:hover-Mouseover trouble in Safari, Opera etc.
8-[ Gasp... we know where you live 
It takes several cracks at relearning/learning CSS. You'll be back, mark my words