nicht angemeldet
Image überlappt Div-Bereiche
0 0 2 0 0 -1 2 0 0 0 0 0 0 0 IE (6) Bugs
0
Image überlappt Div-Bereiche
Ach du schande... nachdem ich jetzt was schnödes gebastelt habe passiert forgendes:
wenn im unten gezeigten Code ein Image eingebettet ist, überlappt es den Div-bereich indem es drin ist...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de-CH">
<head>
<style type="text/css">
.boxcontainer{
width:400px;
border:1px solid #03f;
border-color:#06c #039 #039 #06c;
background-color:#9cf;
}
.boxtitle{
margin:2px;
border:1px solid #06c;
border-color:#6cf #039 #039 #6cf;
background-color:#06c;
padding:0 2px;
color:#fff;
font-weight:bold;
}
.boxmain{
margin:2px;
border:1px solid #999;
border-color:#039 #fff #fff #039;
background-color:#eee;
padding:2px;
}
.boxfooter{
margin:2px;
padding:2px;
}
</style>
</head>
<body>
<div class="boxcontainer">
<div class="boxtitle">Der Titel</div>
<div class="boxmain">Hauptbox<br>
<img src="/images/test.gif" width="150" height="200" align="left">
Text...blabla
</div>
<div class="boxfooter">Der Footer</div>
</div>
</body>
</html>
eigentlich sollte der graue Bereich der Hauptbox bis zum ende der Grafik gehen und diese umschliessen... leider hört der graue Bereich aber schon nach dem Text auf und die Grafik überlagert die unteren Divs...
Any Ideas?!?
-
hi,
<img src="/images/test.gif" width="150" height="200" align="left">
du möchtest die CSS-eigenschaft float verwenden, statt align="left".
eigentlich sollte der graue Bereich der Hauptbox bis zum ende der Grafik gehen und diese umschliessen... leider hört der graue Bereich aber schon nach dem Text auf und die Grafik überlagert die unteren Divs...
du möchtest dich informieren, wie sich float auf den elementfluss auswirkt (*), und was man dagegen ggf. unternehmen kann.
(*) align in html scheint es ja ebenso zu tun, ist trotzdem hier unangebracht.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
...Auch bei "float:left; und ohne "align=left" bleibt das Problem.
Erst wenn ich "boxmain" die Eigenschaft "width:100%;" zuweise klappt's...aber ich darf der Box keine feste Grösse zuweisen...
-
hi,
...Auch bei "float:left; und ohne "align=left" bleibt das Problem.
natürlich.
deshalb sagte ich ja auch, dass du dich über die auswirkung dieser anweisung auf den elementfluss informieren möchtest, und was man bzgl. eines problems wie dem deinen dagegen tun kann.gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
...mit Tabellen gehts..
jetzt müsste mir nur einer erklären warum das in CSS nicht möglich ist!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
.boxcontainer{
width:400px;
border:1px solid #03f; border-color:#06c #039 #039 #06c;
background-color:#9cf;
padding:0; margin:0;
}
.boxheader{
display:block;
clear:both;
width:auto;
padding:0 2px; margin:2px;
border:1px solid #06c; border-color:#6cf #039 #039 #6cf;
background-color:#06c; color:#fff;
font-weight:bold;
}.boxmain{
display:block;
float:none;
clear:both;
padding:0 2px; margin:2px;
border:1px solid #999; border-color:#039 #fff #fff #039;
background-color:#eee;
}
.boxfooter{
display:block;
width:auto;
clear:both;border:1px solid #06c; border-color:#6cf #039 #039 #6cf;
background-color:#06c; color:#fff;
font-weight:bold;margin:2px; padding:2px;
}
.boxmain img{
height:100px; width:100px;
float:left; clear:left;
}
</style>
</head>
<body>
<table class="boxcontainer">
<tr><th class="boxheader">Der Titel</th></tr>
<tr><td class="boxmain">
Hauptbox<br />
<img src="/images/test.gif" />
Text...blabla
</td></tr>
<tr><td class="boxfooter">Der Footer</td></tr>
</table><div class="boxcontainer">
<div class="boxheader"><h4>Der Titel</h4></div>
<div class="boxmain">
Hauptbox<br />
<img src="/images/test.gif" />
Text...blabla
</div>
<div class="boxfooter">Der Footer</div>
</div>
</body>-
hi,
...mit Tabellen gehts..
jetzt müsste mir nur einer erklären warum das in CSS nicht möglich ist!ist es.
aber da du ja selber in https://forum.selfhtml.org/?t=101987&m=626965 gerade bekundet hast, dass du nicht gewillt bist, die eingehender damit zu beschäftigen, werde ich dir dazu jetzt sicher nicht noch weitere erklärungen spendieren.gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-
Hallo,
<img src="/images/test.gif" width="150" height="200" align="left">
eigentlich sollte der graue Bereich der Hauptbox bis zum ende der Grafik gehen und diese umschliessen... leider hört der graue Bereich aber schon nach dem Text auf und die Grafik überlagert die unteren Divs...
<img src="/images/test.gif">
und
img {width:150px;height:200px]
löst deim Problem.
cu,
ziegenmelker-
Hallo,
<img src="/images/test.gif">
und
img {width:150px;height:200px]
löst deim Problem.
Warum?
Frank
-
Hallo,
<img src="/images/test.gif">
und
img {width:150px;height:200px]
löst deim Problem.
Warum?
weil das Attibut "align=left" ähnliches verursacht, wie img {float:left}
siehe w3.org etwas weiter unten im Text.In seinem Post hat Solo das Image nach einem <br> eingebunden, und da es ein Inline-Element ist, ist es folglich sowieso am linken Rand plaziert und nachfolgender Text steht rechts davon. Allerdings nur solange Platz ist, nach einem Zeilenumbruch geht es unter dem Bild weiter.
Ich bin der Meinung, daß nur dann, wenn neben dem Bild mehrzeiliger Text stehen soll, auch der Einsatz von 'float' sinnvoll ist.
Ob man diesen ganzen div-Salat überhaut veranstalten sollte, ist natürlich eine ganz andere Frage, aber dazu haben ja Andere schon genug gesagt.
cu,
ziegenmelker
-
-
-
Das ist eine ganz schöne DIV Suppe.
<div class="boxcontainer">
Das ist ja noch ok, aber
<div class="boxtitle">Der Titel</div>
Der Titel sagt doch schon alles, das ist eine Überschrift:
<h1>Der Titel</h1>
(oder h2, h3)
und in der CSS Deklaration:.boxcontainer h1 {....}
<div class="boxmain">Hauptbox<br>
Ein Textabsatz:
<p>Hauptbox
.boxcontainer p
<img src="/images/test.gif" width="150" height="200" align="left">
.boxcontainer img { float:left;}
oder
.boxcontainer p img { float:left;}
<div class="boxfooter">Der Footer</div>
<p class="boxfooter">Der Footer</p>
Worauf wahsaga hinaus wollte. float nimmt einen Block aus dem Textfluss, d.h. er ist nicht mehr für den äußeren Block vorhanden.
Du kannst das mit clear vermeiden, in deinem Falle bietet sich dafür boxfooter an.Struppi.
-
<div class="boxtitle">Der Titel</div>
Der Titel sagt doch schon alles, das ist eine Überschrift:
Falsch: "boxtitel soll nur den Bereich definieren... könnte auch heissen "boxkopfbereich"... da kommt später noch ne Grafik dazu...
also:
<div class="boxheader"><img src="icon.gif"><h1>Titel</h1></div>...ich habe auch das mir dem <p>-tag versucht und mit float...
solange ich der "boxmain" keine Grösse (width:400px;) zuweise, klappt es nicht... ich kann aber keine fixe grösse zuweisen und 100% klappt auch nicht.-
hi,
...ich habe auch das mir dem <p>-tag versucht und mit float...
solange ich der "boxmain" keine Grösse (width:400px;) zuweise, klappt es nicht... ich kann aber keine fixe grösse zuweisen und 100% klappt auch nicht.ich bat dich, dich zu _infomieren_; Struppi wies dich explizit auf clear hin - warum sehen wir es dich immer noch nicht damit probieren?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
...weil ich momentan arbeiten muss und nicht gross Zeit habe zu "probieren" ;-)
...mein Problem löse ich wahrscheinlich wieder mit Tabellen!
Es ist mir zu blöd 5 Stunden lang eine Lösung zu testen, die dann auf Opera oder Mozilla nicht funktioniert...
Es wäre so einfach!
Ich will drei zonen: header, body, footer.
im bodybereich soll eine Grafik eingebunden werden können, die links oder rechts umflossen wird... und wenn die Grafik grösser als die Bodyzone ist, soll diese expandiert werden....wenn ich das mit css nicht schaffe, dann werd ich halt wieder mit Tabellen zur Formatierung arbeiten und auf CSS V4 warten, wo das vielleicht dann geht ;-)
-
...weil ich momentan arbeiten muss und nicht gross Zeit habe zu "probieren" ;-)
Das ist ein Problem was hier öfters auftaucht. Da will mal jemand mal eben schnell was mit CSS umsetzten ohne die Zeit, Möglichkeit oder Lust sich damit genauer auseinander zusetzen.
Das klappt so nicht.
Du hast sicher auch für deine Kenntnisse im Umgang mit Tabellen ein bisschen Zeit zum lernen gebraucht, für CSS brauchst du die auch. Gerade dann, wenn du bisher alles mit Tabellen gemacht hast wird das länger dauern, da dein Designkonzept dadurch nicht gerade CSS freundlich ist.
...mein Problem löse ich wahrscheinlich wieder mit Tabellen!
Kein Problem, wenn du nicht mal genug Zeit hast dir die Eigenschaft clear näher zu betrachten, ist das auf jeden Fall für dich die sinnvollste Lösung.
Es ist mir zu blöd 5 Stunden lang eine Lösung zu testen, die dann auf Opera oder Mozilla nicht funktioniert...
Wenn du in der Lage bist nach 5 Tagen CSS lernen dieses Problem zu lösen hast du wahrscheinlich sogar relativ schnell gelernt.
Es wäre so einfach!
Es ist einfach.
Ich will drei zonen: header, body, footer.
im bodybereich soll eine Grafik eingebunden werden können, die links oder rechts umflossen wird... und wenn die Grafik grösser als die Bodyzone ist, soll diese expandiert werden.Zum 4. Mal, schau dir die Eigenschaft clear an.
...wenn ich das mit css nicht schaffe, dann werd ich halt wieder mit Tabellen zur Formatierung arbeiten und auf CSS V4 warten, wo das vielleicht dann geht ;-)
Das geht sogar jetzt relativ einfach, du musst nur verstehen was bei float passiert und das ist naturgemäß eine der schwierigsten Punkten bei CSS.
Struppi.
-
...Ich beschäftige mich schon länger mit CSS...
Ich weiss jetzt auch wie sich float und clear verhält... das lösst aber mein Problem nicht...
Ich will eine Box mit Rahmen ringsum.
Ich will eine Grafig darin links oder rechtsbündig mit Fliesstext ringsum und ich möchte, dass die Grafik nicht unten rausguckt ;-)...witzigerweise klappt es ja mit der äussersten Box!
die schliesst auch erst unter der Grafik und nicht mittendrin...
Ich hab auch schon probiert ein zusätzliches Tag am ende der Seite zu platzieren, das mir dank clear:left den abschluss unter der Grafik sichert. ...haut auch nicht... plötzlich taucht ein IE-Bug auf, der den Text in der Box verschwinden lässt.. wen man alles selektiert, taucht er wieder auf......ich werde mein Projekt, das bis Ende Woche fertig sein soll, mit Tabellen beenden.
CSS ist nicht gestorben, aber die erhaltene Hilfe in divesen Foren ist nicht das Gelbe vom Ei... Auf Belerungen Alla "Du musst halt in Büchern nachlesen" kann ich getrost verzichten.Ich suchte hier Tipps und nicht das gute alte RTFM...
ein Beispiel oder so wäre Hilfreich gewesen... aber sprüche wie schau dir die Funktion clear oder float an, bringen mich meiner Lösung nicht näher... dann kann man das Forum darauf beschränken, dass ein Popup einen auffordert die Anleitung zu lesen...
Aber egal... ich bin nicht auf CSS angewiesen.
-
hi,
Ich weiss jetzt auch wie sich float und clear verhält... das lösst aber mein Problem nicht...
dann hast du es wohl doch noch nicht verstanden.
Ich will eine Box mit Rahmen ringsum.
Ich will eine Grafig darin links oder rechtsbündig mit Fliesstext ringsum und ich möchte, dass die Grafik nicht unten rausguckt ;-)kein problem, mit einem zusätzlichen clearenden element am ende der box - oder wenn du die box selber auch floaten lässt.
Ich hab auch schon probiert ein zusätzliches Tag am ende der Seite zu platzieren, das mir dank clear:left den abschluss unter der Grafik sichert. ...haut auch nicht...
am ende der seite ist es auch eher witzlos - es muss schon in die box mit rein.
CSS ist nicht gestorben, aber die erhaltene Hilfe in divesen Foren ist nicht das Gelbe vom Ei...
ach scheiße, hätte man doch wieder selber denken und sich bemühen sollen ... wie lästig.
Ich suchte hier Tipps und nicht das gute alte RTFM...
und wir geben hier tipps, im sinne von _denkanstößen_ - aber keine kompletten fertiglösungen, die so viele hier gerne auf dem silbertablett serviert bekämen.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
...besuch mal das Forum http://www.aspforum.de/ und schau dir dort meine Hilfe zu Problemen anderer an...
da gibt's auch ab und zu ne Lösung die nicht heisst:"schau im Kochbuch Seite 215 nach"
;-)
Ich habe es auch soweit geschafft (dank eurer Hilfe), dass die Box jetzt richtig aaussieht... nur stört mich das
* html .boxmain { height:100%; }
Weil dies wieder ein getrickse ist um zwischen IE und Mozilla einen gemeinsamen nenner zu finden...
...sollte Mozilla in der nächsten Version dies neu interpretieren, muss es wieder gefixt werden...Ich werd jetzt halt wie im Code unten die Version mit den Tabellen verwenden... und wenn der IE und Mozilla sich mal auf ner gemeinsamen Ebene treffen (so in ca 10 Jahren) werd ich dann vielleicht den Code nur in CSS erstellen ;-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="de-CH">
<head>
<style type="text/css">* html .boxmain { height:100%; }
.boxcontainer{
width:400px;
border:1px solid #03f; border-color:#06c #039 #039 #06c;
background-color:#9cf;
padding:0; margin:0;
}.boxheader{
padding:0 2px; margin:2px;
border:1px solid #06c; border-color:#6cf #039 #039 #6cf;
background-color:#06c; color:#fff;
font-weight:bold;
}.boxmain{
padding:0 2px; margin:2px;
border:1px solid #999; border-color:#039 #fff #fff #039;
background-color:#eee;
}.boxfooter{
border:1px solid #06c; border-color:#6cf #039 #039 #6cf;
background-color:#06c; color:#fff;
font-weight:bold;
margin:2px; padding:2px;
}.boxmain img{
height:100px; width:100px;
display:inline;
float:left;
}
</style>
</head>
<body>
<table class="boxcontainer">
<tr><th class="boxheader">Der Titel</th></tr>
<tr><td class="boxmain">
Hauptbox<br />
<img src="/images/test.gif" />
Text...blabla
</td></tr>
<tr><td class="boxfooter">Der Footer</td></tr>
</table><div class="boxcontainer">
<div class="boxheader"><h4>Der Titel</h4></div>
<div class="boxmain">
Hauptbox<br />
<img src="/images/test.gif" />
Text...blabla
<br style="clear: both;" />
</div>
<div class="boxfooter">Der Footer</div>
</div>
</body>
-
-
...Ich beschäftige mich schon länger mit CSS...
das ...
Ich weiss jetzt auch wie sich float und clear verhält... das lösst aber mein Problem nicht...
und das ....
Ich will eine Box mit Rahmen ringsum.
Ich will eine Grafig darin links oder rechtsbündig mit Fliesstext ringsum und ich möchte, dass die Grafik nicht unten rausguckt ;-)widerspricht sich.
...witzigerweise klappt es ja mit der äussersten Box!
die schliesst auch erst unter der Grafik und nicht mittendrin...
Ich hab auch schon probiert ein zusätzliches Tag am ende der Seite zu platzieren, das mir dank clear:left den abschluss unter der Grafik sichert. ...haut auch nicht... plötzlich taucht ein IE-Bug auf, der den Text in der Box verschwinden lässt.. wen man alles selektiert, taucht er wieder auf...wie ich dir schon hier https://forum.selfhtml.org/?t=101987&m=626825 versucht habe nahe zu bringen, der boxfooter muss das floaten beenden.
CSS ist nicht gestorben, aber die erhaltene Hilfe in divesen Foren ist nicht das Gelbe vom Ei... Auf Belerungen Alla "Du musst halt in Büchern nachlesen" kann ich getrost verzichten.
Hat ja keiner gesagt, sondern einerseits wurde dir mehrfach gesagt wie du dein Problem lösen kannst und anderseits das ein bisschen Geduld dazu gehört.
Ich suchte hier Tipps
.. Die reichlich vorhanden waren
ein Beispiel oder so wäre Hilfreich gewesen... aber sprüche wie schau dir die Funktion clear oder float an, bringen mich meiner Lösung nicht näher... dann kann man das Forum darauf beschränken, dass ein Popup einen auffordert die Anleitung zu lesen...
zitat https://forum.selfhtml.org/?t=101987&m=626825:
Worauf wahsaga hinaus wollte. float nimmt einen Block aus dem Textfluss, d.h. er ist nicht mehr für den äußeren Block vorhanden.
Du kannst das mit clear vermeiden, in deinem Falle bietet sich dafür boxfooter an.Aber egal... ich bin nicht auf CSS angewiesen.
hat keiner behauptet, du hast danach gefragt.
Struppi.
-
Sorry, wenn ich ein wenig ungehalten war...
Das mit dem Abschliessen des Floatingbereiches hab ich ja hingekriegt, nur tauchen dan im IE probleme auf, dass der Text nicht mehr angezeigt wird... wird das gefixt, geht der Scheiss in Mozilla wieder nicht und ob es auf nem Mac funktioniert, weiss keiner (resp. kann ich nicht testen...)
Alles in Allem wenig erbauend und höchst unbefriedigend!!!
Klaro gibt's jetzt diverse Hacks die man benutzen könnte... was für mich aber die ganze CSS-Schiene ins Absurdum laufen lässt... für was ein Standard, wenn ich danach Hacks benötige, damit es auf allen Browsern läuft... CSS sollte doch browserunabhängig sein, damit man sich eben nicht um die einzelnen Maroden der Hersteller kümmern muss...
...Ich weiss... die Diskussion wurde schon 1000x geführt und bringt auch nichts.Danke trotztdem noch für deine Hilfe und Geduld ;-)
-
Das mit dem Abschliessen des Floatingbereiches hab ich ja hingekriegt, nur tauchen dan im IE probleme auf, dass der Text nicht mehr angezeigt wird... wird das gefixt, geht der Scheiss in Mozilla wieder nicht und ob es auf nem Mac funktioniert, weiss keiner (resp. kann ich nicht testen...)
Der Bug war mir unbekannt.
Ich hab mal versucht ihn nachzubauen, bin aber noch nicht an den Punkt gekommen wo man sieht ab wann er genau Auftritt.
Aber er läßt sich, wie du unten schon geschrieben hast, mit:
.boxmain{
height:100%;
...
}fixen. und das ist auch durchaus ok, die 100% beziehen sich ja auf's äußere Element.
Alles in Allem wenig erbauend und höchst unbefriedigend!!!
Die eine Zeile reinzuschreiben?
Klaro gibt's jetzt diverse Hacks die man benutzen könnte... was für mich aber die ganze CSS-Schiene ins Absurdum laufen lässt... für was ein Standard, wenn ich danach Hacks benötige, damit es auf allen Browsern läuft... CSS sollte doch browserunabhängig sein, damit man sich eben nicht um die einzelnen Maroden der Hersteller kümmern muss...
Naja, hier ist das Problem ein Uralter Browser, der seine Ursprünge in den Zeiten der Browserkriege hat, aber dummerweise ihn gewonnen hat und daher weiter verbreitet ist.
Wobei ich dieses Problem nicht für sonderlich schlimm halte, da du ja gar kein Hack brauchst. Mir selber ist der Bug noch nie aufgefallen obowohl ich auch relativ oft mit float Arbeite.
Danke trotztdem noch für deine Hilfe und Geduld ;-)
kein Problem, hab selber wieder was gelernt ;-)
Struppi.
-
Der "Hack" ist das
* html .boxmain { height:100%; }
weil nur der IE und Mozilla diesen nicht interpretiert...Ich habe den Code soweit unter dem Link gepostet:
http://forum.de.selfhtml.org/?t=101987&m=627287...würde gehn...
aber eben...
-
Der "Hack" ist das
* html .boxmain { height:100%; }
weil nur der IE und Mozilla diesen nicht interpretiert...Er ist aber nicht nötig, bzw, ist es kein Hack sondern einfach eine Höhenangabe, die für den IE notwendig ist und die anderen Browser nicht weiter stört.
.boxmain { height:100%; } ist auch ok.Ich habe den Code soweit unter dem Link gepostet:
http://forum.de.selfhtml.org/?t=101987&m=627287schon gelesen. und ich hab mal en bisschen rumgespielt.
Struppi.
-
.boxmain { height:100%; } ist auch ok.
...Stimmt nicht...
Mozilla macht dann die Box so hoch wie das aktuelle Fenster ;-)
Deshalb ja der Trick
* html .boxmain {}
Mozilla ignoriert diese Angabe.wenn jetzt in Version X Mozilla diese Angabe plötzlich CSS-konform interpretiert, dann macht er die Box dann so hoch wie das Fenster...
...soviel zum Thema Hacks...
-
Hallo,
wenn jetzt in Version X Mozilla diese Angabe plötzlich CSS-konform interpretiert, dann macht er die Box dann so hoch wie das Fenster...
afaik ist das CSS-konform, denn das Elternelement hat ja keine festgelegte Höhe und soll sich ja gerade vergrößern, wenn der Inhalt es verlangt.
cu,
ziegenmelker -
Hallo,
.boxmain { height:100%; } ist auch ok.
...Stimmt nicht...
Mozilla macht dann die Box so hoch wie das aktuelle Fenster ;-)
Deshalb ja der Trick
* html .boxmain {}
Mozilla ignoriert diese Angabe.wenn jetzt in Version X Mozilla diese Angabe plötzlich CSS-konform interpretiert, dann macht er die Box dann so hoch wie das Fenster...
also ich habe jetzt mal den doctype so verändert, daß alle Browser (IE6, Moz und Opera) in den 'standards compliant mode' schalten und voila, Struppis Vorschlag mit height klappt wunderbar in allen Browsern.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">Bliebe wohl noch der IE5.x zu korrigieren.
cu,
ziegenmelker -
hi,
Deshalb ja der Trick
* html .boxmain {}
Mozilla ignoriert diese Angabe.wenn jetzt in Version X Mozilla diese Angabe plötzlich CSS-konform interpretiert, dann macht er die Box dann so hoch wie das Fenster...
wird er ziemlich sicher nie tun, weil es absoluter unfug ist.
"über" <html> kann es gar kein element geben, weshalb dieser selektor eigentlich vollkommener unfug ist ... was den IE aber nicht hindert, trotzdem was draus zu machen.
dass der gecko irgendwann diesen blödsinn nachahmen wird, steht m.E. nicht zu befürchten....soviel zum Thema Hacks...
soviel zum thema, erst mal verstehen, was man eigentlich einsetzt.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
Der "Hack" ist das
* html .boxmain { height:100%; }
weil nur der IE und Mozilla diesen nicht interpretiert...Mittlerweile bin ich auch schlauer, der Hack wäre:
/* Hides from IE5-mac \*/
* html .boxmain {height: 1%;}
/* End hide from IE5-mac */[http://www.positioniseverything.net/articles/hollyhack.html#haslayout]
Aber du bist gar nicht darauf angewiesen, da du ja ohne Probleme mit width:100% arbeiten kannst, da die Box ja innerhalb einer anderen mit einer festen Breite ist.
Struppi.
-
...Falsch...
width:100% geht nicht, da ich noch speziellere Sachen drin habe als in dem Code den ich gepostet habe.
Das ganze gehört zu einem CMS welches diverse Einstellungsmöglichkeiten hat.
Ich habe den Source soweit vereinfacht, dass das Problem ersichtlich ist.
Leider darf ich keine fixe oder dynamische Grössenangaben verwenden (IE-Box-Model-Problem lässt grüssen)...und wie gesagt soll das Ganze auf allen Browsern und Betriebssystemen ungefär gleich aussehen...
Deshalb will ich nicht 10 Hacks einbauen, die in ein paar Monaten plötzlich Probleme machen.
-
Hallo,
Aber du bist gar nicht darauf angewiesen, da du ja ohne Probleme mit width:100% arbeiten kannst, da die Box ja innerhalb einer anderen mit einer festen Breite ist.
dann schiebt leider der Mozilla die boxmain nach rechts aus dem boxcontaner heraus. (padding und border wird zur linken Position hinzugezählt.
cu,
ziegenmelker
-
-
-
Ich hab mal versucht ihn nachzubauen, bin aber noch nicht an den Punkt gekommen wo man sieht ab wann er genau Auftritt.
Also er tritt auf, im IE (6-strict Modus) wenn:
- ein Bild die Eigenschaft float: left/right
- Ein Text folgt, der mit einem clear:.... auf die Höhe des Bildes gebracht wird
- der text eine Hintergrundfabre erhält
- er Bereich einen Border erhält.
Abhilfe: dem Bereich eine Größe: width oder height angeben.
Gleichzeitig tauchen andere Bugs auf:
-
ein BR Element mit clear:left am Ende des Textabsatzes funktioniert auch nur wenn der container eine Höhen- oder Breitenangabe hat.
-
ohne Border aber mit einem clear Element ist der Breich viel Größer als sein Inhalt.
guckt euch das an im IE:
<body><div style="color:#000;background-color:#eee">
Ein Text!<br>
<img src="test.jpg" alt="">
Text...blabla
<p style="clear:both"></p>
</div><p>Noch mehr Text
</body>Das macht Spaß, aber ist sicher für Cheatah langweilig, vielleicht kann ja jemand Tipps geben, wo diese Bigs besser beschrieben sind.
Struppi.
-
Hallo Struppi,
Das macht Spaß, aber ist sicher für Cheatah langweilig, vielleicht kann ja jemand Tipps geben, wo diese Bigs besser beschrieben sind.
Besser nicht unbedingt, aber gut. Hier ist jedenfalls mein Lieblings-CSS-Link:
http://www.positioniseverything.net/explorer/peekaboo.html
http://positioniseverything.net/articles/common.html Stichwort: Peekaboo
Die ganze Site ist s e h r nützlich.
Beachtliche Analyse von Dir, finde ich.
Viele Grüße
Vaclav-
Besser nicht unbedingt, aber gut. Hier ist jedenfalls mein Lieblings-CSS-Link:
Naja, da wird schon mit Beispiel analysiert, ich kann das hier grad nicht ausprobieren, aber da sind ja mehrere Wege beschrieben.
http://www.positioniseverything.net/explorer/peekaboo.html
http://positioniseverything.net/articles/common.html Stichwort: Peekaboo
gehört hab ich den auch schon, aber wer soll sich all diese Bugsnamen merken. Aber die beiden Seiten werd ich auf jeden Fall bookmarken
Die ganze Site ist s e h r nützlich.
yeap, bin da auch schon öfters drüber gestolpert.
Beachtliche Analyse von Dir, finde ich.
Danke, Fehleranyalysen gewöhnt man sich in dem Bereich irgendwann mal an. Das ist ähnlich wie im Haushalt, wenn ein Gerät nicht funktioniert - erstmal schauen ob der Stecker steckt - also einfach Schrittweise alles einbauen bis der Fehler auftritt und dann halt probieren was reproduzierbar ist.
Struppi.
-
Wow... endlich mal ne kompetente Auskunft und vernünftige Links zum Nachsehn.
Danke vielmals
-
-
-
-
-
-
-
-
-
-
-
-
Hallo Solo,
ich glaube, Du hast hier schon wesentlich mehr Zeit verbracht als Du gebraucht hättest, um diesen Artikel über Floating zu lesen. Du bist nicht der erste, der sich damit schwertut (meines Wissens mindestens der zweite ;-). Mir haben vor allem die Illustrationen geholfen. Wenn man´s verstanden hat macht´s Spaß.
Viele Grüße
Vaclav