✔ Div passt sich im firefox nicht an Inhalt an

Status
Nicht offen für weitere Antworten.
M

Merbi

Hallihallo,

habe ein Problem. Der Bereich content passt sich nicht an die Größe des jeweiligen Inhalts an.

Code index.php:

Code: 
<body>


<div id="header">	

	<h1>Donrather Getränkemarkt</h1>

</div>

	<div id="menue">
	<ul>
 	 <li><a href="index.php?id=home.php">Startseite</a></li>
 	 <li><a href="#">Wir über uns</a></li>
 	 <li><a href="#">Service</a></li>
 	 <li><a href="index.php?id=sortiment.php">Sortiment</a></li>
 	 <li><a href="index.php?id=angebote.php">Angebote der Woche</a></li>
 	 <li><a href="index.php?id=contact.php">Kontakt</a></li>
 	 <li><a href="index.php?id=partner.php">Partner</a></li>
 	 <li><a href="#">Links</a></li>
 	 <li><a href="index.php?id=impressum.php">Impressum</a></li>
	</ul>
	</div>


<div id="main">


<div id="content">


<div class="news_entry">

		<strong>Sortiment</strong>
</div>
     
<div>
		<br>
		<strong>Kühlhänger</strong><br><br>

		75€ | <a href="template/images/haenger.jpg" target="_blank">Bild</a><br><br>

		<strong>Klapptheke</strong><br><br>

		75€ | <a href="template/images/theke.jpg" target="_blank">Bild</a><br><br>

</div>

</div>


</div>

<div id="footer">

	
</div>

</body>


Code stylesheet:

Code: 
body {
	background-color : #1F2680;
	font-size : 8pt;
	font-family : Lucida Sans Unicode, Verdana, Arial !important;
	color : #247DD7;
	margin : 0;
}

a {
	color: #FFFFFF;
	background-color: #0099ff;
}
	
a:hover {
	color: #FFFFFF;
	background-color: #0099ff;
}


/* --- Navigation --- */


#nav {
	width: 100%;
}


#menue {
	background-color: #1F2680;
	width: 100%;	
}

#menue li {
 	 display: inline; 
}

#menue li a {
	 background-color: #1F2680;
	 color: #FFFFFF;
 	 padding: 3px 1em;
 	 margin-left: 3px;
 	 border: 1px solid #1F2680;
 	 border-bottom: 0;
 	 text-decoration: none; 
}

#menue li a:hover {
	 background-color: #1F2680;
	 color: #FFFFFF;
 	 padding: 3px 1em;
 	 margin-left: 3px;
 	 border: 1px solid #FFFFFF;
 	 border-bottom: 0;
	 border-top: 0;
 	 text-decoration: none; 
}


	
/* --- content stuff --- */


#main {
	background-color: #0099ff;
	color: #FFFFFF;
	margin-right: 35px;
	margin-left: 35px;
	height: 450px;
}


#header {
	background-color: #0099ff;
	color: #FFFFFF;
	margin-right: 35px;
	margin-left: 35px;
  	margin-top: 20px;
}

#news {
	position: relative;
	width: 200px;
	float: right;
	margin-right: 50px;
	margin-top: 20px;
}

#content {
	height: 100%;
	width: 450px;
	margin-left: 50px;
	padding-top: 20px;
}

#footer {
	height: 35px;
	background-color: #1F2680;
}

.news_entry {
	border-bottom: 1px solid #1F2680;						
}

.insert {
	width: 300px;
}

MFG Daniel
 
Hi,

richte mal mit min-height für die umschliessende Box #main eine Mindesthöhe von 450px ein, denn nur der IE behandelt die height-Eigenschaft als "Mindesthöhe" und dehnt die Box aus, wenn der Inhalt die vorgegebene Höhe überschreitet, und hänge anschliessend height:auto !important an, damit die modernen Browser die nachfolgende height-Deklaration "ignorieren".

Code: 
#main {
        background-color: #0099ff;
        color: #FFFFFF;
        margin-right: 35px;
        margin-left: 35px;
        min-height: 450px; /* moderne Browser */
        height: auto !important; /* moderne Browser */
        height: 450px; /* IE */
}
 
100000Dank

Das mit min-height hatte ich auch schon getestet aber nicht in verbindung mit height:auto.



MFG Daniel
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück