✔ Problem mit DIVs bei Firefox und Opera

Status
Nicht offen für weitere Antworten.
M

munsel

Grünschnabel
Hallo Tutorials.de-Community

Ich habe da ein kleines Problem bei der Anzeige meiner Internetpresänz für ein Schulprojekt im Firefox und Opera. DIVs, die eigendlich andere DIVs umschliessen sollen, werden bei diesen beiden Browsern früher geschlossen durch ein Endtag, welches für ein anderes DIV bestimmt war. Im Internet Explorer funktioniert es aber. Hier mal die Seite:klick
MFG Marius
 
Hi,

hier kommen zwei Fakten zum Tragen, dass die Seite in den genannten Browsern unterschiedlich dargestellt wird:

  1. Das CSS-Boxmodell besagt, dass sich die Breite/Höhe eines Elements aus der width/height-, und in deinem Fall der padding-Eigenschaft zusammensetzt. Somit beträgt derzeit beispielsweise die "tatsächliche" Breite des DIVs #content 600px (550px + 2*25px = 600px) und wird daher in den modernen Browsern umgebrochen.
  2. Das Dokument wird ohne Doctype-Angabe im Quirksmode übergeben, und in diesem Darstellungsmodus setzt der IE das CSS-Boxmodell falsch um.

Lösung:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Seite vom Unsel</title>
<link rel="stylesheet" type="text/css" href="CSS/css.css">

</head>
<body>
<div id="wrapper">
  <div id="main">
       <div id="head"></div>
       <div id="menu">
            <ul id="navi">
                <li><a href="index.htm">Home</a></li>
                <li><a href="about.htm">About</a></li>
                <li><a href="schulverlauf.htm">Schulverlauf</a></li>
                <li><a href="impressum.htm">Impressum</a></li>
                <li><a href="disclaimer.htm">Disclaimer</a></li>
                <li><a href="feedback.htm">Feedback</a></li>
            </ul>
       </div>
       <div id="content">
            Willkommen auf er Internetpräsenz von Marius Unsel. Auf den folgenden Seiten werden sie Informationen
            über mich finden...
       </div>
       <div id="footer">&copy; by Marius Unsel</div>
  </div>
</div>
</body>
</html>
Code: 
#menu{
width:250px;
height:470px;
float:left;
position:relative;
background-color:#8a8a8a;
padding-top:30px;
}

#content{
color:#aaaaaa;
padding:25px;
width:500px;
height:450px;
float:right;
position:relative;
background-color:#474747;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück