Forum Moderators: not2easy
I've done both a CSS and HTML validation, and followed the CSS Troubleshooting refresher here. I don't even get a flicker in the two browsers. The doctype is DTD HTML 4.01 Transitional//EN.
Here's the code:
<style>
#popuptab {
position: absolute;
top: 252px;
left: 179px;
z-index: 2;
}#popuptab a:hover {
position: absolute;
top: -118px;
left: 0px;
z-index: 2;
}
</style>
<body>
<div id="popuptab"><a href="#"><img src=
"images/popuptab.gif" width="163" height="233" border="0"
alt=""></a></div>
</body>
The page is mostly images in various layers that need to be positioned accurately, so I'm using absolute positioning throughout. Website from heck, but the client has the last word.
They originally wanted an animated image whose upper third only was visible behind an image above it, then slid up to reveal the rest of the image. Picture a tombstone mostly buried, then a mouseover brings it up out of the ground. I convinced them that a two-part reposition of a static image gave a good enough illusion but they are Mac users (as am I) and use Safari almost exclusively.
For some reason, the CSS for the second position had to be relative to the first, even using absolute positioning. This I find confusing. Is there a better approach that is as simple, and will work in Safari? Thanks for any input!
For some reason, the CSS for the second position had to be relative to the first, even using absolute positioning. This I find confusing.
Absolutely positioned elements are positioned relative to their positioned parent. The
<div id="popuptab">in your case. If parent wasn't positioned then it would be relative to the BODY. Without this behaviour it would be difficult to have absolutely positioned elements that were centred in the page.
May be you should be absolutely positioning your anchor, as opposed to the parent DIV? Your a:hover will then be positioned in the same 'relative' manner as your anchor.
#popuptab a {
Is there a better approach that is as simple...
Instead of actually moving the element, an alternative approach might be to alter the background-position of a background-image? Effectively just a CSS rollover?
You may be onto something there, it could be as simple as the #popuptab a:hover will not 'fire' unless there is a preceding #popuptab a general rule.. IE sometimes has problems when the general rule is missing doesn't it, maybe Safari is acting th same here?
kenearl.. try:
#popuptab {
position: absolute;
top: 252px;
left: 179px;
z-index: 2;
}#popuptab a {
position: absolute;
}#popuptab a:hover {
top: -118px;
left: 0px;
z-index: 2;
}
the position: absolute; should be applied to all states of the link and may be enough to get Safari to redraw the co-ordinates on hover.
-Suzy
