nicht angemeldet
Problem mit Firefox
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?!
-
Hi,
Allerdings macht Firefox hier Probleme.
weil er sich an den Standard hält.
Zum Beispiel height:100% scheint nicht zu funktionieren.
doch - wenn Du die Höhen aller Elternelemente mit berücksichtigst.
XHTML Code:
eine online zur Verfügung gestellte Seite würde die Hilfe sehr erleichtern.
Ü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?!Validität ist _ein_ Kriterium, aber auch eine valide Seite kann unsinnige Definitionen enthalten.
freundliche Grüße
Ingo-
Hi,
Allerdings macht Firefox hier Probleme.
weil er sich an den Standard hält.Hmm... und wie soll ich einen Standard erreichen wenn der W3C Validator nur ein Kriterium ist? Was ist denn dann "der" Standard, wenn es nicht valider Code ist?
Und unnötigen Code kann ich in meiner CSS nicht finden. Zumindest soweit ich das sehe, habe aber auch gerade erst angefanfen mit css.
Allerdings wird jede Angabe gebraucht damit es in IE so aussieht wie es aussehen soll.Hier mal die Seite
http://www.mynetcologne.de/~nc-seuberka2/Danke im voraus für jede Hilfe.
-
Hi,
Hmm... und wie soll ich einen Standard erreichen wenn der W3C Validator nur ein Kriterium ist? Was ist denn dann "der" Standard, wenn es nicht valider Code ist?
Der Validator kann nur die Syntax prüfen. Das ist so, als wenn ein Aufsatz von Dir lediglich durch eine Rechtschreibprüfung geht. Den Standard kannst Du unter http://www.w3.org/TR/CSS21/ nachlesen.
Und unnötigen Code kann ich in meiner CSS nicht finden. Zumindest soweit ich das sehe, habe aber auch gerade erst angefanfen mit css.
Es ist eher der HTML-Code; nur ein paar Beispiele:
<div id="header1"><img src="X" width="100%" height="100%" alt="X" /></div>
Das DIV ist übrflüssig.<div id="menu1"><a href="" ><b>Startseite</b></a></div>
Dieses DIV ist nicht nur überflüssig, sondern auch unpassend. Und wozu die vielen unterschiedlichen IDs?Allerdings wird jede Angabe gebraucht damit es in IE so aussieht wie es aussehen soll.
Nicht wirklich. Wenn Du Dein HTML vernünftig umstrukturierst, solltest Du auch im CSS einiges vereinfachen können.
http://www.mynetcologne.de/~nc-seuberka2/
Ich habe hier einmal sämtliche height-Angaben rausgenommen und es dürfte keine Probleme geben. Wozu sollte der Seiteninhalt auf 100% aufgezogen werden?
freundliche Grüße
Ingo
-
-