asked on

CSS Fix for IE7 wanted

The following code gives the wanted result for Safari and Firefox, but not for IE7 -see pictures. The center image cannot be a background image!
500pts for help that works!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<style>   
 
.stage{
        width:750px;
        margin:0px auto;
        text-align:center;
        overflow:hidden;
}
.holder{ clear:both; font-size:0px; float:left; width:100%; }
.t1{
        position:relative;
        border: 1px solid #FF0000;
        top: 20px;
}
.t2{
        float:left;
        margin:0px 0px 50px 100px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.t3{
        float:right;
        margin:0px 100px 50px 0px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.t4{
        float:left;
        margin:64px 0px 0px 10px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.t5{
        float:right;
        margin:65px 10px 0px 0px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.centerImg {
}
.t6{
        float:left;
        margin:40px 0px 0px 100px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.t7{
        float:right;
        margin:40px 100px 0px 0px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
.t8{
        position:relative;
        top:-60px;
        padding: 5px 0px 0px 5px;
        border: 1px solid #FF0000;
}
</style>
 
 
 <body>
<div class="stage">
      <div class="holder"><img src="../Pictures/Thumbs/Intro.jpg" alt="Intro" width="120" height="150" class="t1"  /></div>
      <div class="holder"><img src="../Pictures/Thumbs/JoelThumb.png" alt="Joel" width="120" height="80" class="t2" /><img src="../Pictures/Thumbs/KatieThumb.png" alt="Katie" width="120" height="80" class="t3" onmouseover="MM_swapImage('Hintimage','','../Pictures/StoryKatie.jpg',1)" onfocus="MM_swapImgRestore()" /></div>
      <div class="holder"><img src="../Pictures/DigStoryIntro.jpg" alt="Intro" name="Hintimage" width="300" height="240" class="centerImg" id="Hintimage" /><img src="../Pictures/Thumbs/MaikeThumb.png" alt="Maike" width="120" height="80" class="t4"  /><img src="../Pictures/Thumbs/PeterThumb.png" alt="Peter" width="120" height="80" class="t5"  /></div>
      <div class="holder"><img src="../Pictures/Thumbs/SusannaThumb.png" alt="Susanna" width="120" height="80" class="t6"  /><img src="../Pictures/Thumbs/WindowThumb.png" alt="Ron" width="120" height="80" class="t7"  /></div>
      <div class="holder"><img src="../Pictures/Thumbs/NancyThumb.png" alt="Nancy" width="100" height="125" class="t8"  /></div>
    </div>
 
</body>
</html>

Open in new window

Safari.png
IE7.png

ASKER CERTIFIED SOLUTION

Jeffrey Dake

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ahthis

ASKER

That works perfectly! Thanks a lot.