✔ FF-Problem: Div in Div

Status
Nicht offen für weitere Antworten.
Daaguru

Daaguru

Erfahrenes Mitglied
Hi zusammen,

wenn ich im Firefox folgenden CSS+HTML Code schreibe:
PHP: 
css:
#container: border: 1px solid black;
html:
<div id="container">
     <div id="in_container">
         check1
     </div>
</div>

Wird <div id="in_container"> nicht in <div id="container"> dargestellt.
Warum?
Und warum wird es im iE "richtig" dargestellt? :)

~daA|guRu~
 
Du hast da wohl die geschweiften Klammern vergessen:

Code: 
#container {
border: 1px solid black;
}
 
Das ist nicht das Problem.
Es geht darum das <div id="container"> mindestens so groß sein muss wie sein Inhalt.

Wenn ich zB:
PHP: 
#in_container
{
     height: 100px;
     width:  200px;
}

Dann ist <div id="container"> nicht 100px hoch und 200px weit.
 
Das DIV #container ist bei mir sehr wohl 100 Pixel hoch. Daß die Breite nicht vom Kindelement übernommen wird, ist normal, da Blockelemente sich (ohne feste Breitenangabe) immer auf die verfügbare Breite des Viewports ausdehnen.
 
Anderes Beispiel:

PHP: 
css:

#visitenkarte
{
     background: #F6F6F6;
     width: 300px;
    height: auto;
}

html:

<div id="visitenkarte">
     Hallo ich bin eine Visitenkarte:<br />
     Name: Mein Name<br />
     Adresse: Meine Adresse <br />
     Tele: Meine Telefonnummer <br />
</div>

Dann ist der Hintergrund nicht so hoch, so hoch der Text in der DIV-BOX ist.
 
Auch diese Aussage kann ich nicht bestätigen.

.
 

Anhänge

  • 25650attachment.png
    25650attachment.png
    15,8 KB · Aufrufe: 7
Zeig doch bitte mal den vollständigen Quelltext (HTML + CSS). Eventuell hat sich dort ein Markup- bzw. Syntax-Fehler eingeschlichen, den der Firefox mit diesen Darstellungsfehlern quittiert.
 
PHP: 
<div id="kontakte">
			<div class="last_header">
				<img src="bilder/pfeil_unten_hell.bmp" alt=""></img> Letzte hinzugef&uuml;gte Notizen
			</div>
			
			<div class="last_notiz">
				<div class="last_kontakt_1">
					<a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
				</div>
				<div class="last_kontakt_2">
					
					70327 Stuttgart<br />
					0172-1043207<br />
					<a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
					<img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
				</div>
			</div>
			
			<div class="last_notiz_2">
				<div class="last_kontakt_1">
					<a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
				</div>
				<div class="last_kontakt_2">
					Supacstr.12<br />
					70327 Stuttgart<br />
					0172-1043207<br />
					<a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
					<img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
				</div>
			</div>
			
			<div class="last_header">
				<img src="bilder/pfeil_unten_hell.bmp" alt=""></img> Letzte hinzugef&uuml;gte Kontakte
			</div>
			
			<div class="last_kontakt">
				<div class="last_kontakt_1">
					<a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
				</div>
				<div class="last_kontakt_2">
					Supacstr.12<br />
					70327 Stuttgart<br />
					0172-1043207<br />
					<a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
					<img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
				</div>
			</div>
			
			
			<div class="last_kontakt">
				<div class="last_kontakt_1">
					<a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
				</div>
				<div class="last_kontakt_2">
					Supacstr.12<br />
					70327 Stuttgart<br />
					0172-1043207<br />
					<a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
					<img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
				</div>
			</div>
			
			<div class="last_kontakt">
				<div class="last_kontakt_1">
					<a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
				</div>
				<div class="last_kontakt_2">
					Supacstr.12<br />
					70327 Stuttgart<br />
					0172-1043207<br />
					<a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
					<img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
				</div>
			</div>
		</div>

------------------------------------------------------------------------------------




div#kontakte a {}
div#kontakte a:hover { text-decoration:none;  background: #2269B5; color: #FFF;}

div#kontakte
{
	clear:both;
	display:block;
	width: 617px;
	height: auto;
	margin-left:15px;
	border:1px solid black;
}


div#kontakte .last_header
{
	float:left;
	width: 617px;
	background: #2269B5;
	margin: 15px 0 0 0px;
	padding-top:2px;	
	color: #FFF;
	height: 17px;
}

div#kontakte .last_header img
{
	margin-left: 8px;
}

div#kontakte .last_notiz, div#kontakte .last_notiz_2
{
	float: left;
	width: 301px;
	margin: 15px 0 0px 0px;
	background: #F6F6F6;
}

div#kontakte .last_notiz_2
{
	margin-left:15px;
}

div#kontakte .last_kontakt
 {
	float:left;
	margin: 15px 0 15px 8px;
	width: 183px;
	color: #042A52;
	background: #F6F6F6;
}


div#kontakte .last_kontakt_1
{
	background:#BCDDFA;
	color: #042A52;
}

div#kontakte .last_kontakt_1 a
{
	display:block;
	padding: 3px 0 3px 5px;
	border: 0;
}

div#kontakte .last_kontakt_1 img
{
	border: 0;
	margin-right:4px;
}

div#kontakte .last_kontakt_1 a:hover
{
	display:block;
	background: #2269B5;
	color: #FFF;
	text-decoration: none;
}
	
div#kontakte .last_kontakt_2
{
	height:18px;
	padding: 5px 0 5px 5px; 
}

div#kontakte .last_kontakt img
{
	margin-right: 5px;
}

div#kontakte .last_kontakt_3
{
	background:#BCDDFA;
	height: 10px:
}
 
  • Entferne mal die Höhenangabe für die Klasse .last_kontakt_2:
Code: 
div#kontakte .last_kontakt_2
{
    /*height:18px;*/ /* auskommentiert = deaktiviert */
    padding: 5px 0 5px 5px;
}
  • Erweitere das Stylesheet mit folgender Regel:
Code: 
div.clear {
    clear: left;
}
und füge das DIV .clear im HTML-Code vor dem schliessenden </div> (DIV#kontakte) ein:

Code: 
<div id="kontakte">
            <div class="last_header">
                <img src="bilder/pfeil_unten_hell.bmp" alt=""></img> Letzte hinzugef&uuml;gte Notizen
            </div>

            <div class="last_notiz">
                <div class="last_kontakt_1">
                    <a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
                </div>
                <div class="last_kontakt_2">

                    70327 Stuttgart<br />
                    0172-1043207<br />
                    <a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
                    <img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
                </div>
            </div>

            <div class="last_notiz_2">
                <div class="last_kontakt_1">
                    <a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
                </div>
                <div class="last_kontakt_2">
                    Supacstr.12<br />
                    70327 Stuttgart<br />
                    0172-1043207<br />
                    <a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
                    <img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
                </div>
            </div>

            <div class="last_header">
                <img src="bilder/pfeil_unten_hell.bmp" alt=""></img> Letzte hinzugef&uuml;gte Kontakte
            </div>

            <div class="last_kontakt">
                <div class="last_kontakt_1">
                    <a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
                </div>
                <div class="last_kontakt_2">
                    Supacstr.12<br />
                    70327 Stuttgart<br />
                    0172-1043207<br />
                    <a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
                    <img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
                </div>
            </div>


            <div class="last_kontakt">
                <div class="last_kontakt_1">
                    <a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
                </div>
                <div class="last_kontakt_2">
                    Supacstr.12<br />
                    70327 Stuttgart<br />
                    0172-1043207<br />
                    <a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
                    <img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
                </div>
            </div>

            <div class="last_kontakt">
                <div class="last_kontakt_1">
                    <a href=""><img src="bilder/last_kontakt.bmp" alt=""></img>Diana Jackson</a>
                </div>
                <div class="last_kontakt_2">
                    Supacstr.12<br />
                    70327 Stuttgart<br />
                    0172-1043207<br />
                    <a href="mailto:a.müller@email.de">a.müller@email.de</a><br />
                    <img src="bilder/pfeil_black.gif" alt=""></img><a href="">Details</a>
                </div>
            </div>

            <div class="clear"></div>
        </div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück