Unterschiedliche Darstellung

Tobias · 8 Oktober 2007

Hallo

Ich habe eine Frage bezüglich meine DIV-Layouts:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Homepage Titel hier</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="worte, durch, komma, getrennt">
<meta name="description" content="Eine kurze Beschreibung der Seite hier rein">

<style type="text/css">
<!--
body { 
    margin: 4px 4px 12px 4px;
    background-color: #FFFFFF;
    text-align: center;
}


#mainsite {

    width:756px; 

    border: 1px solid #000000;

}

#header {
    width:754px; 
    height:128px; 
    background-color: #CCCCCC; 
    border: 1px none #000000;
}

#menue {
    float: left;
    width:174px; 
    height:440px; 
    background-color: #CCCCFF;
    border: 1px none #000000;
}

#inhalt { 
    float: left;
    width:580px; 
    height:440px; 
    background-color: #FFCCCC;
    border: 1px none #000000;
    text-align: left;
}

#footer {
    clear: both;
    width:754px; 
    height:20px; 
    background-color: #CCCCCC;
    border: 1px none #000000;
}

-->
</style>

</head>

<body>
<div id="mainsite">

<div id="header">Header</div>

<div id="menue">
Navigation hier
<br>
<br>
</div>

<div id="inhalt">
<h1>Inhat Titel h1</h1>
<p>Text text Text text Text text </p>

<h2>Inhat Titel h2</h2>
<p>Text text Text text Text text </p>

<h3>Inhat Titel h3</h3>
<p>Text text Text text Text text </p>

<br>
<br>

</div>
<div id="footer">Unten</div>

</div>
</body>
</html>

Im IE sieht es super aus aber im FF nicht zentriert und rechts ist zwischen Dsign und Border eine ca. 1px weiße breite Streifenseite

--> im FF : http://bildupload.sro.at/a/images/im_ff.jpg (dort seht ihr diesen Streifen )

nichtsgeht · 9 Oktober 2007

Ändere mal den CSS-Bereich wie folgt (rot markiert):

Code:

body { 
    margin: 4px 4px 12px 4px;
    background-color: #FFFFFF;
    text-align: center;
}


#mainsite {
    [COLOR=Red]width:754px; [/COLOR]
    border: 1px solid #000000;
[COLOR=Red]     margin-left: auto;
    margin-right: auto;
}
* html #mainsite {     /* nur für Internet Explorer */
    width:756px;   
}
[/COLOR] 
#header {
    width:754px; 
    height:128px; 
    background-color: #CCCCCC; 
    border: 1px none #000000;
}

#menue {
    float: left;
    width:174px; 
    height:440px; 
    background-color: #CCCCFF;
    border: 1px none #000000;
}

#inhalt { 
    float: left;
    width:580px; 
    height:440px; 
    background-color: #FFCCCC;
    border: 1px none #000000;
    text-align: left;
}

#footer {
    clear: both;
    width:754px; 
    height:20px; 
    background-color: #CCCCCC;
    border: 1px none #000000;
}

Dieses geht allerdings nur, solange du diesen DOCTYPE so lässt. Änderst du diesen, z.B. in STRICT, sieht es schon wieder anders aus.

EDIT: Vergessen, width:754px; rot zu markieren

Unterschiedliche Darstellung

Tobias

Guest

nichtsgeht

Neues Mitglied

Neueste Beiträge