✔ Unterschiedliche Darstellung IE5.5/6/7 vs. FF3/IE8

cocoon

cocoon

Erfahrenes Mitglied
Für ein Blog-Design sollen die Autoren-Bilder in der Sidebar angezeigt werden. Dabei sollen die Bilder als quadratische Kästchen angezeigt werden. Da die (technisch eher nicht versierten) Autoren ihre Bilder aber tendenziell im gängigen Format 10x15 o.ä. hochladen, muss ich das Autoren-Bild mittels CSS beschneiden:

HTML: 
<div class="sidebarItem clearfix">			
   <div class="sidebarItem_avatarAuthor">
      <div class="clipping">
         <a href="authorLink">
            <img src="authorImg" />
         </a>
      </div>
   </div>
   <div class="sidebarItem_desc">					
      Max Mustermann is writing for this blog since 1999.
   </div>
</div>

Code: 
.clipping {
  position: relative;
  top: 5px;
  left: 5px;
  width: 85px;
  height: 85px;
  clip: rect(0px, 85px, 85px, 0px);
  overflow: hidden; 
}

Wie im Bild zu erkennen, stellen es IE5.5, 6 und 7 falsch dar. Auf IE5.5 kann ich verzichten; die Versionen 6 und 7 möchte ich aber mit abdecken. Getestet habe ich mit IETester.

Weiss jemand, wo der Fehler liegt?
 

Anhänge

  • ie-vs-ff.JPG
    ie-vs-ff.JPG
    21,6 KB · Aufrufe: 23
Hi,

steht das Ganze irgendwo online zur Verfügung?

Aus dem CSS-Schnipsel ist die Ursache so nicht ersichtlich.

mfg Maik
 
Leider nein, nur bei mir auf localhost. Kann es sein, dass besagte Browser die Größen anders interpretieren? Es sieht ja so aus, als ob in IE5.5/6/7 einfach nur nicht korrekt um 5px nach rechts verschoben wurde, sondern mehr.
 
In welchem Darstellungsmodus laufen denn die Browser? Sprich, welchen Dokumenttyp hast du für die Seite deklariert?

Und wie lauten die CSS-Regeln der angrenzenden / umschliessenden DIVs?

mfg Maik
 
Doctype ist <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Und das sind die umschließenden DIVs:

HTML: 
<body>
<div id="container">
   <div id="sidebar">
      ...
      <div class="sidebarItem clearfix">
         <div class="sidebarItem_avatarAuthor">
            <div class="clipping">
               <a href="http://localhost/wordpress/author/hl">
                  <img .../>
               </a>
            </div>
         </div>
         <div class="sidebarItem_desc">
            Description
         </div>
      </div>
      ...
   </div>
   <div id="content">...</div>
</div>
</body>

Code: 
#container {
position: relative;
width: 990px;
margin: 0 auto;
}

#sidebar {
position: absolute;
left: 0;
width: 320px;
}

#content {
position: absolute;
left: 340px;
width: 650px;
}

.sidebarItem{
display:block;
margin-bottom:20px;
}

.sidebarItem_avatarAuthor {
width:95px;
height:95px;
float: left;
background: url(img/avatar_blank.gif) no-repeat top left;
text-align: center;
vertical-align: middle;
}

.clipping {
position: relative;
top: 5px;
left: 5px;
width: 85px;
height: 85px;
overflow: hidden; 
}
 
Mach es mal so:
CSS: 
.clipping {
position: relative;
top: 5px;
margin: 0 auto;
width: 85px;
height: 85px;
overflow: hidden;
}

mfg Maik
 
Klasse, dem IETester nach zu urteilen sieht es jetzt in allen Versionen einwandfrei aus! :-) Dank Dir vielmals!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück