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
