Layoutproblem beim IE mit css

Status
Nicht offen für weitere Antworten.
T

Tream84

Grünschnabel
Hi Leute,
ich lerne grade css und habe folgendes Problem.

http://www.flex3test.de

Hier sieht man im FF alles richtig. Wenn man das ganze mit dem IE öffnet sieht der Header komisch aus. Was mache ich falsch?

Mein Header ist folgendermaßen aufgeteilt:

http://www.flex3test.de/pics/problem.jpg

Mein Css File
PHP: 
	body
	{
		margin: 0;
		padding: 0;
		text-align: center;
		font: 70%;
		font-family:tahoma;
		background-color: #BAB798;
		color: #000000;
	}
	
	#container
	{
		margin: 1em auto;
		width: 895px;
		height: 500px;
			
	}
	#header
	{
	   height: 216px;
	   background-color: #D5D3AD;
  }
	#headerTop
	{
		height: 38px;
		background-image: url('../pics/header_top.gif');		
		background-repeat: no-repeat;
	}
	#headerRight
	{
	  float: right;
	  width: 298px;
	  height: 101px;
		background-image: url('../pics/header_right.gif');		
		background-repeat: no-repeat;
  }
	#headerLeft
	{
	  width: 597px;
	  height: 101px;
		background-image: url('../pics/header_left.gif');		
		background-repeat: no-repeat;
  }
	#headerButtom
	{
	  height: 77px;
		background-image: url('../pics/header_buttom.gif');		
		background-repeat: no-repeat;
  }
	#left
	{
   	height: 471px;
		background-image: url('../pics/left.gif');	
		background-repeat: no-repeat;
	}
	#right
  {
    float: right;
    width: 590px;
    height: 471px;
		background-image: url('../pics/right.gif');		
		background-repeat: no-repeat;
	}
	#contents
	{
	  text-align: left;
	  margin-left: 20px;
	  margin-top: 20px;
  }

Meine html Seite
PHP: 
<html lang="en" xml:lang="en" version="-//W3C//DTD HTML 4.0//EN">

<head>
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">

    <div id="headerTop">
    </div> 
    <div id="headerRight">
    </div> 
    <div id="headerLeft">
    </div> 
    <div id="headerButtom">
    </div> 

  <div id="right">
  </div>
  <div id="left">
  </div>
</div>
  
</body>

Bitte um Rat. Ich weiß nicht genau wie man 2 backroundimages nebeneinander stellt.
 
meinst du in der html oder css Datei?
Kannste mir den Standard DocType nennen? In den Tutorials ist mir sowas garnicht aufgefallen
 
Der Doctype hängt natürlich davon ab, nach welcher Vorgabe du codest.

Ersetze deine erste Zeile des HTML-Documents damit für Trans

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
oder damit für Strict:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

und dann starte mit <html>

Doctypes

Ohne einen solch qualifizierten Doctype kann der IE das Boxmodell nicht richtig darstellen.
 
Hi,

verwende mal dieses Markup:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel der Seite</title>
<link href="/css/layout.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
    <div id="headerTop"></div>
    <div id="headerLeft"></div>
    <div id="headerRight"></div>
    <div id="headerButtom"></div>

    <div id="right"></div>
    <div id="left"></div>
</div>

</body>
</html>
und ergänze das Stylesheet folgendermaßen, damit der IE die Boxen #headerLeft und #headerRight nebeneinander ausrichtet:

Code: 
#headerRight {
          float: right;
          width: 298px;
          height: 101px;
          background-image: url('../pics/header_right.gif');
          background-repeat: no-repeat;
          margin-left:0 !important;
          margin-left:-3px;
}

#headerLeft {
          float: left;
          width: 597px;
          height: 101px;
          background-image: url('../pics/header_left.gif');
          background-repeat: no-repeat;
          margin-right:0 !important;
          margin-right:-3px;
}

#headerButtom {
          clear:both;
          height: 77px;
          background-image: url('../pics/header_buttom.gif');
          background-repeat: no-repeat;
}
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück