Darstellungsfehler Firefox - DIV mit Height: 100%

[Gast michaeljomarron]

In Firefox wird es so angezeigt aber im IE7 nicht.

Beispiel: TEST

Hier nochmal die Seite um die es eigentlich geht: Hirt-EDV

Was muss ich machen um den Fehler zu beheben?

Hier mein CSS Code

/********************************************

   AUTHOR:  			Erwin Aligam 

   WEBSITE:   			http://www.styleshout.com/

	TEMPLATE NAME: 	Bright Side of Life

   TEMPLATE CODE: 	S-0005

   VERSION:          1.0          	

 *******************************************/ 


/********************************************

   HTML ELEMENTS

********************************************/ 


/* top elements */

* { padding: 0; margin: 0; }


body {

	margin: 0;

	padding: 0;

	font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;

	color: #666666; 

	background: #A9BAC3 url(bg.gif) repeat-x;

	text-align: center;

}


/* links */

a { 

	color: #4284B0;

	background-color: inherit;

	text-decoration: none;

}

a:hover {

	color: #9EC068;

	background-color: inherit;

}


/* headers */

h1, h2, h3 {

	font: bold 1em 'Trebuchet MS', Arial, Sans-serif;

	color: #333;	

}

h1 { font-size: 1.5em; color: #6297BC; } 

h2 { font-size: 1.4em; text-transform:uppercase;}

h3 { font-size: 1.3em; }


p, h1, h2, h3 {

	margin: 10px 15px;

}

ul, ol {

	margin: 10px 30px;

	padding: 0 15px;

	color: #4284B0;

}

ul span, ol span {

	color: #666666; 

}


/* images */

img {

	border: 2px solid #CCC;

}

img.no-border {

	border: none;

}

img.float-right {

  margin: 5px 0px 5px 15px;  

}

img.float-left {

  margin: 5px 15px 5px 0px;

}

a img {  

  border: 2px solid #568EB6;

}

a:hover img {  

  border: 2px solid #CCC !important; /* IE fix*/

  border: 2px solid #568EB6;

}


code {

  margin: 5px 0;

  padding: 10px;

  text-align: left;

  display: block;

  overflow: auto;  

  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;

  /* white-space: pre; */

  background: #FAFAFA;

  border: 1px solid #f2f2f2;  

  border-left: 4px solid #4284B0; 

}

acronym {

  cursor: help;

  border-bottom: 1px solid #777;

}

blockquote {

	margin: 15px;

 	padding: 0 0 0 20px;  	

  	background: #FAFAFA;

	border: 1px solid #f2f2f2; 

	border-left: 4px solid #4284B0;   

	color: #4284B0;

	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 

}


/* form elements */

form {

	margin:10px; padding: 0;

	border: 1px solid #f2f2f2; 

	background-color: #FAFAFA; 

}

label {

	display:block;

	font-weight:bold;

	margin:5px 0;

}

input {

	padding: 2px;

	border:1px solid #eee;

	font: normal 1em Verdana, sans-serif;

	color:#777;

}

textarea {

	width:300px;

	padding:2px;

	font: normal 1em Verdana, sans-serif;

	border:1px solid #eee;

	height:100px;

	display:block;

	color:#777;

}

input.button { 

	margin: 0; 

	font: bold 1em Arial, Sans-serif; 

	border: 1px solid #CCC;

	background: #FFF; 

	padding: 2px 3px; 

	color: #4284B0;	

}


/* search form */

form.searchform {

	background: transparent;

	border: none;

	margin: 0; padding: 0;

}

form.searchform input.textbox { 

	margin: 0; 

	width: 120px;

	border: 1px solid #9EC630; 

	background: #FFF;

	color: #333; 

	height: 14px;

	vertical-align: top;

}

form.searchform input.button { 

	margin: 0; 

	padding: 2px 3px; 

	font: bold 12px Arial, Sans-serif; 

	background: #FAFAFA;

	border: 1px solid #f2f2f2;

	color: #777;	

	width: 60px;

	vertical-align: top;

}


/***********************

	  LAYOUT

************************/

#wrap {

	background: #FFF;

	width: 820px; height: 100%;

	margin: 0 auto;	

	text-align: left;

}

#content-wrap {

	clear: both;

	margin: 0; padding: 0;	

	background: #FFF;

}


/* header */

#header {

	position: relative;

	height: 85px;	

	background: #000 url(headerbg.gif) repeat-x 0% 100%;	

}

#header h1#logo {

	position: absolute;

	margin: 0; padding: 0;

	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;

	letter-spacing: -2px;

	text-transform: lowercase;

	top: 0; left: 5px;	

}

#header h2#slogan {

	position: absolute;	 

	top:37px; left: 95px;

	color: #666666;

	text-indent: 0px;

	font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; 

	text-transform: none;	

}

#header form.searchform {

	position: absolute;

	top: 0; right: -12px;	

}


/* main */

#main {

	float: left;

	margin-left: 15px;

	padding: 0;

	width: 50%;

}


.post-footer {

	background-color: #FAFAFA;

	padding: 5px; margin: 20px 15px 0 15px;

	border: 1px solid #f2f2f2;

	font-size: 95%;	

}

.post-footer .date {

	background: url(clock.gif) no-repeat left center;

	padding-left: 20px; margin: 0 10px 0 5px;

}

.post-footer .comments {

	background: url(comment.gif) no-repeat left center;

	padding-left: 20px; margin: 0 10px 0 5px;

}

.post-footer .readmore {

	background: url(page.gif) no-repeat left center;

	padding-left: 20px; margin: 0 10px 0 5px;

}


/* sidebar */

#sidebar {

	float: left;

	width: 18%;

	margin: 0;

	padding: 0;

	display: inline;

}

#sidebar ul.sidemenu {

	list-style:none;

	margin:10px 0 10px 15px;

	padding:0;		

}

#sidebar ul.sidemenu li {

	margin-bottom:1px;

	border: 1px solid #f2f2f2;

}

#sidebar ul.sidemenu a {

	display:block;

	font-weight:bold;

	color: #333;	

	text-decoration:none;	

	padding:2px 5px 2px 10px;

	background: #f2f2f2;

	border-left:4px solid #CCC;	


	min-height:18px;

}


* html body #sidebar ul.sidemenu a { height: 18px; }


#sidebar ul.sidemenu a:hover {

	padding:2px 5px 2px 10px;

	background: #f2f2f2;

	color: #FF0000;

	border-left:4px solid #FF0000;

}


/* rightbar */

#rightbar {

	float: right;

	width: 20%;

	padding: 0;

	margin:0;

}


/* Footer */

#footer { 

	clear: both; 

	color: #FFF; 

	background: #A9BAC3; 

	border-top: 5px solid #568EB6;

	margin: 0; padding: 0; 

	height: 50px;	  

	font-size: 95%;		

}

#footer a { 

	text-decoration: none; 

	font-weight: bold;	

	color: #FFF;

}

#footer .footer-left{

	float: left;

	width: 65%;

}

#footer .footer-right{

	float: right;

	width: 30%;

}


/* menu tabs */

#header ul {

	z-index: 999999;

	position: absolute;

   margin:0; padding: 0;

   list-style:none;

	right: 0; 

	bottom: 6px !important; bottom: 5px;

	font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	

}

#header li {

   display:inline;

   margin:0; padding:0;

}

#header a {

   float:left;

   background: url(tableft.gif) no-repeat left top;

   margin:0;

   padding:0 0 0 4px;

   text-decoration:none;

}

#header a span {

   float:left;

   display:block;

   background: url(tabright.gif) no-repeat right top;

   padding:6px 15px 3px 8px;

   color: #FFF;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#header a span {float:none;}

/* End IE5-Mac hack */

#header a:hover span {

	color:#FFF;

}

#header a:hover {

   background-position:0% -42px;

}

#header a:hover span {

   background-position:100% -42px;

}

#header #current a {

   background-position:0% -42px;

	color: #FFF;

}

#header #current a span {

   background-position:100% -42px;

	color: #FFF;

}

/* end menu tabs */


/* alignment classes */

.float-left  { float: left; }

.float-right {	float: right; }

.align-left  {	text-align: left; }

.align-right {	text-align: right; }


/* additional classes */

.clear { clear: both; }

.green {	color: #9EC630; }

.gray  {	color: #BFBFBF; }

[Aiun]

Fehlerbeschreibung ? Art des Problems ?

glaubst du wir suchen deinen code durch um zu gugen was falsch sein könnte ? ^^

Info: es gibt kein height: 100%

[Gast michaeljomarron]

OMG ^^ Ja der Fehler ist doch offensichtlich, meine Homepage wir im Firefox anders als im IE7 angezeigt. Beim Firefox hört der weiße Hintergrund (bg.gif) einfach auf und es geht grau weiter. So das ist mein Problem : ) Bitte schaue dir mal den Hirt-Edv Link an (aber erst mit dem IE und dann mit dem Firefox) Danke für deine Hilfe !

Gruß

Michael

Bearbeitet 19. März 2009 von michaeljomarron

[unbenannt]

Reicht ein Thema nicht?

Info: es gibt kein height: 100%

Naja, das gibt es schon. Wenn aber das Eltern-Element keine festgelegte Größe besitzt ist dies absoluter Unsinn und abhängig von der Interpretation des Browsers. FF nimmt dann halt die Größe des sichtbaren Fensterbereichs, der IE die Größe des gesamten Dokumentes.

Abgesehen davon verrät übrigens CSS4you den Hauch einer Lösung. Google ebenfalls.

[netsation]

Hallo Zusammen,

also wenn ich mir die Seite so anschaue würde ich mal vermuten das du vergessen hast dein float auch wieder zu clearen, könnte es vielleicht daran liegen?

Nach deiner Div rightbar würde ich mal ein clearer einbauen!

Und dann würde ich noch schauen das ich die W3C Probleme rausbekomm

Liebe Grüße

[azett]

Nimm mal die height-Angabe für HTML und BODY raus und gib dem DIV statt der 100% lieber

height: inherit;

Wenn der Inhalt höher ist als der darstellbare Bereich, sind HTML und BODY sowieso so hoch wie der gesamte Inhalt; "height:100%" ist also nicht nur unnötig, sondern sorgt erst für dein Problem: 100% wird als "100% des darstellbaren Bereichs" interpretiert.

Das DIV erbt die Höhe seines Elternelements BODY dank inherit.

Bearbeitet 20. März 2009 von azett