Firefox Darstellungsprobleme-HELP

[Kumaro]

Hi ich habe folgendes Problem und hoffe ihr könnt mir helfen. Ich habe mir schon einiges über Doctype-switching angeschaut aber es will irgendwie nichts funktionieren und ich weiß nicht mehr weiter.
Es geht um folgede Seite:



Beim IE7 wird alles so angezeigt wie es sein soll und beim Firefox rutscht der Header um einige pixel nach unten wobei dann die kleine navi rechts oben in der ecke auf gleicher höhe bleibt und somit aus dem header rutscht. Und zwischen header und mitllerer navi (roter balken) entsteht ein eine Absatz wo eigentlich keiner ist.

Hier noch die css angaben:

body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
/*padding:0px;*/
margin:0px;
margin-top:0px;
}
.navobenlink {
color:#FFFFFF;
text-decoration: none;
font-size: 12px;
}
.navobenlink:visited {
color:#FFFFFF;
text-decoration: none;
}
.navobenlink:hover {
color: #ef7e16;
text-decoration:none;
}
.navobenlink:active {
color:#ef7e16;
text-decoration: none;
}
h1 {
color:#FFFFFF;
font-size: 14px;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
background-color:#bb2c0c;
/*border-top:2px solid #FFFFFF;
border-bottom:2px solid #FFFFFF;*/
padding:5px 15px;
margin:0px;
}
h2 {
font-size:14px;
font-weight:bolder;
padding: 5px 10px;
margin:0px;
color:#999999;
}
img.download {vertical-align:middle;}
/* ----------container zentriert das layout-------------- */
#container {
width: 886px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
background-color:#f3e5c8;
}
/* ----------banner for logo-------------- */
#banner {
/*background-color: #e1ddd9;*/
background-image:url(Bilder/layout_13.12.08_02.jpg);
text-align: right;
padding: 0px;
margin: 0px;
margin-top:0px;
height: 259px;
}
#navi {
background-color: #e1ddd9;
background-image:url(Bilder/layout_13.12.08_03.jpg);
text-align: right;
/*padding: 0px;*/
margin: 0px;
height: 34px;
}
#navi_content {
text-align:left;
margin-top:8px;
/*padding: 0px;*/
margin-left: 160px;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#navioben {
background-color: #e1ddd9;
background-image:url(Bilder/layout_13.12.08_01.jpg);
text-align: right;
/*padding: 0px;*/
margin: 0px;
height: 36px;
}
#navioben_content {
text-align:center;
margin-top:16px;
margin-left:555px;
margin-right:45px;
/*padding: 0px;*/
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
/* -----------------Inhalt--------------------- */
#content {
background-color: #f3e5c8;
/*padding: 0px;
padding-left:0px;*/
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
float:left;
width: 651px;
height: 758px;
}
/*#externcontent {
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
float:left;
width: 500px;
height: 500px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}*/
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
p, pre{
padding: 5px 10px;
margin:0px;
}
/* --------------right navigavtion------------- */
#navirechts_login {
float: right;
width: 220px;
margin-left: 15px;
margin-top: 5px;
padding: 0px;
}
#navirechts_nextevents {
float: right;
width: 220px;
margin-left: 15px;
margin-top: 150px;
padding: 0px;
}
#navirechts {
float: right;
width: 235px;
height:761px;
margin: 0px;
margin-top: 0px;
padding: 0px;
background-image:url(Bilder/layout_13.12.08_05.jpg);
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right;
background-image:url(Bilder/layout_13.12.08_06.jpg);
height:45px;
width:886px;
}

So ich hoffe ihr könnt mir helfen und sagen wo das Problem liegt.
Danke im vorraus.

 

[waterwebdesign]

AW: Firefox Darstellungsprobleme-HELP

Wenn du dir deinen HTML-Code mal anschaust, solltest du merken, dass du quasi 2 HTML Dateien da drin hast, wobei die erste nichtmal vernünftig begonnen wurde.
Ausserdem solltest du versuchen deinen Code schlank zu halten, wenn du für deinen Login-Bereich eine spezielle ID anlegst, brauchst du in dieses Div doch kein weiteres zu legen, nur um den inhalt zu zentrieren.

 

[Kumaro]

AW: Firefox Darstellungsprobleme-HELP

Sorry aber was meinst du damit? Wieso hab ich zwei html datein?

 

[waterwebdesign]

AW: Firefox Darstellungsprobleme-HELP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
...
</head>
<body>
...
<!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">
<head>
...
</head>
<body>
...
</body>
</html>
...
<!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">
<head>
...
</head>
<body>
...
</body>
</html>

Ich habe lediglich mal den Inhalt aus deinem Quellcode entfernt. Herausgekommen ist ein unvollständiger HTML-Bereich (braun), und zwei vollständige Bereiche (blau und grün). Ich denke da ist dir beim includieren mit PHP ein Fehler unterlaufen.

Ausserdem sind 3 Doctypes angegeben, in zwei Varianten. Solange du kein XML verwendest, brauchst du es auch nicht zu deklarieren.

 

[Kumaro]

AW: Firefox Darstellungsprobleme-HELP

Oh .. ja das muss ich mir noch mal angucken danke.
ABER ich glaube das ist nicht Grund für mein Problem

 

[stb_87]

AW: Firefox Darstellungsprobleme-HELP

Dein Problem könnte u. a. das Boxmodell sein:
CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell

 

[Kumaro]

AW: Firefox Darstellungsprobleme-HELP

Noch mal zur Verdeutlichung:
http://www.2ndrb.de/ga-town/loch.jpg

Da unter anderem passt es nicht.

Ich kann alle abstände so regulieren das sie im FF passen dann sind sie aber komplett im IE7 verschoben

WIe bekomm ich es hin das es im IE und im FF passt??????

edit: Und was genau ist da das Problem? ich raffs nicht sorry

 

[stb_87]

AW: Firefox Darstellungsprobleme-HELP

Die Innen (padding) und Außenabstände (margin) sind das Problem.

Die werden von den Browsern unterschiedlich interpretiert, insbesondere vom IE, diverse Versionen.

Um dem vorzubeugen kannst du u. a. IE-Hacks einsetzen.

star-Hack für IE6 und star-plus-Hack für den IE7.

Die dinger sind effektiver als Browserweichen (eigene Erfahrung)

Mach dich da mal schlau. Darüber schwirren genug Infos im Internet rum. Da wirst du garantiert fündig und findest auch eine vernünftige Erklärung und Tuts darüber.

 

[Kumaro]

AW: Firefox Darstellungsprobleme-HELP

ok das ist doch mal nen wort danke ich werd mich mal schlau machen.

 

[DonUndertaker]

AW: Firefox Darstellungsprobleme-HELP

Hier bei dieser Stelle ist dein Fehler:

#navi_content {
position:relative;
/*top:8px;*/
text-align:left;
margin-top:8px;
/*padding: 0px;*/
margin-left: 160px;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;

}

Mach das margin-top:8px; weg.

 

[Kumaro]

AW: Firefox Darstellungsprobleme-HELP

Hi danke ich habs jetzt, das war unter anderem ein Problem.