CSS error in ie6 & ie 7 not ie 8

Hello.

I followed a CSS example I found online to have a text hyperlink, flash a pop-up image on hover / mouse over.

I was testing in IeTester v0.4.7 and IE6 & IE7 do not position the

<div id="tdpng"> Shoulder Strap:<div id="rollover"><a href="#" > (what's this?)<span><img src="images/shoulder-straps.jpg" alt=" " /><br />S-Curve on Left and J-Curve on Right</span></a></div> </div>

anything close to what

rollover.css

seem to communicate to Chrome, FF, Ie8, etc.

Thoughts?

live example – > link
> then tab “order”
> then its the Shoulder Strap “(what’s this)”

Thank you
Casey

Yes… I have a doc type

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

IE6 & IE7 do not position the rollover anything close to other browsers.
Hi,
IE6/7 need a width set on the AP’d span. You also had your #rollover div floated right with anonymous text ( “Shoulder Strap” ) before the float. IE6/7 always need floats to be first in the source order, I would wrap the anonymous text in a heading and set up a proper heading order with the rest of the page.

You might be able to call your “Order” heading an h2 and call the “Shoulder Strap:” an h3. Then you can float that h3 to the left while you float your #rollover div to the right.

Something like this gets it working in all browsers for me -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rollover Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
}
#tdpng {
display:inline-block;/*contain floats in test case*/
width:400px;
background-image:url("http://www.ula-equipment.com/images/tdbg.png");
border:1px dotted #666666;
margin:200px 10px 10px;
padding:10px;
font-size:12px;
line-height:1.3;
/*font-weight:bold;
text-transform:uppercase; .........>>>> Moved to h3 */
}
#tdpng h3 {
float:left;
margin:0;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
#rollover {
float:right;
padding:0 175px 0 0;
}
#rollover a {
float:left;
position:relative;
color:#1A1A1A;
text-decoration:none;
}
#rollover a:hover {zoom:1}/*IE6 hover fix*/

#rollover a b {
font-weight:normal;
text-decoration:underline;
color:#1A1A1A;
}
#rollover a span {
position:absolute;
width:202px;/*IE6/7 need a width (width of image and 1px borders)*/
top:-140px;
left:100px;
margin-left:-999em;/*hide off screen with neg margin*/
padding:5px;
text-align:center;
background:#FFF;
border:3px solid #999;
color:#666;
}

#rollover a:hover span,
#rollover a:active span,
#rollover a:focus span {
margin-left:0;
}
#rollover a span img {
float:left;
border:1px solid;
margin-bottom:5px;
}

</style>

</head>
<body>

<div id="tdpng">
    <h3>Shoulder Strap:</h3>
    <div id="rollover">
        <a href="#"><b>(what's this?)</b>
            <span>
                <img src="http://www.ula-equipment.com/images/shoulder-straps.jpg" alt="">
                S-Curve on Left and J-Curve on Right
            </span>
        </a>
    </div>
</div>


</body>
</html>

@Rayzur [2010 CSS guru — for sure!]

THANKS so much…

I’ll take some time to chew on what you’ve generously offered and make changes a soon as I’m confident I’ll not mess up the rest of CSS…

PS … I couldn’t figure it out… but does sitepoint have norms that I mark “answered”

does sitepoint have norms that I mark “answered”

No, we don’t mark the threads as “answered”. It will just fade off the front page if you don’t need anymore help. If another problem comes up related to this thread topic just reply again and it will bump to the top of the front page.

I’ll take some time to chew on what you’ve generously offered and make changes a soon as I’m confident I’ll not mess up the rest of CSS…

Yes, that is one of the reasons I set up an isolated test page. You will also notice that I placed your (what’s this?) text in a <b> element. I did that so you could target it with text-decoration:underline; rather than the anchor. The span’s reset of text-decoration:none; was not working when underline was set on the anchor.