8 replies [Last post]
ciroknight
Offline
newbie
Berea, KY
Last seen: 15 years 33 weeks ago
Berea, KY
Joined: 2003-12-02
Posts: 3
Points: 0

I don't know if this has been documented somewhere or if I'm beating a dead horse, but apparently Internet Explorer 6.0 can't render the attached code correctly.

Anyone know a hack or a fix to get around this? Thanks!

<style>
tr#linkage td a span {
display: none;
}

tr#linkage td a:hover span {
   display: block;
   position: absolute; 
   top: 0px; 
   left: 550px; 
   width: 125px;
   z-index: 100;
   color: #AAA; 
   background: black;
   text-align: center;
}
</style>
<br>
<br>
<br>
<br>
<br>
*target area for box to appear in!!!*
<table>
  <tr id="linkage">
    <td><a href="linka.html">Link Text<span>link additional info</span></a></td>
    <td><a href="linkb.html">Link Text<span>link additional info</span></a></td>
    <td><a href="linkc.html">Link Text<span>link additional info</span></a></td>
 </tr>
</table>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 36 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Internet Explorer z-indexing error...

Without going all the way into the code I quickly removed all the tables and all the CSS relating to the tables and it did not work. Haven't got the time right now to look at why - but have a look at this thread where it works without the tables

http://www.csscreator.com/css-node/756

Day

The only way to learn is to do it yourself

ciroknight
Offline
newbie
Berea, KY
Last seen: 15 years 33 weeks ago
Berea, KY
Joined: 2003-12-02
Posts: 3
Points: 0

Internet Explorer z-indexing error...

Thanks, but that's really not too much of a help... it works perfectly on Firebird and Gecko-based browsers, but I'm designing a web site for the School District I work for, and they are bound pretty tightly to Microsoft...

I'm pretty close to just throwing in the towel and not worrying about the extra navigational aid..

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Internet Explorer z-indexing error...

Hi ciroknight,
This is basically taken straight from Eric Meyers page http://www.meyerweb.com/eric/css/edge/popups/demo.html I haven't tried to position the popup or style it in any way, you can do that.

#linkage td a {display: block; text-align: center; font: bold 1em sans-serif;  
   padding: 5px 10px; margin: 0 0 1px; border-width: 0;  
   text-decoration: none; color: #FFC; background: #444; 
   border-right: 5px solid #505050;} 
#linkage td a:hover { 
   border-right: 5px double white;} 
 
#linkage td a span {display: none;} 
#linkage td a:hover span {display: block; 
   position: absolute; top: 180px; left: 0; width: 125px; 
   padding: 5px; margin: 10px; z-index: 100; 
   color: #AAA; background: black; 
   font: 10px Verdana, sans-serif; text-align: center;} 

This part "#linkage td a:hover {border-right: 5px double white;}" seems to be important for IE. I did see an article about it this same issue recently but seem to have lost the link.

Hope that helps

seb
Offline
Enthusiast
Last seen: 12 years 26 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Internet Explorer z-indexing error...

put in a separate rule, eg:

tr#linkage a:hover
{ color:#000000;}

doesn't really matter what you put in this rule, pretty much anything in a separate rule will cure the IE bug.

link: http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

PS for what it's worth when you write "tr#linkage td a:hover" the td is redundant.

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 15 years 51 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Just a thought

Sorry if this seems like a stupid question, I'm swamped and don't have time to look in depth at it, but did you try switching the initial rule to

tr#linkage td a:link span, tr#linkage td a:visited span { 
display: none; 
}

I seem to recall having instances where my hover styles didn't work if I had only declared styles for a and not the link pseudo-class.

ciroknight
Offline
newbie
Berea, KY
Last seen: 15 years 33 weeks ago
Berea, KY
Joined: 2003-12-02
Posts: 3
Points: 0

Internet Explorer z-indexing error...

None of these attempted solutions has worked. I'm just about to give up on it.. I've already been avoiding it as long as I can, trying to develope the databases and other pages and taking my focus away. If I have to, I'll just use javascript and mouseovers.. Not worth the heartache anyways..

But if an all CSS solution for M$ IE, I'd like to exaust all resources... Thanks so much already, you've been a great help. And if you guys can get it, it'll save me a lot of head ache.. I've been playing around with "Visibility" and "Overflow".. and I think the problem in IE is that it treats a cell object as a layer mask; that everything inside of a table is basically it's own page with it's own positioning and everything, but instead of treating this as an ordinary CSS page layer, it treats it like a frameset without overflow. This is just my theory though.

Oh well, if you guys can keep at it, I'd love it. If not, don't worry yourselves over it. Thanks so much already.

Andrew

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 36 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Internet Explorer z-indexing error...

Daybreak_0 wrote:
Without going all the way into the code I quickly removed all the tables and all the CSS relating to the tables and it did not work. Haven't got the time right now to look at why - but have a look at this thread where it works without the tables

http://www.csscreator.com/css-node/756

Day

It already works in IE. The problem is either the tables or your code.

Day

The only way to learn is to do it yourself

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Internet Explorer z-indexing error...

Hi ciroknight,
The solutions you have been given work in IE6 so something else must be interfering.
Can you post a link to an example page or at least attach one.