✔ 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:
http://www.2ndrb.de/ga-town/index.php

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.

 

[Maik]

Hi,

positionier #navioben_content relativ mit der gewünschten Startposition von oben, anstelle des oberen Außenabstandes:

#navioben_content {
position:relative;
top:16px;
text-align:center;
margin-top:0px;
margin-left:555px;
margin-right:45px;
/*padding: 0px;*/
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;

}

Ansonsten müsste die Box #container absolut positioniert aus dem normalen Textfluß genommen werden, damit sie wegen der margin-top:16px-Deklaration nicht nach unten gezogen wird.

mfg Maik

 

[Kumaro]

Hi Danke aber irgendwie ändert das nichts. Die kleine navi oben rechts steht dann zwar richtig aber der allgemeine container div ist immer noch nach unten verschoben und nicht am oberen rand ausgerichtet
Und zwischen der eigentlichen navi und dem inhalt (content) ist immer noch ein absatz.

 

[Maik]

Das geht sehr wohl, du hast blos meinen Vorschlag falsch umgesetzt, denn wie's jetzt im Stylesheet steht, hab ich dir so nicht empfohlen.

mfg Maik

 

[Kumaro]

Also ich bin auch gerade am rumprobieren... Aber wenn
position:relative;
top:16px;
bei navicontent mit reinnehme - hast du zwar recht die navi ist dann richtig - aber der gesamte container ist dann immer noch nicht am oben ausgerichtet da ist immer noch nen leerraum genau wie zw der hauptnavi und dem content.

Ich hoffe du weißt was ich meine.
Das Grundproblem ist demnach nicht das die kleine navi oben rechts verrutscht ist sondern der ganze header nach unten geutscht ist.

 

[Maik]

Gleiches gilt auch für #navi_content.

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

}

Ansonsten kann ich bei mir im FF keine weiteren Verschiebungen nach unten entdecken.

mfg Maik

 

[Kumaro]

Erst mal danke dass du mir hilfst.

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

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

 

[Maik]

2 Bilder sagen mehr als 1000 Worte:



(links: FF3.0.4, rechts: IE7 - OS: WinXP)

Im Anhang findest du die CSS-Datei, in der ich meine beiden bereits gezeigten Vorschläge für #navioben_content und #navi_content eingesetzt, und wie in den Screenshots deutlich zu erkennen, browserübergreifend erfolgreich getestet habe.

mfg Maik

 

[Kumaro]

Hi Maik du bist mein Held . Es funktioniert wirklich. SUPER DANKE!

Ich muss mir das jetzt noch mal angucken was du gemacht hast denn anscheinend habe ich wirklich nicht genau das gemacht was du gesagt hast - obwohl ich das wirklich dachte.

Aber eine Frage noch was heißt denn der auszug:
* {
margin:0;
padding:0;
}

Also wofür steht der Stern ( * ) ?

 

[Maik]

Moin,

* ist der Universalselektor, der alle im HTML-Dokument enthaltenden Elemente einbezieht.

mfg Maik