IE 5 Problem

Status
Nicht offen für weitere Antworten.
D

Davinho

Grünschnabel
Hi, versuche mich grad im Bau einer Homepage. Im Firefox und im IE7 klappt alles ohne Problem, aber im IE 6 zeigt der mir alle Boxen untereinander an. Wie bekomme ich das hin das es auch unter dem IE6 läuft?
Über Hilfe wäre ich sehr froh!

Code: 
body  {
	font: 12px Verdana;
	background: #0000cc;
	margin: 0
	text-align: center; 
	color: #000000;}
#container { 
    width: 890px;
	height:550px;
	background-color:#FFFFFF;    	
	margin:2% auto; 
	margin-bottom:2px;
    border: 0px solid #000000;
    text-align: left; } 
#header {
	height:130px;
    background: #0000CC;
		    } 
#header h1 {
    margin: 0;
    padding: 0 0;}
#AC {
    float: left;
    width: 200px;
	height:130px;
   	background: #ffffff; }
#Headbild {
	width:690px;
	height:70px;
	margin-left: 200px;} 
#headmenu {
	width:690px;
	height:28px;
	margin-left: 200px;
    padding: 5px 0px;
	background-color:#0000CC} 
#headmenu2 {
	width:690px;
	height:22px;
	margin-left: 200px;
	background-color:#0099FF;} 
#sidebar1 {
	float: left; 
	width: 175px;
	height:395px;
	padding-right: 30px;
	background-color:#FFFFFF;}
#sidebarx {
	background-color:#FFFFFF;
	width:175px;
	margin-left:7.5%;
	margin-top:190%; }
#mainContent {
	width:655px;
	height:365px;
	margin: 20px 0 0 0px;
	padding-right:28px;
	overflow:auto;
	background-color:#FFFFFF;} 
#footer {
	height:20px;
    padding: 10px 10px 0 20px;
	background:#0000cc; } 
#footer p {
    margin: 0;
    padding: 10px 0;}
.Hauptmenu {
	font-size: 12px}
.Untermenu {
	font-size: 10px}
.Stileu {
	text-align:center;
	font-size:9px;
	color:#FFFFFF;}
.stilel {
	text-align:center;
	font-size:9px;
	color:#0000FF;}
.stilemain{
	text-align:justify;
	font-size:11px;}

.fltrt {
    	float: right;
    	margin-left: 8px;}
.fltlft {
    	float: left;
    	margin-right: 8px;}
.clearfloat {
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;}
.Stil1 {
	color: #FFFFFF;}
ul#Navigation {
	padding: 2px;
	background-color: #0000CC;
	margin: 5px;} 
ul#Navigation li {
	list-style: none;
	display: inline;}
ul#Navigation a, ul#Navigation span {
	padding: 12px 22px;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #0000CC;
	text-align: left;}
* html ul#Navigation a, * html ul#Navigation span { 
	width: 1em;
	width: auto;}
ul#Navigation a:hover, ul#Navigation span {
	color: white;
	background-color: #0099FF;
	padding-top:12px;
	padding-bottom:12px;}
ul#Navigation2 {
	margin: 0px;
	padding: 5px;
	background-color: #0099FF;} 
ul#Navigation2 li {
	list-style: none;
	display: inline;}
ul#Navigation2 a, ul#Navigation2 span {
	padding: 5px 28px;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0099ff;}
* html ul#Navigation2 a, * html ul#Navigation2 span { 
	width: 1em;
	width: auto;} 
ul#Navigation2 a:hover, ul#Navigation2 span {
	color: white;
	background-color: #0000cc;
	padding-top:5px;
	padding-bottom:5px;}
HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="ACHomeu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
      <div id="header">
          <div id="AC"><img name="" src="" width="200" height="140" alt="" /></div>    
    <div id="Headbild"><img name="" src="" width="690" height="70" alt="" style="background-color: #FFFFFF" /></div>
<div id="headmenu">
  <ul class="Hauptmenu" id="Navigation">
  <li><a href="Menüe.html">Menüe</a></li>
  <li><a href="Menüe.html">Menüe</a></li>
  <li><a href="Menüe.html">Menüe</a></li>
  <li><a href="Menüe.html">Menüe</a></li>
  <li><a href="Menüe.html">Menüe</a></li>
  <li><a href="Menüe.html">Menüe</a></li>
 </ul>
</div>
<div id="headmenu2">  
<ul class="Untermenu" id="Navigation2">

 </ul></div>
  </div>
      <div id="sidebar1">
 <div id="sidebarx" class="stilel"> 
 <p><a href="AChome.html"><img src="Bilder/deutschland.gif" alt="" width="28" height="12" class="Stil1" /></a><a href="englisch/AChome.html">  <img src="Bilder/grossbritannien.gif" alt="" width="28" height="12" class="Stil1" /></a>      </p>
      <p><a href="Impressum.html" class="stilel">Impressum</a>|<a href="sitemap.html" class="stilel">Sitemap|</a>Disclaimer</p>
      </div>
      </div>
      <div class="stilemain" id="mainContent">
        <p><strong>Text </strong><strong>Text </strong><strong>Text </strong><strong>Text </strong><strong>Text </strong><strong>Text </strong><a href="file:///C:/Dokumente%20und%20Einstellungen/David/Desktop/HP/ACHome.html#"></a></p>
        <p>&nbsp;</p>
        <blockquote>
          <div></div>
        </blockquote>
  </div>
<br class="clearfloat" />
      <div id="footer" class="Stileu">
    Text
  </div>
</div>
    </body>
</html>
 
Hi,

setz mal dieses Stylesheet für den Header- und Content-Bereich ein, um den "3px-Gap-Bug" im IE zu fixen, der dafür verantwortlich ist, dass die Elemente nach unten umgebrochen werden:

Code: 
#AC {
    float: left;
    width: 200px;
        height:130px;
           background: #ffffff;
           margin-right:0 !important; /* !important-Regel gilt für moderne Browser */
           margin-right:-3px; /* IE6 */
}
 
#Headbild {
        width:690px;
        height:70px;
        margin-left: 200px !important; /* !important-Regel gilt für moderne Browser */
        margin-left:197px; /* IE6 */
}
   
#headmenu {
        width:690px;
        height:28px;
        margin-left: 200px !important; /* !important-Regel gilt für moderne Browser */
        margin-left:197px; /* IE6 */
    padding: 5px 0px;
        background-color:#0000CC}

#headmenu2 {
        width:690px;
        height:22px;
        margin-left: 200px !important; /* !important-Regel gilt für moderne Browser */
        margin-left:197px; /* IE6 */
        background-color:#0099FF;}

#sidebar1 {
        float: left;
        width: 175px;
        height:395px;
        padding-right: 30px;
        background-color:#FFFFFF;
        margin-right:0 !important; /* !important-Regel gilt für moderne Browser */
        margin-right:-3px; /* IE6 */
}

#sidebarx {
        background-color:#FFFFFF;
        width:175px;
        margin-left:7.5%;
        display:inline; /* fixt den "Double-Margin-Bug" im IE */
        margin-top:190%; }
#mainContent {
        width:655px;
        height:365px;
        margin: 20px 0 0 0px !important; /* !important-Regel gilt für moderne Browser */
        margin:20px 0 0 -3px; /* IE6 */
        padding-right:28px;
        overflow:auto;
        background-color:#FFFFFF;}
Ich weiss jetzt nicht, ob bei dir im HTML-Dokument grundsätzlich eine Doctype-Deklaration und das <html>-Element fehlen, oder ob diese Zeilen unterwegs bei der Übertragung ins Forum verloren gegangen sind.
 
Indem du im body-Selektor nach der margin-Deklaration das fehlende Semikolon hinzufügst. Das hat nämlich derzeit zur Folge hat, dass die beiden nachfolgenden Eigenschaftsangaben innerhalb dieses Regelblocks vom Browser ignoriert werden, und dazu zählt u.a. die Eigenschaft text-align:center, mit der der IE5, oder der IE6 im Quirksmode, die Box #container im Anzeigebereich horizontal zentriert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück