CSS Problem mit FF / IE

**viril** · 14.08.2007 22:17

Hallo zusammen,

ich habe gerade ein Problem mit unterschiedlicher Darstellung meiner Seite im Fierefox und im Internet Explorer 6

Mein Problem:
Ich habe zwei Hintergrundbilder die sich über die Gesamte Seite erstrecken, in der Mitte ein Div das ebenfalls zwei Hintergründe erhalten soll.
Ich möchte damit einen schönen Farbverlauf hinbekommen.

So soll das ganze aussehen: (screenshot)

Mein HTML Code:

Code:

<body>
<!-- BOX 100% -->
<div id="box1">
 <div id="box2">
<!-- SITE 934 px w -->
  <div id="wrap">
   <div id="wrap1">
    <div id="wrap2">
<!-- SITE HEAD 210 px h -->
	 <div id="top">

	  <div id="top1">
	   <div class="nav1"></div>
	  </div>
	  <div>
	   <!--<div id="logo"></div>-->
	   <div id="suche"></div>
	   <div id="nav2"></div>
	   <div id="nav3"></div>
	  </div>
	 </div>
<!-- SITE BODY (CENTER) -->
     <div id="center">
	  <div id="left">
	  </div>
	  <div id="content">
	  </div>
      <div id="end">
	  </div>
	    <div id="footer"></div>
	 </div>
<!-- ENDE SITE BODY (CENTER) -->
    </div>
   </div>
<!-- END SITE -->
  </div>
<!-- FOOTER 28 px h -->
 </div>
</div>

</body>

Und meine CSS

Code:

html, body {
	font-family: tahoma, arial;
	font-size: 1em;
	color: #000000;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	width:auto;
}
#box1 {
	height: 100%;
	width: 100%;
	background-image: url(../images/bg-top.gif);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #CDE6F3;
	float: left;
}
#box2 {
	height: 100%;
	width: 100%;
	background-image: url(../images/bg2.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	float: left;
}
#top {
	width: 934px;
	height: 250px;
}
#wrap1 {
	width: 934px;
	margin-right: auto;
	margin-left: auto;
	background-color: transparent;
	background-image: url(../images/top.jpg);
	background-repeat: no-repeat;
	background-position: top;
	min-height: 800;
}
#wrap2 {
	width: 934px;
	margin-right: auto;
	margin-left: auto;
	background-color: transparent;
	background-image: url(../images/content-footer.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	min-height: 800;
}
#wrap {
	width: 934px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/bg-contend.gif);
	background-position: right;
}
#footer {
	margin-right: auto;
	margin-left: auto;
	height: 28px;
	width: 934px;
	background-image: url(../images/Ftr_BG_reflec.jpg);
	float: left;
}
#top1 {
	height: 28px;
	width: auto;
	background-image: url(../images/Hdr_BG_full.png);
	background-repeat: no-repeat;
}
#top #nav2 {
	width: 934px;
	float: left;
	height: 80px;
	text-align: center;
}
#top #suche {
	width: 300px;
	float: right;
	margin-top: 20px;
	margin-right: 50px;
}
#center {
	width: 934px;
	min-height: 600;
}
#center #left {
	width: 150px;
	min-height: 600;
}
#center #content {
	float: right;
	width: 784px;
}
#top #nav3 {
	width: 934px;
	float: left;
	height: 40px;
}
#end {
	width: 934px;
	position: fest;
	clip: rect(auto,auto,0px,auto);
	height: 250px;
}

Im IE klappts das wunderbar! im Firefox überlappen die Bilder, beim ändern der Fenstergröße bekomm ich nen "leeren" (weissen) Bereich unterhalb der Seite und die "min-height" ist total egal ....

ich habe auch schon Tricks wie:

Code:

{
	height: auto!important;
	height: 500px;
}

Versucht, jedoch ohne Erfolg....

Bitte, helft mir !!!

**His.Master's.Voice** · 14.08.2007 23:30

Zitat von viril

"min-height" ist total egal ....

Ich glaube du möchtest eine 100% Höhe oder...?

http://tp.webcreate-nrw.de/index.php...mit-100-hoehe/

**viril** · 15.08.2007 12:49

ja, das bringt mich schonmal weiter, vielen dank!

geht das auch mit 2 DIV´s ineinander damit ich jedem einen eigenen Hintergrund verpassen kann?

habs eben versucht, im IE klappt es, im FF allerdings wir nur eine Ebene bzw. ein Hintergrund angezeigt.

Code:

<!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>
<title> 100% DIV </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{
	font-size: 100.01%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	height:100%;
	background-color: #CEE6F3;
}
#box1{
	min-height: 100%;
	height: auto !important;  /* für moderne Browser */
	height: 100%;  /*für den IE */
	width: auto;
	text-align: center;
	background-image: url(images/bg-top.png);
	background-repeat: repeat-x;
	background-position: top;
	background-color: transparent;
}
#box2{
	min-height: 100%;
	height: auto !important;  /* für moderne Browser */
	height: 100%;  /*für den IE */
	width: auto;
	text-align: center;
	background-image: url(images/bg-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: transparent;
}
</style>
</head>
<body>
<div id="box1">
 <div id="box2">
 </div>
</div>
</body>
</html>

zur Startseite vom TP

Thema: CSS Problem mit FF / IE

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

CSS Problem mit FF / IE

Aktive Benutzer

Aktive Benutzer