Darstellungsfehler?

[KD-one]

Hi alle,

Ich habe hier http://www.tp-marketing.at/ mal eine Seite erstellt, die von Mozilla 1.5 und Internet-Explorer 6.0 korrekt dargestellt wird.
Firefox 0.8 sowie Opera 7.23 zeigen jedoch einen herrlichen horizontalen Scrollbalken und ich komm einfach nicht dahinter, woran das liegen könnte.
Weiß jemand von euch Rat?

Hier das CSS:

html, body {
    height:100%;
    margin:0;
    padding:0;
    font-family:tahoma,verdana,arial,helvetica,sans-serif;
    color:#535593;
    background-color:#FFFFFF;
    text-align:center;
    font-size:100.01%;
}

#start {
    height:100%;
    width:100%;
}

#start td {
    text-align:center;
    vertical-align:middle;
}

.welcome {
    position:relative;
    text-align:left;
    top:3%;
    left:5%;
    padding-bottom:2.5em;
    font-size:0.8em;
    font-weight:bold;
}

.kont {
    position:relative;
    top:3%;
    left:20%;
    padding-top:2em;
    font-size:0.8em;
    font-weight:bold;
}

.imp {
    position:absolute;
    bottom:1em;
    right:2em;
    margin-bottom:0;
    font-size:0.6em;
}

Gruß

Kurt

[Markus Pitha]

Hallo,

.welcome {
    position:relative;
    text-align:left;
    top:3%;
    left:5%;

^

.kont {
    position:relative;
    top:3%;
    left:20%;

^
ich glaube es liegt hierbei. Nimm mal diese Angaben raus, um sicher zu gehen.

Markus.

[KD-one]

Hi Markus,

Hallo,

.welcome {
    position:relative;
    text-align:left;
    top:3%;
    left:5%;
         ^
.kont {
    position:relative;
    top:3%;
    left:20%;
         ^
ich glaube es liegt hierbei. Nimm mal diese Angaben raus, um sicher zu gehen.

Du bist ein Schatz, da wäre ich nicht so schnell draufgekommen. Ich habe diese beiden Angaben mal auf padding-left abgeändert und den Wert bei .kont erhöht und plötzlich wird es in allen vieren korrekt und sogar ziemlich gleich angezeigt!

Vielen Dank!

Gruß

Kurt

[KD-one]

Hi Markus,

ich glaube es liegt hierbei. Nimm mal diese Angaben raus, um sicher zu gehen.

Du bist ein Schatz, da wäre ich nicht so schnell draufgekommen. Ich habe diese beiden Angaben mal auf padding-left abgeändert und den Wert bei .kont erhöht und plötzlich wird es in allen vieren korrekt und sogar ziemlich gleich angezeigt!

Bei genaueren Hinsehen hat sich doch Mozilla wieder quergelegt, aber nachdem ich padding durch margin ausgetauscht habe, passt es nun in allen.
Nochmals Danke!

Gruß

Kurt

[hook]

Hallo,

html, body {
    height:100%;

Hatte ich auch mal. Bei mir gings weg, als ich "height" _und_ "width" nur noch auf den body angewendet habe. Beim html lass es mal weg, vielleicht funktioniert das ja.

[KD-one]

Hi hook,

html, body {
    height:100%;

Hatte ich auch mal. Bei mir gings weg, als ich "height" _und_ "width" nur noch auf den body angewendet habe. Beim html lass es mal weg, vielleicht funktioniert das ja.

Nein, ich denke nicht, daß das funktioniert hätte, da es sich um ein Strict-Document handelt. Da ist diese Formatierung für html vonnöten.
Trotzdem Danke für den Hilfeversuch.

Gruß

Kurt

[hook]

Hi,

Nein, ich denke nicht, daß das funktioniert hätte, da es sich um ein Strict-Document handelt. Da ist diese Formatierung für html vonnöten.

Wie Strict ?? Schreibst du das CSS etwa nicht in eine ext. CSS-Datei?

[KD-one]

Hi hook,

Nein, ich denke nicht, daß das funktioniert hätte, da es sich um ein Strict-Document handelt. Da ist diese Formatierung für html vonnöten.

Wie Strict ?? Schreibst du das CSS etwa nicht in eine ext. CSS-Datei?

Doch, natürlich. Aber die Browser schalten die Darstellung in den Standard-compliantmodus, wenn Doctype Strict angegeben ist und da ist es nötig, html als Elternelement von body auch zu formatieren, da der body sonst nicht weiss, worauf er seine 100% beziehen soll. Im Quirksmodus stellen dies dennoch die meisten Browser wie gewollt dar, auch wenn html nicht formatiert wurde. Um aber eine möglichst gleiche und standardkonforme Darstellung zu erzielen, halte ich den strict-Modus für unverzichtbar, insbesondere deshalb, da ich den Auftrag nur aufgrund meiner "Papperl" bekommen habe. ;-)

Gruß

Kurt

[Fabian St.]

Hi KD-one!

#start {
    height:100%;
    width:100%;
}

^^^^

Ich habs gerade mal kurz ausprobiert: Diese 100% bei width veruraschen den Fehler (wahrscheinlich in Kombination mit den raltiven Angaben).

Grüße,
Fabian St.

[KD-one]

Hi Fabian St.,

#start {
    height:100%;
    width:100%;
}
              ^^^^

Ich habs gerade mal kurz ausprobiert: Diese 100% bei width veruraschen den Fehler (wahrscheinlich in Kombination mit den raltiven Angaben).

Danke für deine Mühe, aber Markus hat mir bereits eine saubere Lösung des Problems gepostet. Die von dir genannte Breite muss sein, sonst wäre die Tabelle nicht größer als der Inhalt und wiederum zum Positionieren nicht geeignet.

Gruß

Kurt