Welcher IE7 Bug liegt hier vor?

[stenz]

Hallo,
meine Seite DiziVille Hoşgeldiniz
wird unter IE7 nicht korrekt angezeigt.
Die Divs verschieben sich alle nach rechts siehe Foto.
http://img269.imageshack.us/img269/4233/testfw.jpg

Poste jetzt noch den Code der in diesem Bereich ist, das ihr euch nicht so viel einarbeiten müsst.

<div class="video">
                                 <div class="neu1">
         <a href="#">
                 <img src="image/dizi/ezel.jpg" alt="Ezel İzle" />
         </a>
         <p>
                 <a href="#">Ezel İzle 19.B&ouml;l&uuml;m</a>
         </p>
         <div class="p2">
                 <p>&nbsp; Eklenen tarihi: 22.02.2010</p>
         </div>
                 <div class="links">
                         <a href="#">
                                 <img src="image/logo_youtube.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links2">
                         <a href="#">
                                 <img src="image/logo_nosevenload.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links3">
                         <a href="#">
                                 <img src="image/tekparca.png" alt="Ezel İzle" />
                         </a>
                 </div>
</div>
<div class="neu2">
         <a href="#">
                 <img src="image/dizi/ezel.jpg" alt="Ezel İzle" />
         </a>
         <p>
                 <a href="#">Ezel İzle 19.B&ouml;l&uuml;m</a>
         </p>
         <div class="p2">
                 <p>&nbsp; Eklenen tarihi: 22.02.2010</p>
         </div>
                 <div class="links">
                         <a href="#">
                                 <img src="image/logo_youtube.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links2">
                         <a href="#">
                                 <img src="image/logo_nosevenload.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links3">
                         <a href="#">
                                 <img src="image/tekparca.png" alt="Ezel İzle" />
                         </a>
                 </div>
</div>
<div class="neu3">
         <a href="#">
                 <img src="image/dizi/ezel.jpg" alt="Ezel İzle" />
         </a>
         <p>
                 <a href="#">Ezel İzle 19.B&ouml;l&uuml;m</a>
         </p>
         <div class="p2">
                 <p>&nbsp; Eklenen tarihi: 22.02.2010</p>
         </div>
                 <div class="links">
                         <a href="#">
                                 <img src="image/logo_youtube.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links2">
                         <a href="#">
                                 <img src="image/logo_nosevenload.png" alt="Ezel İzle" />
                         </a>
                 </div>
                 <div class="links3">
                         <a href="#">
                                 <img src="image/tekparca.png" alt="Ezel İzle" />
                         </a>
                 </div>
</div>
// GEHT NOCH BIS NEU 8
</div>

Der CSS Code

.video{
height:                  420px;
width:                   718px;
margin:                  0 0 0 40px;
background-image:        url(../image/video_bg.png);
border-left:             1px solid #000;
border-right:            1px solid #000;
border-bottom:           1px solid #000;
border-top:              1px solid #000;
position:                static;
color:                   #222;}

         .video img{
         border:                 0;
         margin:                 2.5px 0 0 2px;
         position:               fixed;}

         .links{
         margin:                 10px 0 0 120px;}

         .links2{
         margin:                 10px 0 0 200px;}

         .links3{
         margin:                 19px 0 0 260px;}

         .video p{
         margin:                 2.5px 0 0 105px;
         padding:                0;}

         .p2{
         font-size:              11px;}

         .video A:link{
         color:                  #000;
         text-decoration:        none;}

         .video A:visited{
         color:                  #000;
         text-decoration:        none;}

         .video A:hover{
         color:                  #000;
         text-decoration:        underline;}

.neu1{
height:                  100px;
width:                   355px;
background-image:        url(../image/video2_bg.png);
margin:                  4px 0 0 2px;
position:                absolute;}

         .neu1 img{
         position:               absolute;}

.neu2{
height:                  100px;
width:                   355px;
background-image:        url(../image/video2_bg.png);
margin:                  4px 0 0 361px;}

         .neu2 img{
         position:               absolute;}

.neu3{
height:                  100px;
width:                   355px;
background-image:        url(../image/video2_bg.png);
margin:                  4px 0 0 2px;
position:                absolute;}

         .neu3 img{
         position:               absolute;}

.neu4{
height:                  100px;
width:                   355px;
background-image:        url(../image/video2_bg.png);
margin:                  4px 0 0 361px;}

         .neu4 img{
         position:               absolute;}

// wiederholt sich ebenfalls bis .neu8

Habe noch die Bereiche mit Firebug gekennzeichnet,
.video bereich http://img63.imageshack.us/img63/6822/videon.jpg
.neu1 bereich Imageshack - neu1h.jpg
.neu2 bereich http://img706.imageshack.us/img706/2150/neu2p.jpg
gruß stenz

 

[neuroleptika]

Der IE<8 hat Schwierigkeiten mit der absoluten positionierung wenn keine Angaben zu left und top (oder auch right und bottom) gesetzt wurden. Ein klassischer Bug ist das nicht.
Das Elternelement bräuchte position: relative; und jedes Element in diesem containing block müßte einzeln positioniert werden.

Einfacher wäre es hier mit float zu arbeiten.

P.S.
Deinem html fehlt es an Semantik.
Lies dir das mal an: Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

 

[stenz]

Hab das jetzt einfach mit einer Tabelle gelöst. :) Frag mich selber weshalb ich das so umständlich gemacht hab. :) Manchmal ist das einfachere einfach das Bessere.
Gruß Stenz