ugrás a tartalomhoz

CSS "fülecske" IE alatt

fchris82 · 2006. Dec. 21. (Cs), 21.37
Van a következő CSS:
  1. .ful {  
  2.   border: 1px solid black;  
  3.   background-color: gray;  
  4.   padding: 4px;  
  5.   margin: 0 10px;  
  6.   float: left;  
  7. }  
  8.   
  9. .content {  
  10.   border: 1px solid blue;  
  11.   background-color: white;  
  12.   padding: 10px;  
  13.   margin: 0;  
  14.   clear: both;  
  15. }  
És ez a hozzá végtelenül leegyszerűsített HTML:
  1. <body>  
  2.   <div class="ful">Fül 1.</div>  
  3.   <div class="ful">Fül 2.</div>  
  4.   <div class="content">Vmi szöveg</div>  
  5. </body>  
Ez Opera és FF alatt teljesen jó. Azt látom, amit szeretnék, a "fülek" és a tartalmi rész között nincs üres rész. DE az IE beszúr egy jó nagy helyet és az istennek nem tudom eltüntetni onnan. Ha törlöm a "float: left;" részt, akkor nincs is "luk" a 3 div között, még IE alatt sem. Próbáltam azt is, hogy hátha az üres karakterek miatt, és beraktam az egészet egyetlen sorba, a tag-ek közé sem rakva semmit, de ez sem segített :-/
‹ JavaScript nem tud számolni vagy én? :) Forrásban sem látszó szövegrész jelenik meg IE alatt ›
 ■
1

Margin problema

Poetro · 2006. Dec. 22. (P), 00.53
Az IE erzekeny a marginra, es hajlamos duplazni esetleg mas erdekes dolgokat produkalni vele, ahogy itt is. Probald meg lecserelni padding-ra.
2

érdekes

fchris82 · 2006. Dec. 22. (P), 10.03
Kicsit átalakítottam a kódot, így:
  1. <body>  
  2.   <div class="ful_csomag">  
  3.     <div class="ful">Fül 1.</div>  
  4.     <div class="ful">Fül 2.</div><div style="clear:both"></div></div>  
  5.   <div class="content">Vmi szöveg</div>  
  6. </body>  
Ha a CSS ez volt:
  1. .ful_csomag {  
  2.   border: 1px solid black;  
  3.   background-color: red;  
  4. }  
  5.   
  6. .ful {  
  7.   border: 1px solid black;  
  8.   background-color: gray;  
  9.   padding: 4px;  
  10.   margin: 0 10px;  
  11.   float: left;  
  12. }  
  13.   
  14. .content {  
  15.   border: 1px solid blue;  
  16.   background-color: white;  
  17.   padding: 10px;  
  18.   margin: 0;  
  19.   clear: both;  
  20. }  
akkor jól jeleníti meg az IE is. Ellenben ha az elsőt átjavítom így:
  1. .ful_csomag {  
  2.   border-bottom: 1px solid black;  
  3.   background-color: red;  
  4. }  
Akkor már megint rossz. Ha így, border-right, stb megadom úgy, hogy megint mindenhol 1px-es vonal legyen, megint jó lesz, de ha bárhol 0, akkor nem. Hogy ******************** >-(
3

Nem működik

fchris82 · 2006. Dec. 22. (P), 10.07
Kipróbáltam a padding:0, margin:0, már mindenhova ez van beírva, és továbbra sem jó :(
4

a "megoldás"

fchris82 · 2006. Dec. 22. (P), 10.12
Nos, ha beállítottam, hogy:
  1. .ful_csomag {  
  2.   ...  
  3.   height: 1%;  
  4. }  
akkor jó! Már ahogy. Mert FF tényleg 1%-nak veszi, IE és Opera beszinezi a teljes hátteret. Mondjuk nekem ez spec nem baj, mert a ful_csomagnak csak annyi a szerepe, hogy "egyben tartsa" a füles részt és IE alatt a tartalmi részhez tudjam rögzíteni.