Tue, 2003-12-02 21:53
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>
Tue, 2003-12-02 23:27
#1
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
Wed, 2003-12-03 00:52
#2
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..
Wed, 2003-12-03 09:55
#3
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
Wed, 2003-12-03 13:59
#4
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.
Wed, 2003-12-03 15:24
#5
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.
Fri, 2003-12-05 06:01
#6
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
Fri, 2003-12-05 06:23
#7
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
Fri, 2003-12-05 06:25
#8
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.