hyaenidae: safari: eigenartiges float-verhalten

Beitrag lesen

SELF-Forum

safari: eigenartiges float-verhalten

hyaenidae
– Informationen zu den Bewertungsregeln

ich habe ein zweispaltiges, flexibles layout mit fixer spaltenbreite (zwecks besserer lesbarkeit) gebastelt, um elegant? 2 sprachen auf einer seite verwenden zu können. das ganze scheint auch fast problemlos in allen mir schnell zugänglichen browsern zu funktionieren.

Erfolgreich getestet unter:

Win XP: Opera9.01, Firefox1.5.0.6, IE5 bis IE7ReleaseCandidate1
Mac: Firefox1.5.0.6 Camino1.0 IE5.2

lediglich  Safari1.3.2 zeigt ein problem

Folgendes ist die situation:

2 gefloatete absätze mit fixer breite werden von einem gefloateten container div umschlossen. Alle von mir getesteten browser verhalten sich nun beim kleinerschieben des browserfensters gleich. das gefloatete div passt sich an die neue breite des nach unten springenden 2ten absatzes an. Zwar richtet sich die breite des divs auch in Safari nach den zwei nebeneinander stehenden absätzen, verhält sich aber beim zusammenschieben des fensters wie ein blockelement im normalen dokumentfluss mit fixem rechtem margin-wert,
anstatt sich in der breite an die übereinanderstehenden absätze anzupassen.
dies wäre an und für sich nicht schlimm, wäre da nicht eine trennlinie als hintergrund-bild des divs.

Hat vielleicht jemand eine idee, wie hier safari beibringen könnte nicht aus der reihe zu tanzen?

Beispiel unter http://2ter.com/sia/spaltenfloat.html

Oder kann mir jemand sagen wo im code sich der fehler versteckt hat?
Aber vielleicht sollte ich safari einfach seinen willen lassen und nach einem workaround suchen?

der code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  <head>  
    <title>"Sensationen im Alleingang"</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  <link rel="stylesheet" type="text/css" href="sia03.css" />  
  </head>  
  <body>  
  <div class="textblock">  
  
   <p class="pde">  
    Abc...  
   </p>  
   <p class="pen">  
    Abc...  
   </p>  
  <div class="clearer"></div>  
  </div>  
  <div class="clearer"></div>  
  <div class="textblock">  
   <p class="pde">  
    Abc...  
   </p>  
  
   <p class="pen">  
    Abc...  
   </p>  
  <div class="clearer"></div>  
  </div>  
  <div class="clearer"></div>  
  <div class="textblock">  
   <p class="pde">  
    Abc...  
   </p>  
  
   <p class="pen">  
    Abc...  
   </p>  
  <div class="clearer"></div>  
  </div>  
  <div class="clearer"></div>  
  </body>  
</html>  


  
body {  
 font-size: 62.5%;  
 color: #202020;  
 margin: 0;  
 padding: 0;  
 }  
  
.textblock {  
 margin:0;  
 padding:0 0 10em 0;  
 background-image: url(line.gif);  
 background-position: bottom center;  
 background-repeat: no-repeat;  
 background-color: Olive;  
 float: left;  
}  
  
p {  
 margin: 1em;  
 padding: 0;  
 font-size: 1.3em;  
 line-height: 1.9em;  
 width: 31em;  
 float: left;  
 background-color: green;  
}  
  
.pen {  
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
}  
  
.pde {  
 font-family: Georgia, "Times New Roman", Times, serif;  
 letter-spacing: 0.02em;  
 word-spacing: 0.13em;  
}  
  
.clearer {  
 clear: both;  
 height: 3em;  
 background-color: Fuchsia;  
 width: 1em;  
}

danke,
hyaenidae

Beitrag melden
–
Informationen zu den Bewertungsregeln