✔ Fehler im FF und in Opera

Status
Nicht offen für weitere Antworten.
R

reddragon90

Erfahrenes Mitglied
Abend,

könnt ihr in diesem CSS Code ein Fehler sehen? Ich nicht. Im IE geht der middleContainer automatisch runter wenn der Text länger wird, im FF und in Opera nicht.

Code: 
#middleContainer {
	position:relative;
	width: 1024px;
	min-height: 250px;
	height: auto !important;
	height: 250px;
	background-image: url(images/bg_middle.gif);
	background-repeat: repeat-y;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#bottomContainer {
	width: 1024px;
	height: 250px;
	float: left;
	background-image: url(images/bg_bottom.gif);
	background-repeat: no-repeat;
 
Hi,

ich kann da ebenfalls keinen Fehler im Sylesheet entdecken.

Hast du denn auch die Klasse clearfix im DIV middleContainer aufgerufen?

Ansonsten poste mal den dazugehörigen HTML-Code.
 
Ja habe ich.

HTML: 
<div id="container">
	
	<div id="topContainer"></div>
  		<div id="middleContainer" class="clearfix">
  					<div id="mainContent">
						<!-- TemplateBeginEditable name="mainContent" -->
								Hier kommt der ganze Inhalt rein
						<!-- TemplateEndEditable -->					
  					</div>
				  	
        </div>
 
Bei mir wird anhand der gezeigten Code-Schnippsel die Box im Firefox und Opera bei zunehmenden Inhalt vergrößert.

Wie lauten denn die Formatierungen für die übrigen Elemente container und mainContent?

Vielleicht solltest du mal den vollständigen Quellcode der Seite posten, denn vermutlich ist die Ursache an einer anderen Stelle zu suchen.
 
Na das wollte ich vermeiden, aber wenns nicht anderes geht :)

CSS:
Code: 
body {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color:#555;
	background-color: #50A0E5;
	margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label,
input,
br {
	margin: 0px;
	padding: 0px;
}
/*	-------------------------------------------------------
	Main Layout Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
#container {
	width: 1024px;
	height: 616px;
	margin: 0px auto;
}
#topContainer {
	width: 1024px;
	height: 265px;
	background-image: url(images/bg_top.gif);
	background-repeat: no-repeat;
}
#middleContainer {
	position:relative;
	width: 1024px;
	min-height: 250px;
	height: auto !important;
	height: 250px;
	background-image: url(images/bg_middle.gif);
	background-repeat: repeat-y;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#bottomContainer {
	clear:both
	width: 1024px;
	height: 250px;
	background-image: url(images/bg_bottom.gif);
	background-repeat: no-repeat;
}
#leftContent, #mainContent, #rightContent {
	float:left;
}
#leftContent {
	width: 225px;
	height: 250px;
	padding-left: 45px;
}
#mainContent {
	width: 490px;
	height: 250px;
}
#rightContent {
	width: 219px;
	height: 250px;
	padding-right: 45px;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<link rel="stylesheet" type="text/css" href="../css/screen.css">
<!-- TemplateEndEditable -->

</head>

<body>

<div id="container">
	
	<div id="topContainer"></div>
  		<div id="middleContainer" class="clearfix">
					
					<div id="leftContent">
						Navigation					
					</div>
					
  					<div id="mainContent">
						<!-- TemplateBeginEditable name="mainContent" -->
								Hier kommt der ganze Inhalt rein
                                                <!-- TemplateEndEditable -->					
  					</div>
				  	
					<div id="rightContent">
						<!-- TemplateBeginEditable name="rightContent" -->
						  rightContent					 	
						<!-- TemplateEndEditable -->					
					</div>
        </div>	

	<div id="bottomContainer"></div>
</div>
</body>
</html>
 
Ich würde mal sagen, dass es an den festen Höhen für die beiden genannten DIVs liegt, insbesondere beim DIV mainContent. ;)
 
Meinst du bei middleContainer und beim bottomContainer? Denn wenn ich dort die height Eigenschaft entferne geht es trotzdem nicht. Wenn ich sie bei bottomContainer entferne dann ist die dazugerhörige Grafik auch nicht mehr zu sehen.
 
Nein, ich rede vom DIV mainContent, das den ganzen Inhalt aufnimmt und derzeit "nur" die Deklaration height:250px besitzt, was in den nicht-IE-Browsern zu einer festen Boxenhöhe führt, und sich somit die umschliessende Box middleContainer bei zunehmenden Inhalt nicht nach unten ausdehnt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück