Please help with CSS in internet explorer

Started by Radiant, Thu 09/06/2011 05:08:42

Previous topic - Next topic
Print
# Go Down Pages1
User actions

Radiant

Thu 09/06/2011 05:08:42
I'm having a problem getting a particular CSS trick to work properly in internet explorer; it works fine in Firefox and other browsers. I would appreciate assistence with this, I'm really not sure what is up here.

If you copy the below to a HTML file and open it, then it should show three screenshots; hovering over a screenshot will overlay a larger version of the same. Except in IE, where the larger image is placed below the screenshot to the right, instead of above it. Can someone tell me what I'm doing wrong? Thanks!

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#screens img {
    padding:0 6 6 0;
    width:160;
    height:100;
	border:0;
}
#shot {
    position:relative;
    text-decoration:none;
    float:left;
    padding:0 10 15 0;
}
#shot span {
    display:none;
}
#shot:hover span {
    display:block;
    position:absolute;
    top:-5;
    left:-85;
    width:330;
    background:#000;
    color:#fff;
    text-align:center;
    font-style:italic;
    padding:5 0 5 0;
	z-index:100;
}
#shot span img {
    width:320;
    height:200;
    padding:5;
}
#shot:hover span div {
    padding:5 0 0 0;
    text-align:center;
}
</style>
</head>
<body>
                <div id="screens">
                    <a href="#" id="shot">
                        <img src="http://crystalshard.net/img/meta.png" name="pic">
                        <span><img src="http://crystalshard.net/img/meta.png" name="pz1"><div id="tx1">Caption</div></span>
                    </a>
                    <div id="extra">
                        <a href="#" id="shot">
                            <img src="http://crystalshard.net/img/meta.png" name="pc2">
                            <span><img src="http://crystalshard.net/img/meta.png" name="pz2"><div id="tx2">Text</div></span>
                        </a>
                        <a href="#" id="shot">
                            <img src="http://crystalshard.net/img/meta.png" name="pc3">
                            <span><img src="http://crystalshard.net/img/meta.png" name="pz3"><div id="tx3">More info</div></span>
                        </a>
                    </div>
                </div>
</body>
</html>

Khris

#1
Thu 09/06/2011 12:50:17
Tested this with IE8 and it looks the same as in Firefox 3.6.17, the larger image is above the thumbnail.

Radiant

#2
Thu 09/06/2011 23:12:00
I'm glad to hear that, but it does break in IE6 and IE7, and I was hoping that somebody could suggest a fix.

Peder 🚀

#3
Fri 10/06/2011 00:40:23
I tried to solve this issue but without any luck. It just made me really frustrated :-\.
Also, I got IE9 but it was still "broke"...

TomatoesInTheHead

#4
Fri 10/06/2011 09:46:35
Breaks for me too, using IE 8 (8.0.6001.18702)

Maybe try adding a z-index for the a-element in hover state, not or not only for its child element:
Code: ags
#shot:hover {
    z-index:100;
}

Adding this before "#shot:hover span" solved the issue for me.

Peder 🚀

#5
Fri 10/06/2011 12:04:08
You must have alot more than just TomatosInTheHead because that seems to be the solution Radiant needs!
Fixes the issue in IE9 too :).

Radiant

#6
Fri 10/06/2011 13:45:42
Quote from: TomatosInTheHead on Fri 10/06/2011 09:46:35
Maybe try adding a z-index for the a-element in hover state, not or not only for its child element:

That did the trick. Thanks!
Print
Go Up Pages1
User actions
SMF spam blocked by CleanTalk