1 reply [Last post]
bgbs
Offline
Enthusiast
Last seen: 2 years 6 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

When I do compatibility check with IE7 everything the .boxes block that is set with position:relative completely disappears. I use absolute positioning inside .boxes block. If I remove position:relative then everything is ok, accept the position:absolute elements are no longer contained within the .boxes block.
What do you think the problem may be?

HERE IS CSS:

.boxes  {background:#fff; border: 1px solid #aaa;width:230px;margin-right:30px;float:left;list-style-type:none;min-height:430px;position:relative;}
.boxes img.play {position:absolute; top:10px; left:10px;z-index:10;}

HTML Structure:

<div class="boxes"><a href="#"><img class="play" src="images/play-but.png" width="76" height="78" alt="play button"></a>
              <h2><a href="#"><img src="images/scout-class-title.png" width="230" height="35" alt="Scout Classroom Edition"></a></h2>
            	<p>Some text goes here</p>
</div>

Any ideas how I can tune this to work with IE7? IE is fine.

bgbs
Offline
Enthusiast
Last seen: 2 years 6 weeks ago
Timezone: GMT-6
Joined: 2007-08-29
Posts: 102
Points: 52

Never mind I solved this

Never mind I solved this issue by adding relative issue to a higher parent block
Weird, but worked.