Hallo.
Habe hier ein Problem mit meiner Website. Im Internet Explorer
wird alles so dargestellt wie es soll. Allerdings macht Firefox hier Probleme. Zum Beispiel height:100% scheint nicht zu funktionieren.
Ich weiss nicht mehr weiter. Ich habe jetzt 3 mal das Design ziemlich weit vorne wieder neu angefanfen. Aber das Ergebniss ist immer wieder das selbe.
Ich weiss echt nicht mehr weiter und bräuchte da eure Hilfe, ich weiss nicht mehr woran es liegen könnte.
XHTML Code:
<!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="de" lang="de">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="20 days" />
<meta name="description" content="Noch benötigt" />
<meta name="keywords" content="Noch benötigt" />
<meta name="author" content="X" />
<meta name="author-mail" content="X" />
<meta name="generator" content="Phase 5.3" />
<link rel="stylesheet" href="_css/template.css" type="text/css" title="Default Style" />
</head>
<body>
<div class="container">
<div id="header1"><img src="X" width="100%" height="100%" alt="X" /></div>
<div id="header2"><b>Mustername<br />Musterstrasse 55<br />55555 Musterstadt</b><br />
<a href="http://link2.map24.com/?lid=2b0f3920&maptype=JAVA&width0=1000&zip0=55555&city0=Musterstadt;country0=DE&description0=Hier+finden+Sie+uns&street0=Muster+Str.+555" target="_blank">
<img src="_img/map.gif" alt="Hier erhalten Sie eine Wegbeschreibung" width="11%" height="20%" style="margin-left:6px; margin-top:5px;" /></a><sup> (Wegbeschreibung)</sup></div>
<div id="contents"><div style="margin-left:10px;"></div></div>
<div id="menu1"><a href="" ><b>Startseite</b></a></div>
<div id="menu2"><a href="_html/tipps.html" ><b>Büchertipps</b></a></div>
<div id="menu3"><a href="mailto:info@muster.de"><b>Kontakt</b></a></div>
<div id="menu4"><a href="_html/kram.html"><b>Kramkiste</b></a></div>
<div id="menu5"><a href="_html/imp.html"><b>Impressum</b></a></div>
<div id="login"><b> Login<br /></b>
<form id="log" method="post" action="_php/login.php" class="eingabefeld" />
<label>Benutzername</label><input type="text" id="Name" name="Name" class="eingabefeld" /><br />
<label>Passwort </label><input type="password" id="pass" name="Passwort" class="eingabefeld" /><br />
<input type="submit" value="Senden" id="submit" class="submitbutton" /></div>
<div id="partner"><b>Partner</b></div>
<div id="partnerlogo"><a href="http://www.muster.de"><img src="_img/partner.gif" alt="X" width="70%" /></a></div>
<div id="footer"><a href="http://jigsaw.w3.org/css-validator/check/referer/"><img src="_img/css.gif" alt="Valid CSS 2.0!" width="10%" height="65%" align="left" style="margin-right:15px; margin-left:10px; margin-top:3px;" /></a>
<a href="http://validator.w3.org/check?uri=referer"><img src="_img/xhtml.png" alt="Valid XHTML 1.0!" width="10%" height="65%" align="left" style="margin-top:3px; margin-right=40px" /></a>
<sub><font color="#9c6c3e"><b>by Muster</b></font></sub></div>
</div>
</body>
</html>
-------------------------------------------------------------------
css:
body {
margin: 0;
padding: 0;
height: 100%;
font: 85% arial,hevetica, sans-serif;
color: #000000;
background-color: #9DB9C5;
background-image: url(../_img/bg.gif);
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
}
A:link, A:visited, A:active { text-decoration: none}
img {border-width: 0;}
label {background-color: #D9D3A3;}
table, td {border: 1px solid #000000;}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 68%;
height: 100%;
background: #F2EDCF;
}
#header1 {
padding: 0;
margin-top: 0.5%;
margin-left: 0.5%;
float:left;
height: 13%;
width: 23%;
border:1px solid #F2EDCF;
background-color: #E4CDA4;
}
#header2 {
padding-left: 1%;
padding-top: 5px;
margin-top: 1%;
margin-left: 25.3%;
height: 11%;
width: 70.5%;
font-size: 8pt;
color: #9C6C3E;
background-color: #E4CDA4;
border:1px solid #AFBCA0;
}
#contents {
padding-left: 0px;
padding-top: 9px;
margin-top: 1%;
margin-right: 0.7%;
color: #000000;
font-size:12pt;
float:right;
height: 74%;
width: 72%;
background-color: #E4CDA4;
border:1px solid #AFBCA0;
}
#menu1 {
margin-top:1%;
margin-left:1.5%;
width: 22%;
height: 3%;
}
#menu1 a:link, #menu1 a:visited {
display:block;
padding: 7px 10px;
font-size:12px;
line-height:16px;
height:1em;
color: #9C6C3E;
border:1px solid #AFBCA0;
background:#E4CDA4 url(../_img/bhover.gif) bottom right no-repeat;
}
html>body #menu1 a:link, #menu1 a:visited {
height:auto;
}
#menu1 a:hover {
background: #E4CDA4 url(../_img/hover.gif) bottom right no-repeat;
}
#menu2 {
margin-top:0.5%;
margin-left:1.5%;
width: 22%;
height: 3%;
}
#menu2 a:link, #menu2 a:visited {
display:block;
padding: 7px 10px;
font-size:12px;
line-height:16px;
height:1em;
color: #9C6C3E;
border:1px solid #AFBCA0;
background:#E4CDA4 url(../_img/bhover.gif) bottom right no-repeat;
}
html>body #menu2 a:link, #menu2 a:visited {
height:auto;
}
#menu2 a:hover {
background:#E4CDA4 url(../_img/hover.gif) bottom right no-repeat;
}
#menu3 {
margin-top:0.5%;
margin-left:1.5%;
width: 22%;
height: 3%;
}
#menu3 a:link, #menu3 a:visited {
display:block;
padding: 7px 10px;
font-size:12px;
line-height:16px;
height:1em;
color: #9C6C3E;
background:#E4CDA4 url(../_img/bhover.gif) bottom right no-repeat;
border:1px solid #AFBCA0;
}
html>body #menu3 a:link, #menu3 a:visited {
height:auto;
}
#menu3 a:hover {
background-image:url(../_img/hover.gif);
}
#menu4 {
margin-top:0.5%;
margin-left:1.5%;
width: 22%;
height: 3%;
}
#menu4 a:link, #menu4 a:visited {
display:block;
padding: 7px 10px;
font-size:12px;
line-height:16px;
height:1em;
color: #9C6C3E;
background:#E4CDA4 url(../_img/bhover.gif) bottom right no-repeat;
border:1px solid #AFBCA0;
}
html>body #menu4 a:link, #menu4 a:visited {
height:auto;
}
#menu4 a:hover {
background-image:url(../_img/hover.gif);
}
#menu5 {
margin-top:0.5%;
margin-left:1.5%;
width: 22%;
height: 3%;
}
#menu5 a:link, #menu5 a:visited {
display:block;
padding: 7px 10px;
font-size:12px;
line-height:16px;
height:1em;
color: #9C6C3E;
background:#E4CDA4 url(../_img/bhover.gif) bottom right no-repeat;
border:1px solid #AFBCA0;
}
html>body #menu5 a:link, #menu5 a:visited {
height:auto;
}
#menu5 a:hover {
background-image:url(../_img/hover.gif);
}
#login {
margin-top: 2.5%;
margin-left: 1.5%;
padding-left: 7px;
width: 20.7%;
height: 14%;
background-color: #E4CDA4;
border:1px solid #AFBCA0;
font-size: 9pt;
color: #9C6C3E;
}
.eingabefeld {
font-size:11px;
height:2%;
width: 80%;
display:inline;
background-color: #F2EDCF;
}
.submitbutton {
margin-top: 3px;
margin-left: 30px;
font-size:9px;
width: 40%;
}
#partner {
padding-left: 10px;
margin-top:1%;
margin-left:1.5%;
width: 20.4%;
height: 2%;
font-size: 85%;
text-align: left;
color: #9C6C3E;
background-color: #E4CDA4;
border:1px solid #AFBCA0;
}
#partnerlogo {
margin-top: 1%;
margin-left: 1%;
float:left;
width: 23%;
height: 9%;
font-size: 8pt;
color: #9C6C3E;
}
#footer {
padding: 3px;
margin-top: 1%;
margin-left: 1.5%;
clear: both;
font-size: 8pt;
text-align: right;
height: 5%;
width: 95.3%;
background-color: #E4CDA4;
border:1px solid #AFBCA0;
}
Wäre für jegliche Hilfe dankbar.
Übrigens ist die Xhtnml und auch die css Datei valid.
Ich dachte immer wenn dies erfüllt sei, erreicht man höchstmögliche Browserkompatiblität?!