Seite zentrieren - Problem

[Enk]

Hallo zusammen ich habe folgendes problem:

wenn ich meine seite (http://www.boss-art.net)zentriere , rutscht die seite ein wenig nach unten. Die seite ist dann leider nicht mehr "bündig" mit dem hintergrund.

Meine frage: Kann ich die Seite in die mitte mit dem relativ attribut bringen und den abstand von oben mit absolut definieren, oder wie sonst kann ich das problem lösen?

mein code sieht momentan wie folgt aus:

#content{
height: 1450px;
width: 856px;
position: relative;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
top: 0px;
}

 

[miss.moxy]

top: -8px oder so…
Weiß allerdings nicht, ob das Safari, IE & Co richtig interpretieren,
der FF (Mac) tuts…

 

[Enk]

das problem ist das jeder browser das anderst darstellt. ie ist der abstand anderst als im firefox

 

[Enk]

habe es mal gemacht....im firefox funktionierts

doch dieser verflixte internetexplorer...und viele nutzen ihn leider immer noch

 

[miss.moxy]

Dann machst einfach im CSS für den IE eine andere Angabe
Komplexere Seiten haben fast immer Hacks…

 

[miss.moxy]

für den IE6 zB:

#content{
height: 1450px;
width: 856px;
position: relative;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
top: -20px; /*Angabe für IE*/
}

html>body #content{ /*Korrektur- und weitere Angabe */
top: -8px;       /*für die restlichen Browser wie Safari, FF*/

}

 

[Enk]

kannst du mir das ein wenig erklären?

bin noch kein profi mit css

 

[miss.moxy]

alles, was innerhalb html>body … steht, kann
der IE6 nicht interpretieren.

 

[Enk]

danke vielmals für diese tolle auskunft! funktioniert super!

nur würde mich noch interessieren wie das funktioniert:

wieso weiss der firefox dass er den unteren code nehmen muss?

 

[miss.moxy]

Nennt sich Kind-Selektor, die IE-Versionen inkl. V6 können
damit nichts anfangen und ignorieren die Angaben, alle
anderen Browser können das richtig interpretieren, d.h.
alle Browser nehmen erst die obere Angabe und diejenigen,
die html>body nicht ignorieren bekommen noch den korrigierten
Wert, der erste wird dabei überschrieben.

 

[Enk]

ok! Danke vielmals für deine hilfe!

 

[miss.moxy]

gern geschehn

 

[ThaHammer]

* html Angabe ist das Gegenteil, das versteht nur der IE!

z.B.
#content{
height: 1450px;
width: 856px;
position: relative;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
top: -8px;
}

* html #content {
top: -20px; /*Angabe für IE*/
}

 

[miss.moxy]

* html Angabe ist das Gegenteil, das versteht nur der IE!

Ah siehste, das hab ich entweder vergessen oder nicht gewusst
Ich nehm an, bis inkl. Version 6, oder?

 

[Enk]

hehe das gegenteil? ist mir egal mit diesen angaben hats gestummen

 

[2nd]

doch dieser verflixte internetexplorer...und viele nutzen ihn leider immer noch

Das Problem ist in dem Fall nicht der IE, das Problem sitzt vor dem Rechner

Wenn ich das hier beispielsweise sehe

<div id="spickellinks"></div>
<div id="spickelrechts"></div>
<div id="spickelunten"></div>
<div id="spickelunten2"></div>
<div id="unterrerrand"></div>

...wundert mich das indifferente Verhalten der Browser nicht.

Seiten vertikal und horizontal zu zentrieren funktioniert auch ohne Hacks bei bester Semantik und Validität...

2nd

 

[Ak1rA]

wieso weiss der firefox dass er den unteren code nehmen muss?

die browser setzen immer die letze style-angabe um. dh wenn du zb folgenden code nimmst wir die breite der div-layer 20px sein.

div{
width:100px;
height:20px;
...
width:20px;
}

bei den hacks wird das ausgenutzt. da der iex den hack nicht lesen kann nimmt er den die angaben vor dem hack, die besseren browser nehmen die für sie letze angabe: die hack-werte.

 

[Enk]

@2ndreality:
Wie schon gesagt bin kein profi auf diesem gebiet nur was stört dich den an dem code?