Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

z-index and links



5:46 pm on Nov 13, 2003 (gmt 0)

10+ Year Member

I was wondering if anyone here knows of any issues with z-indexing and how to correct them. I have noticed in IE 6 that my images, text, and linked images are not selectable while using z-index. I am even unable to right click or drag-select objects that use z-index. In IE 5.0 the z-index items are selectable and the linked images work. My guess is that IE 6 is following the CSS2 model and that I need to change my code somehow.



3:38 pm on Nov 14, 2003 (gmt 0)

10+ Year Member

I failed to mention that in IE 6 SP1 the img alts aren't working either, but they do in 5.0 SP 4.



4:01 pm on Nov 14, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

It's hard to say but z-index may be the cure!

if your links / images are not clickable/selectable that ususally means they are "hidden" below another div/element i.e. they have a lower z-index than than you want them to have...

You need to find that element (it will be probably be after the links/images in the HTML code) its stacking order may be naturally higher than the elements you have given the z-index to.

Tip: color the backgrounds on all your elements (different colors so you can tell them apart) then you should find the one that is "on top" of your links

report back with a summarized version of your code if you narrow it down or cannot find it;)



9:50 pm on Nov 15, 2003 (gmt 0)

10+ Year Member

Well I found the problem. When I tested the page in Opera and Mozilla my problems in IE seemed nominal. Opera had everything inside that div all over and Mozilla displayed nothing at all. So I knew I had done something more that z-index incorrectly.

The fix was simple and quick. I change a <p> set that was nested in a <div> to a <div> set and now my alts and links work in IE... and Opera and Mozilla display 99% the same as IE.

One thing I noticed was that my body margins and padding were different in Mozilla and Opera. I had to add padding:0px; and margin:0px; to my body tag and then the desired look took shape. Is this always necessary and which Browser emulates the CSS model best?

I have tested in IE 5-6 and Opera 7.22 and Mozilla 1.5. So far IE 6.0 and Opera look the best with Mozilla trailing slightly and IE 5.0 looking by far the worst. My page has 0 tables and uses absolute and relative positioning with a few right floats.


Featured Threads

Hot Threads This Week

Hot Threads This Month