Autor Zpráva
Mufna
Profil
Zdravím Vás. Mám problém s cleanerem (kupodivu jen v FF) - IE je v pohodě. Mám konstrukci používající PHP:
$i=0;
   echo "\n".'<!-- Block Start -->'."\n";
   echo '<div class="floatImages">'."\n";
   echo '<div class="floatImages_in">'."\n";
   while ($row=mysql_fetch_array($res)) {
     $i++;
     show_items($row);
     if ($i != $num_rows) {
        if ($i%3==0) {
         echo '</div>'."\n";
         echo '<div class="cleaner"><hr /></div>'."\n";
         echo '</div>'."\n"; tady jsem zkoušel různě prohazovat ukončovací divy a clerovací div, ale nic nepomohlo
         echo '<!-- Block End -->'."\n";
         echo "\n".'<!-- Block Start -->'."\n";
         echo '<div class="floatImages">'."\n";
         echo '<div class="floatImages_in">'."\n";
    }
  }
}
echo '</div>'."\n";
echo '<div class="cleaner"><hr /></div>'."\n";
echo '</div>'."\n";tady jsem to taky zkoušel prohazovat

echo '<!-- Block End -->'."\n";


funkce show_items() se nachází v requirovaném souboru a část související s CSS vypadá takto:
function show_items() {
 echo '<div>';
 echo '<p><b>'.$row["submitter"].'</b></p>';
 if (strlen($row["submitter_desc"])!=0) {
      echo '<p>'.$row["submitter_desc"].'</p>';
 }
 foreach ($images as $image) {
      if ($image!="" && file_exists($script_thumbs_dir.$image.'.jpg'))
	  echo '<p>'.wrt_img($script_thumbs_dir.$image.'.jpg').'</p>';
 }
  echo '<p>'.$row["description"].'</p>';
  echo '</div>'."\n";
}


No a CSS načítané do hlavičky každé stránky vypadá takhle:
div.floatImages {
	/* clear:both; */   zkoušel jsem to, nepomáhá
	width:650px;
	margin-top:2px;
	border-top:1px solid #53254f;}

div.floatImages_in {
	/* clear:both; */    zkoušel jsem to, nepomáhá
	margin:10px 0 10px 0; tady je zakopaný pes, dolní margin v FF nejde, je jakoby 0
	min-height:50px;kromě toho taky se nenatáhne bckgr, když je div delší, to taky nechápu
	_height:50px;
	background: url(../images/bg_dot_floatimgs.gif) 0 0 repeat-y;}

div.floatImages_in div {
	float:left;
	width:216px;}


Můžete se na to prosím někdo podívat. Už fakt nevím, kde je nějaká chyba. Myslím, že to souvisí s clearováním, ale vyzkoušel jsem snad už všechny možnosti a pořád nic.
SwimX
Profil
když odstraním phpko zbyde mi cca todle:
div.floatImages {
    width:650px;
    margin-top:2px;
    border-top:1px solid #53254f;}

div.floatImages_in {
    margin:10px 0 10px 0; 
    _height:50px;
    background: url(../images/bg_dot_floatimgs.gif) 0 0 repeat-y;}

div.floatImages_in div {
    float:left;
    width:216px;}

<div class="floatImages">
  <div class="floatImages_in"></div>
   <div class="cleaner"><hr /></div>
</div>


čeho chceeš přesně docílit? byla by ukázka?

třeba div.floatImages_in div todle ničemu nenáleží. Nikde neni div uvnitř divu div.floatImages_in
Mufna
Profil
SwimX
Nikde neni div uvnitř divu div.floatImages_in
Je, v té funkci
function show_items() {
echo '<div>';
   echo '<p><b>'.$row["submitter"].'</b></p>';
   if (strlen($row["submitter_desc"])!=0) {
      echo '<p>'.$row["submitter_desc"].'</p>';
   }
   foreach ($images as $image) {
      if ($image!="" && file_exists($script_thumbs_dir.$image.'.jpg'))
	  echo '<p>'.wrt_img($script_thumbs_dir.$image.'.jpg').'</p>';
   }
    echo '<p>'.$row["description"].'</p>';
echo '</div>'."\n";
}


No, teď jsem si něco vyzkoušel, a vypadá to, že ten margin tam je. Takže možná je to spíš tak, že IE ho dělá větší, takže to budu muset ošetřit pro IE.

Ale pořád mi zůstává problém, a to ten, že se nenatáhne background na celou výšku divu (pouze v FF), pokud mu nastavím min-height, tak je dlouhý jen dle této hodnoty.
div.floatImages_in {
    margin:10px 0 10px 0;
    min-height:50px;
    _height:50px;
    background: url(../images/bg_dot_floatimgs.gif) 0 0 repeat-y;}
SwimX
Profil
Mufna
Je, v té funkci
tak to omluva, nevšim sem si..

Takže máš x divů float" left
a pod nimy div obsahující hr. Nevidím žádné css pro .cleaner.
Zkus zrušit div a nechat jenom <hr style="clear: both;">
a přečíst si: http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
Mufna
Profil
SwimX
Nevidím žádné css pro .cleaner.
.cleaner {	clear:both;
	height: 0;
	content: ' ';
	overflow:hidden;}

.cleaner hr, .nodisplay {
	display:none;}

<hr style="clear: both;">
Uvidíme, zkusím
Mufna
Profil
No, myslím, že to mám přesně tak, jak uvádí Pixy:
<div id="vnejsi-blok-s-pozadim-a-rameckem">
   <div id="sloupec1-float-left">...</div>
   <div id="sloupec2-float-right">...</div>
   <hr class="cistic">
</div>

Když vynechám div.floatImages (který v tomto případě nic neřeší - nekazí), tak mám:
<div class="floatImages_in"></div>
   <div>prvni float blok</div>
   <div>druhy float blok</div>
   <div>treti float blok</div>
   <div class="cleaner"><hr /></div>
</div>

Když vynechám (ve smyslu neřeším teď) ten nešťastný cleaner, tak se mi stejně nezobrazuje background na plnou výšku rodičovského divu - resp. zobrazuje, ale jenom v IE. Tohle fakt nechápu.
Plaváček
Profil
Mufna

Zkus nadřazenému bloku (tedy tomu, kde máš všechny plovoucí prvky) nastavit vlastnost overflow:hidden. Čili tohle by mohlo zabrat:

.floatImages_in {overflow:hidden}


Taky pomůže, když bloku .cleaner nebudeš nastavovat display:none, protože v tom případě vlastně v dokumentu neexistuje a nemůže plnit svou funkci. Lepší by asi bylo visibility:hidden.
Mufna
Profil
Plaváček
pomůže, když bloku .cleaner nebudeš nastavovat display:none
To není nastavený bloku, ale jen elementu hr. Funguje mi to dobře (v jiném kódu na ostatních stránkách webu nemám s cleanerem žádné problémy), jen v týhle konstrukci mi to:

1) dělá asi větší spodní margin v IE
2) nenatahuje se v FF background
Mufna
Profil
Plaváček
tohle by mohlo zabrat: .floatImages_in {overflow:hidden}
Vypadá to, že jo. Díky.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: