ugrás a tartalomhoz

CSS "fülecske" IE alatt

fchris82 · 2006. Dec. 21. (Cs), 21.37
Van a következő CSS:

    .ful {
      border: 1px solid black;
      background-color: gray;
      padding: 4px;
      margin: 0 10px;
      float: left;
    }
    
    .content {
      border: 1px solid blue;
      background-color: white;
      padding: 10px;
      margin: 0;
      clear: both;
    }
És ez a hozzá végtelenül leegyszerűsített HTML:

<body>
  <div class="ful">Fül 1.</div>
  <div class="ful">Fül 2.</div>
  <div class="content">Vmi szöveg</div>
</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:

<body>
  <div class="ful_csomag">
    <div class="ful">Fül 1.</div>
    <div class="ful">Fül 2.</div><div style="clear:both"></div></div>
  <div class="content">Vmi szöveg</div>
</body>
Ha a CSS ez volt:

    .ful_csomag {
      border: 1px solid black;
      background-color: red;
    }
    
    .ful {
      border: 1px solid black;
      background-color: gray;
      padding: 4px;
      margin: 0 10px;
      float: left;
    }
    
    .content {
      border: 1px solid blue;
      background-color: white;
      padding: 10px;
      margin: 0;
      clear: both;
    }
akkor jól jeleníti meg az IE is. Ellenben ha az elsőt átjavítom így:

    .ful_csomag {
      border-bottom: 1px solid black;
      background-color: red;
    }
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:

.ful_csomag {
  ...
  height: 1%;
}
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.