473,287 Members | 1,964 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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 4907

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Griff Miller | last post by:
Please see http://home.houston.rr.com/gmiller15/css/vertprob.html . In mozilla 1.6/1.7 it looks the way I want it, with a thin separation between the two boxes. In IE6, the two boxes touch, which...
3
by: horusprim | last post by:
Is there a CSS absolute positioning rendering bug in FF1.02 and IE 6? I have been experimenting with precision absolute positioning in CSS. The following test content was used in the...
2
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is...
2
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
3
by: goldenboy651 | last post by:
My Positioning in IE 6 is exactly the way I want it, but when I view the page in my firefox browser things are out of place. When I try and change the css my IE page moves, but the firefox doesn't. ...
6
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...
6
by: Markus | last post by:
Hello I have a navigation structured as follows: <ul> <li> <a>Chapter1</a> <ul> <li><a>Chapter 1.1</a></li> <li><a>Chapter 1.2</a></li>
0
by: sknonline | last post by:
Greetings. I am having troubles using absolute positioning in IE6. When I establish the width as 100%, it's not spanning the entire width of the browser. It works in Firefox, Safari, and IE7.......
14
by: Fistro | last post by:
I'm trying to find a design that would allow me to build web pages without having to worry about compatibility issues (not too much, in any case,,,) I've came across this CSS layout technique:...
1
by: worldwideebm | last post by:
This problem is hard to to explain. I have a web page with a container that has all of my content on it and then on the side of that container I have a small menu type of thing that I made which...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.