Webseiten in allen Browsern EXAKT gleich darstellen

Ist es möglich relativ umfangreiche Webseiten in allen Browsern (oder zumindest IE 6/7, FF, Opera) exakt gleich darstellen zu lassen?

Mit CSS bekommt man ja schon einiges hin, aber wo ich mir z.b. immer die Zähne ausbeiße sind Abstände zwischen Überschriften, Textabsätzen usw.. Die sind im IE und FF irgendwie immer anders, egal wie sehr man sich mit margins oder paddings abmüht.

Setze via CSS alle Abstände, Ränder, Margins und Paddings grundsätzlich auf 0 !

Wenn du dann Abstände definierst, sollte es in Etwa in den unterschiedlichen Browsern gleich aussehen. Meide padding! Setze Ränder am besten nur bei margin: auto, sonst wird die width-Angabe + 2xRandbreite gerechnet!

So hatte ich bisher kaum Probleme, bis auf einige winzige Workarounds für den IE

Danke für die Tipps. Das hat schon mal ganz gut geholfen.

Definierst Du die Abstände von Textabschnitten, Überschriften usw. tendenziell eher nach unten hin oder nach oben hin? Bzw. was hälst Du in etwa davon (vereinfachter Ausschnitt):

body {
	font-family: Verdana,Arial,Helvetica,Sans Serif; 
	margin: 15px 0px 0px 0px;	
	padding: 0px 0px 0px 0px;
	font-size: 12px;
	line-height: 20px;
	background-color: #ffffff;
}

h1 {
	margin: 10px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
}

p {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	text-align: justify;
}

img {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
}

...

Basingstoke

http://www.yaml.de/ ist glaube ich schon sehr nah dran...

zwutz

du wirst es NIE exakt hinbekommen... das hat viele Gründe, einer ist, dass die Browser verschiedene Standard-CSS definiert haben (die unter anderem besagte Abstände definieren) und das ein User natürlich seine eigene CSS verwenden kann. Spätestens dann ist dein ganzes Layout im Eimer, wenn du dich zu sehr auf die Exaktheit verlässt.

Du bist kein Printdesigner... pixelgenaues arbeiten ist im Webdesign der falsche Weg und wird nie klappen

Wenn es dir aber tatsächlich nur um die Abstände der Überschriften und andere "Kleinigkeiten" geht, reicht ein simples "Reset-CSS", dass die vom Browser vorgegebenen Werte auf einen von dir definierten Stand bringt.

ein derariges CSS kann so aussehen:

/* Globales zuruecksetzen aller Abstaende /*
*
{
    margin: 0;
    padding: 0;
}

option
{
    padding-left: 0.4em;
}

html
{
    height: 100%;
    margin-bottom: 1px;
}

body
{
    font-size: 100.01%;
    color: #000;
    background: #FFF;
    text-align: left;
}

/* Rahmen für <fieldset> und <img> Elemente loeschen */
fieldset, img
{
    border: 0 solid;
}

/* Neue Standardwerte fuer Listen und Zitate */
ul, ol, dl
{
    maring: 0 0 1em 1em
}

li
{
    margin-left: 1.5em;
    line-height: 1.5em;
}

dt
{
    font-weight: bold;
}

dd
{
    margin: 0 0 1em 2em;
}

blockquote, cite
{
    margin: 0 0 1em 1.5em;
}

beachten musst du dabei trotzdem, dass der User immernoch sein eigenes CSS verwenden kann

arnyek schrieb:

Setze via CSS alle Abstände, Ränder, Margins und Paddings grundsätzlich auf 0 !

so nicht ganz richtig, da in allen Geckbrowsern Probleme mit select-Elementen auftreten (daher ist es oben etwas erweitert)

Summernoon

lass den quatsch mit den vielen Pixelangaben, da der IE diese nicht so gut umsetzen kann.
Nimm doch einfach mal "pt".
mfg
Summernoon