troubleshooting Question

CSS Fix for IE7 wanted

Avatar of ahthis
ahthis asked on
Web BrowsersAdobe DreamweaverCSS
2 Comments1 Solution314 ViewsLast Modified:
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>
Safari.png
IE7.png
ASKER CERTIFIED SOLUTION
Jeffrey Dake
Senior Director of Technology

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros