nicht angemeldet
Hallo zusammen,
ich habe das Layout einer Web-Seite nicht mit Tabellen, sondern mit Ebenen erstellt. Die Ebenen werden im IE korrekt angezeigt. Lediglich der Titel wird nicht vertikal zentriert, obwohl 'vertical-align:middle' gesetzt wurde.
Betrachtet man die Seite in Firefox bzw. Netscape wird fast nichts mehr korrekt angezeigt. :-(
Die CSS-Datei ist wie folgt aufgebaut:
body {
margin:10px;
padding:0px;
background-color:#E5E5E5;
color:#000000;
}
#mainframe{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:900px;
background-color:#7F9DB9;
border: #006699 1px solid;
margin-left:auto;
margin-right:auto;
}
#header{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#006699;
height:60px;
margin-left:auto;
margin-right:auto;
}
#header h1{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 14pt;
font-weight: bold;
color: #ffffff;
background-color : transparent;
vertical-align:middle;
}
#subframe{
margin: 0px 0px 0px 0px;
padding:2px 2px 2px 2px;
width:896px;
background-color:#ffffff;
}
#navigation{
margin: 0px 0px 0px 0px;
padding:2px 2px 2px 2px;
width: 200px;
background-color:#ffffff;
float:left;
}
#content{
margin: 2px 0px 0px 0px;
padding:5px 5px 5px 5px;
width: 680px;
height:500pX;
background-color:#EFEFEF;
color:#000000;
border: #006699 1px solid;
float:right;
}
#content p{
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}
#navigation a:link {
display:block;
width:182px;
background-color: white;
color: black;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
text-decoration:none;
margin: 2px 2px 2px 2px;
padding:6px 6px 6px 6px;
border: #006699 1px solid;
}
#navigation a:visited {
display:block;
width:182px;
background-color: white;
color: black;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
text-decoration:none;
margin: 2px 2px 2px 2px;
padding:6px 6px 6px 6px;
border: #006699 1px solid;
}
#navigation a:active {
display:block;
width:182px;
background-color: white;
color: black;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
text-decoration:none;
margin: 2px 2px 2px 2px;
padding:6px 6px 6px 6px;
border: #006699 1px solid;
}
#navigation a:hover{
display:block;
width:182px;
background-color : #EFEFEF;
color : black;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
font-weight:normal;
text-decoration:none;
margin: 2px 2px 2px 2px;
padding:6px 6px 6px 6px;
border: #006699 1px solid;
}
Die Web-Seite wie folgt:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainframe">
<div id="subframe">
<div id="header">
<h1>Titel</h1>
</div>
<!-- Navigation -->
<div id="navigation">
<a href="">Schaltfläche 1</a>
<a href="">Schaltfläche 2</a>
</div>
<!-- Content -->
<div id="content">
<p>
Content
</p>
</div>
</div>
</div>
</body>
</html>
Da ich schon mehrere Tage an der Lösung des Problems sitze, würde ich mich über einen Tipp freuen.
DANKE!