469,643 Members | 1,531 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,643 developers. It's quick & easy.

IE, absolute positioning on a:hover & background-attachment

I've had some trouble getting IE to behave in respect of applying
absolute positioning to a span on an a:hover. I can get it to work, but
I don't understand why certain code causes it to fail to display the
repositioned block.

See an example at http://www.digitalrat.co.uk/test2/index.html

Can anyone explain what IE thinks it's doing?

The page is ugly as I've ripped most of the content & styling out to
give a clearer example.

Essentially I wanted to apply a couple of CSS effects I've seen on Eric
Meyer's site. CSS popups (to provide further details on links) & semi
transparency, or rather the faked effect achievable via fixed
backgrounds using the same base image with varying tints.

This all seems to work quite well.

We embed a span in an anchor & on a hover, style the span into an
absolutely positioned block, ala Meyer. This works in IE, Firefox & Opera.

We also implement faked semi-transarency using two methods - fixed
position backgrounds of varying tints for non-IE & halfscreen gifs as
tiled backgrounds on otherwise transparent elements, for IE, as it
doesn't support fixed position other than for body. The halfscreen gives
something closer to actual tinting as the real background shows through
some pixels, but looks much poorer due to the screening effect. This is
also based on code of Eric Meyer's with my own alternative screening
gifs to give different degrees of tinting.

The two tint methods are selected from by applying the former method &
using an IE hack to override this for IE with the screening method. This
works fine with IE, FF & Opera when used in isolation from the pop up
code...

The css file in the example has the following near the end:

* html div#nav a:hover {background-attachment: fixed;}
* html div#nav2 a:hover {background-attachment: scroll;}

#nav is applied to the left hand vertical navigation menu, while #nav2
is applied to the horizonal navigation submenu.

The two lines above are currently written so as to show how the page
should work, via the left vertical menu, & what goes wrong in IE, via
the horizontal menu. Take a look at what happens on a:hover.

This is purely a function of the background-attachment on a:hover above,
as one can see by swapping the fixed & scroll settings around.

The thing is, setting attachment to fixed shouldn't be necessary &
indeed shouldn't have any significant effect, as best I can make out,
however, without this line the span embedded in the anchor will not
appear as an absolutely positioned block on the hover.

It seems overriding the fixed-position method on the anchor, by changing
the background attachment from fixed to scroll, somehow prevents IE from
correctly blocking & repositioning the embedded span.

If as above in the #nav case we instead allow IE to leave the state at
fixed (despite the fact it doesn't understand fixed), it does manage the
pop up. This has no negative impact on the screening method, I think, so
is a workaround.

I just haven't a clue as to what IE's actually doing. Anyone understand
its internals well enough to explain? Or maybe I have made a mistake
somewhere.

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #1
6 4701

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in message
news:41**********************@news.zen.co.uk...
I've had some trouble getting IE to behave in respect of applying absolute
positioning to a span on an a:hover. I can get it to work, but I don't
understand why certain code causes it to fail to display the repositioned
block.

See an example at http://www.digitalrat.co.uk/test2/index.html

Can anyone explain what IE thinks it's doing?

The page is ugly as I've ripped most of the content & styling out to give
a clearer example.

Essentially I wanted to apply a couple of CSS effects I've seen on Eric
Meyer's site. CSS popups (to provide further details on links) & semi
transparency, or rather the faked effect achievable via fixed backgrounds
using the same base image with varying tints.

This all seems to work quite well.

We embed a span in an anchor & on a hover, style the span into an
absolutely positioned block, ala Meyer. This works in IE, Firefox & Opera.

We also implement faked semi-transarency using two methods - fixed
position backgrounds of varying tints for non-IE & halfscreen gifs as
tiled backgrounds on otherwise transparent elements, for IE, as it doesn't
support fixed position other than for body. The halfscreen gives something
closer to actual tinting as the real background shows through some pixels,
but looks much poorer due to the screening effect. This is also based on
code of Eric Meyer's with my own alternative screening gifs to give
different degrees of tinting.

The two tint methods are selected from by applying the former method &
using an IE hack to override this for IE with the screening method. This
works fine with IE, FF & Opera when used in isolation from the pop up
code...

The css file in the example has the following near the end:

* html div#nav a:hover {background-attachment: fixed;}
* html div#nav2 a:hover {background-attachment: scroll;}

#nav is applied to the left hand vertical navigation menu, while #nav2 is
applied to the horizonal navigation submenu.

The two lines above are currently written so as to show how the page
should work, via the left vertical menu, & what goes wrong in IE, via the
horizontal menu. Take a look at what happens on a:hover.

This is purely a function of the background-attachment on a:hover above,
as one can see by swapping the fixed & scroll settings around.

The thing is, setting attachment to fixed shouldn't be necessary & indeed
shouldn't have any significant effect, as best I can make out, however,
without this line the span embedded in the anchor will not appear as an
absolutely positioned block on the hover.

It seems overriding the fixed-position method on the anchor, by changing
the background attachment from fixed to scroll, somehow prevents IE from
correctly blocking & repositioning the embedded span.

If as above in the #nav case we instead allow IE to leave the state at
fixed (despite the fact it doesn't understand fixed), it does manage the
pop up. This has no negative impact on the screening method, I think, so
is a workaround.

I just haven't a clue as to what IE's actually doing. Anyone understand
its internals well enough to explain? Or maybe I have made a mistake
somewhere.

--
Michael
m r o z a t u k g a t e w a y d o t n e t


Hi,

I'm also experimenting with this. I find it works in some situations.
Below I have broken it down to the bare bones, and don't understand why: It
works in Mozzila 1.7.3 and not in IE 6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">
a:hover span
{display:block;}
span
{display:none;}</style>
</head>
<body>
<a href="Cyril.htm">Hypertext here <span> hidden text here</span></a>
</body>
</html>

Jul 21 '05 #2
> I'm also experimenting with this. I find it works in some situations.
Below I have broken it down to the bare bones, and don't understand why: It works in Mozzila 1.7.3 and not in IE 6.


It is a bug in IE6. Take a look at
http://www.quirksmode.org/css/ie6_purecsspopups.html and you'll see it
discussed.
G.

Jul 21 '05 #3
Graham J wrote:
I'm also experimenting with this. I find it works in some situations.
Below I have broken it down to the bare bones, and don't understand why:
It
works in Mozzila 1.7.3 and not in IE 6.

It is a bug in IE6.


Seemed likely...
Take a look at
http://www.quirksmode.org/css/ie6_purecsspopups.html and you'll see it
discussed.


Ah yes, he credits
http://www.tanfa.co.uk/css/articles/...popups-bug.asp

And this precisely explains what I've been seeing. Wonderful. Thanks :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #4

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in message
news:41**********************@news.zen.co.uk...
Graham J wrote:
I'm also experimenting with this. I find it works in some situations.
Below I have broken it down to the bare bones, and don't understand why:
It
works in Mozzila 1.7.3 and not in IE 6.

It is a bug in IE6.



Seemed likely...
Take a look at
http://www.quirksmode.org/css/ie6_purecsspopups.html and you'll see it
discussed.


Ah yes, he credits
http://www.tanfa.co.uk/css/articles/...popups-bug.asp

And this precisely explains what I've been seeing. Wonderful. Thanks :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t

==============================================
Thank you,

That does help. Strange things can still happen though. While
experimenting, I crashed IE 6 by hovering over a link. There was a positive
feedback effect when positioning an image to appear over the hovered
section. Also: using color:green as a hack (below); IE6 displays the hidden
text inline! Why does it do that for a block?--Mozzila gets it right. It
works ok if you substitute direction:ltr for color:green--weird.

Howard Fear

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">
a:hover span
{display:block;}
a:hover
{color:green;}
span
{display:none;}</style>
</head>
<body>
<a href="Test.htm">Hypertext here <span> hidden text here</span></a>
</body>
</html>

Jul 21 '05 #5
pronoun wrote:
"Michael Rozdoba" <mr**@nowhere.invalid> wrote in message
news:41**********************@news.zen.co.uk...
Ah yes, he credits
http://www.tanfa.co.uk/css/articles/...popups-bug.asp

And this precisely explains what I've been seeing. Wonderful. Thanks :)

That does help. Strange things can still happen though. While
experimenting, I crashed IE 6 by hovering over a link. There was a positive
feedback effect when positioning an image to appear over the hovered
section. Also: using color:green as a hack (below); IE6 displays the hidden
text inline! Why does it do that for a block?--Mozzila gets it right. It
works ok if you substitute direction:ltr for color:green--weird.


I don't yet know much about the consequences of changing display -
specifically, whether you can treat an inline element styled display:
block; in all respects like a block & so set all corresponding properties.

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #6
pronoun wrote:
Also: using color:green as a hack (below); IE6 displays the hidden
text inline! Why does it do that for a block?--Mozzila gets it right. It
works ok if you substitute direction:ltr for color:green--weird.


As explained at http://www.tanfa.co.uk/css/articles/...popups-bug.asp
changing color or background image aren't enough to avoid the bug.

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Mark | last post: by
14 posts views Thread by Fistro | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.