img + float + mozilla

[Wurzel]

es ist mal wieder soweit, ein browser treibt mich in den wahnsinn.

darum gehts:

.box {  
	margin: 10px;
}
.topblock_h {
	height:6px;
	padding:0;
	background-image: url(images/b_h_o.gif);
}
.middleblock_h {
	padding: 0 6px 0 6px;
	border-right: 1px solid #FF8400;
	border-left: 1px solid #FF8400;
	background-color: #FFCD8B;
	height:100%;
}
.bottomblock_h {
	height:6px;
	background-image: url(images/b_h_u.gif);
}

.middleblock_h img {
	float:left;
	margin-right:5px;
}

die divs dazu:

<div class="box">
  	<div class="topblock_h">
                       <img src="images/e_h_lo.gif" width="6" height="6" style="float:left;" alt="">
                       <img src="images/e_h_ro.gif" width="6" height="6" style="float:right;" alt="">
                </div>

	<div class="middleblock_h"><img src="images/dummy.gif" width="65" height="79" alt="">
		df jsdhjkfhjdfkkkkkkkkkk kkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkk kkkkkkkkkk hksjdf 
    		hkjsdhf kjdshf ksdhf jkdshf jdhsjf ds hkjfdfhdsjkf hkjdshf jsdhfjk sdhkjhds 
    		ksdkjfh sdkjh
		<div style="clear:left;"></div>
	</div>

	<div class="bottomblock_h">
                      <img src="images/e_h_lu.gif" width="6" height="6" style="float:left;" alt="">
                      <img src="images/e_h_ru.gif" width="6" height="6" style="float:right;" alt="">
                </div>
</div>

live zu bewundern hier

hat jemand eine idee, warum ie6 & opera7 die seite korrekt (=wie erwartet) anzeigen, die gecko-browser jedoch den mittleren container in der höhe nicht auffüllen (hintergrundfarbe & border)? html & css sind valide - und ich bin ratlos.

ps: getestet unter winXP

[wahsaga]

Re: img + float + mozilla

Wurzelchen kocht div-suppe ... also mindestens der middleblock_h möchte auf jeden fall vom <div> zum <p> mutieren!

hat jemand eine idee, warum ie6 & opera7 die seite korrekt (=wie erwartet) anzeigen, die gecko-browser jedoch den mittleren container in der höhe nicht auffüllen (hintergrundfarbe & border)?

firefox interpretiert dein clearendes element nicht, weil es leer ist - sobald du da auch nur ein &amp;nbsp; hineinsetzt, "funzt" es. was dann aber natürlich auch die höhe verändert, so das unter dem bild mehr platz ist - da müsstest du also noch height:0px; und overflow:hidden (letzteres wiederum für den IE) setzen.

[Wurzel]

Re: Re: img + float + mozilla

Original geschrieben von wahsaga
Wurzelchen kocht div-suppe ... also mindestens der middleblock_h möchte auf jeden fall vom <div> zum <p> mutieren!

ne, will er nicht, da er mir sonst den rest zersemmelt aufgrund der margins, zumindest in meiner vorschau.

firefox interpretiert dein clearendes element nicht, weil es leer ist

damit kann ich was anfangen, thx.

@div-suppe
wenn du eine bessere idee hast, runde ecken mit andersfabiger border zu erzeugen, bin ich ganz ohr. ausser tabellen ist mir nichts gescheiteres eingefallen/untergekommen.

[wahsaga]

Re: Re: Re: img + float + mozilla

Original geschrieben von Wurzel
ne, will er nicht,

doch, will er.

vor dem stylen eines dokumentes mit CSS hat zuallererst mal immer die sinnvolle auszeichnung des inhaltes in HTML zu kommen.
und die ist für deinen text nun mal ein textabsatz, und kein aussageloses div.

da er mir sonst den rest zersemmelt aufgrund der margins

dann setze margin doch einfach auf null für diesen textabsatz.

@div-suppe
wenn du eine bessere idee hast, runde ecken mit andersfabiger border zu erzeugen, bin ich ganz ohr.

dass du für so eine konstruktion zusätzliche elemente brauchen wirst, die nicht direkt der auszeichnung des inhaltes dienen, will ich nicht betreiten.
das ändert aber absolut null daran, dass dein text auf alle fälle in einem <p> stecken möchte.

EDIT:

---

gut, ich gebe zu, einen kleine "falle" steckt noch drin, die ich gerade auch nicht bedacht hatte: <p> darf dann kein clearendes <div> mehr enthalten.
also dieses div durch span ersetzen, und diesen wiederum zusätzlich mit display:block formatieren, da sonst das clearen nicht funktioniert ...

---

[Wurzel]

Re: Re: Re: Re: img + float + mozilla

Original geschrieben von wahsaga
das ändert aber absolut null daran, dass dein text auf alle fälle in einem <p> stecken möchte.

elender purist ... die margins auf 0 zu setzen ist schon klar, zwingt mich in der weiterverarbeitung allerdings zu etwas mehr aufwand, da innerhalb des blocks mehrere absätze auftreten können. dass das semantisch nicht ganz korrekt ist, ist mir schon klar. aber das leben ist eine ansammlung von kompromissen. mal sehen, wie ich das löse.
erstmal danke.

EDIT:

---

hab grad noch dein edit gelesen. stimmt, das div kam dann als nächstes. so gehts jetzt auch.

eines tages musst du mir mal deine css-enzyklopädie zeigen ... und jetzt komm mir nicht mit selfhtml

---

[wahsaga]

Re: Re: Re: Re: Re: img + float + mozilla

Original geschrieben von Wurzel
eines tages musst du mir mal deine css-enzyklopädie zeigen ...

meine was ...?

die existiert allerhöchstens mental - und sezieren lasse ich mich (noch) nicht ...