473,554 Members | 4,731 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 4926

"Michael Rozdoba" <mr**@nowhere.i nvalid> 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.dt d">
<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.i nvalid> 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.dt d">
<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.i nvalid> 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
6284
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 is not what I want. Is there a way to get IE6 to do it the mozilla way? Thanks! Griff
3
2220
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 experiment: "This sentence is to be about nine words long. I hope this test suite works. Mary had a little lamb and its fleece was white as snow." Next a...
2
3148
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 that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number...
2
16403
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 to overlap correctly. You can see it on this page: www.creativekaysjewelry.com The images overlap exactly how I wanted and in the right position
3
3054
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. Any help would be greatly appreciated. I have set the margin and padding to 0. I am new to html and css so I don't know what else to try. Thanks ...
6
2902
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 src='photos/thumbs/ bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div> where 'thumb' is my container, and 'del' should be aligned...
6
6058
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
1717
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.... Just not IE6. Any suggestions? Website: stevenkneff.com code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
14
3295
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: http://alistapart.com/articles/fauxabsolutepositioning It calculates the left offset from a fixed position, as opposed to calculating it from the...
1
1926
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 always stays at the top of the page (absolute positioning). The problem I have is that the blank space (on the left and right of the main container)...
0
7541
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7821
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7900
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5452
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3591
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3571
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2033
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1154
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
861
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.