4. Mozilla-Problem bei <div>-Verschachtelung

Mozilla-Problem bei <div>-Verschachtelung

  • M

    Morgen!

    Ich hab ein kleines Problem mit der Datstellung einer div-Verschachtelung im Mozilla. Irgend wie vergrößert der Mozilla das umhüllende div nicht, wenn sich das umhüllte div in der Höhe ändert.

    Beispiel

    <div id="huelle">
     <div id="part1"><!--hier wird dynamisch Inhalt dargestellt--></div>
</div>

    Wenn ich nun den Inhalt in "part1" lade vergrößert sich das div "huelle" nicht in der Höhe. Ich möchte aber eine Hintergrundgraphik in "huelle" darstellen, die aber im Mozilla nicht angezeigt wird, da das div keine Höhe besitzt. Im IE funktioniert das wunderbar, aber Mozilla... 🙄
    Hat jemand vielleicht eine Idee warum das so ist und wie sich das lösen liesse?

    Mfg

    MORL

    0
  • D

    Du könntest versuchen statt id= class= verwenden. Das erfährt IMHO eine breitere Unterstützung. "id" dünkt mich ein wenig MS-spezifisch (kann damit aber auch falsch liegen).

    0
  • T

    Ja du liegst falsch.

    "id" darf es nur einmal im HTML-Dokument geben und bezeichnet halt ein Element Exakt eindeutig.

    du kannst im CSS mit #idname styles für das entsprechende Element festlegen.

    "class" hingegen fast gruppen von Elementen zusammen die ein style bekommen sollen. Zum Beispiel bestimmte Tabellenzellen:

    <style>
#spalte1
{
  background-color: grey;
}
#spalte1
{
  background-color: yellow;
}

td.soll
{
  color: red;
}
</style>
<td id="spalte1" class="soll">-10</td>
<td id="spalte2" class="soll">-10</td>

    Beide schriften sind rot. Allerdings der eine Hintergrund grau, der andere gelb.

    mfg
    tobi

    0
  • M

    Hmmmm...
    Was hat das jetzt mit meiner Frage zu tun?
    Die Bedeutung und Verwendung von id und class ist mir bekannt und darum ging es ja auch nich. 😃

    0
  • F

    Falls sich das Problem noch nicht gelöst hat: was haben deine DIVs denn für Styles?

    0
  • M
     

    #huelle { width:500px; background-color:#c8c8c8; }
#part1 { width:500px; }

    Wären jetzt mal die notwendigen Styles für mein oben angegebenes Beispiel.

    0
  • T

    sorry MORL, wollte nur "Dasd" verbessern, da id und class ja nicht das selber bedeuten. Das selbe Problem mit dem nicht anpassen des äusseren an das innere Div hab ich aber auch.
    Bisher aber noch keine Lösung gefunden..

    0
  • M

    Als Alternativlösung hab ich derzeit eine Tabelle verwendet. Das wollte ich aber vermeiden, hab aber gehört das wohl div's vom Mozilla nicht 100%ig unterstützt werden. Vielleicht hat ja jemand eine Lösung.

    0
  • F

    Ich kann das bei mir gerade im Mozilla 1.4a nicht so ganz reproduzieren - könntest du evtl. mal ein komplettes Quelltext-Beispiel (evtl. sogar mit Screenshots) posten? 🤡

    0
  • T

    #huelle { width:500px; background-color:#c8c8c8; }
    #part1 { width:500px; }

    Ich glaub der Auszug reicht nicht ganz. Wenn man beim äusseren div keine Höhe angibt, dann funktioniert es (zumindest bei mir).

    Also ich glaub ich habe das Problem verstanden, ich hoffe es zumindest das es das gleiche wie bei mir ist.

    <html>
<head>
<style>
#aussen
{
	width: 200px;
	height:200px;
	background-color: #F00;
}
#innen
{
	width:	200px;
}

</style>
</head>
<body>
<div id="aussen">
	<div id="innen">
		<p>
			Das hier ist ein Test<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
			fdsjkfsdjlfs<br />
		</p>
	</div>
</div>
</body>
</html>

    Firefox zeigt jetzt das rot nur bis zu einer Höhe von 200 Pixeln an, danach steht die Schrift plötzlich auf weissem Hintergrund. Opera und IE zeigen es korrekt an.
    Ich bräuchte das zum Beispiel für ein Menü das eine Mindesthöhe hat, sich aber wenn der Text zu lang ist anpasst.

    ich hoffe das ist das Problem was MORL meint. 🙂

    0
  • F

    Spontan fällt mir da jetzt nur die Verwendung von min-height ein - damit es im IE trotzdem richtig funktioniert könntest du über Conditional Comments für den IE weiterhin height verwenden (da er ja min-height nicht versteht) 🕶

    0
  • T

    hmm.. joa, wär auch ne Möglichkeit, wodran ich bisher immer gedacht hatte, war einfach keine Höhe anzugeben, und um die Mindesthöhe zu erreichen mit php zeilenumbrüche einzufügen wenn das Menü zu kurz ist.

    0
  • M

    Ich weiss jetzt wo der Fehler liegt. Sobald im unschliessenden div zwei div's nebeneinander liegen, funktioniert es nicht mehr.

    Bsp.:

    <div style="width:500px; background-color:#ffff00;">
     <div style="width:250px; float:left;">Test-Text1</div>
     <div style="width:250px; float:left;">Test-Text2</div>
</div>

    Das bekommt der Mozilla nicht mehr hin. Hab auch schon versucht noch ein div um die zwei inneren div's zu legen, was aber zu dem selben Ergebnis geführt hat.

    0
  • F

    Falls du die fehlende Hintergrundfarbe meinst - bei mir hilft hier ein (zwar etwas unschönes) kleines Workaround: Einfach unter die beiden divs mit float:left noch eines mit clear:both setzen.

    <div style="clear:both; height:1px;"></div>
    0
  • M

    Wunderbar! 🙂
    Da hätt ich eigentlich auch selber drauf kommen können.
    Vielen Dank für die Hilfe.

    0
  • T

    😮 moooment 🙂

    von floaten war oben niemals nicht die Rede 😃 Wenn du float benutzt ist das eigentlich normal..

    floatende objekte fliessen über die grenzen von parent-objekten hinaus. Das ist eigentlich ganz normal.

    siehe dazu vielleicht mal hier.

    Das heisst wenn du dem ausseren DIV ne feste Grösse geben würdest. Zum beispiel height: 20px; dann müsste der Hintergrund bis 20px gefärbt sein.

    Durch das clear: both; von flenders wird das floaten wieder aufgehoben und damit natürlich die Größe des umschliessenden DIVs angepasst. Ist für mich eigentlich ganz logisch. Die Unlogik liegt eher bei den anderen Browser ?!?

    mfg
    tobi

    0
Anmelden zum Antworten