Erste Versuche CSS - Firefox sieht ok aus, IE leider nicht

userschweiz

Hallo, ich habe mich entschlossen mal ohne Frontpage eine Website zu bauen und dafür html und CSS verwendet.

Ich bin total ahnungslos und habe mich im Internet eingelesen und CSS websites studiert (von cssbeauty.com). Dachte, ich probier mal herum.

Jetzt hab ich was zusammengebastelt und obwohl ich ja nicht genau weiss was jedes kleine Element bewirkt, sieht die Seite im Firefox so aus wie ich mir das vorstelle. Leider wird im IE das Seepferdchen und die Navigationsleiste in die rote Leiste oben verschoben.

Und jetzt steh ich an, keine Ahnung wie ich das ändern kann. Hab einiges über Unterschiede der Browser und Fixes gelesen aber wie ich das anwende??

Übrigens, ich habe meinen Laptop auf 1400x1050 aber auf 800x600 ging es auch noch.

Zu sehen ist der Erstversuch hier (die Links auf der Seite führen noch nirgends hin):

http://www.tradingmonk.com/testlauf.html

Vielen Dank für die Hilfe!

wernerdeluxe

http://jigsaw.w3.org/css-validator/…m/testlauf.html

http://validator.w3.org/check?verbose=…m/testlauf.html

Die zwei Seiten zeigen die Errors deiner Seite an, einmal CSS einmal HTML ... schau an was angezeigt wird und änder dies.

userschweiz

Ok, danke. Guter Punkt, werde ich sofort machen...

wernerdeluxe

sollten probleme bei manchen errors auftretten , dann frag einfach

userschweiz

So, habe Anpassungen gemacht. Der Validator html sagt jetzt: "This Page Is Valid XHTML 1.0 Transitional!". Der CSS: "Gratulation. Dieses Dokument wurde als CSS validiert"

Danke nochmal für den Hinweis. Hatte darüber gelesen aber natürlich bereits vergessen.

Im IE siehts allerdings noch immer "unschön" aus. Also das Logo-Bild (seepferdchen) und Navigationsleiste sind höher als im Firefox und damit im roten Top-Rand.

Damit schon zu tun gehabt?

wernerdeluxe

Zitat

Warnungen:
URI : http://validator.w3.org/handheld.css

* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate
* Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #revalidate

URI : http://validator.w3.org/docs.css

* Zeile : 62 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : .doc var
* Zeile : 89 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : .doc code samp

URI : http://validator.w3.org/base.css

* Zeile : 22 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : p#msie
* Zeile : 34 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : html
* Zeile : 57 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #banner
* Zeile : 88 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : address
* Zeile : 88 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : address
* Zeile : 92 (Level : 2) Erneute Definition von padding-left : #main
* Zeile : 92 (Level : 2) Erneute Definition von padding-left : address
* Zeile : 93 (Level : 2) Erneute Definition von padding-right : address
* Zeile : 93 (Level : 2) Erneute Definition von padding-right : #main
* Zeile : 98 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : address
* Zeile : 129 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : h1
* Zeile : 162 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : h4
* Zeile : 180 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #menu und a:visited
* Zeile : 180 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a:visited
* Zeile : 180 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #menu und a:visited
* Zeile : 180 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a:visited
* Zeile : 186 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #menu und a:active
* Zeile : 186 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a:active
* Zeile : 186 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a:active
* Zeile : 186 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #menu und a:active
* Zeile : 237 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a img
* Zeile : 258 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten li.msg_info span.err_type und p.copyright
* Zeile : 258 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : p.copyright
* Zeile : 263 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : p.copyright a
* Zeile : 279 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : fieldset

URI : http://validator.w3.org/navbar.css

* Zeile : 12 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #menu
* Zeile : 16 (Level : 2) Erneute Definition von padding-top : #menu
* Zeile : 17 (Level : 2) Erneute Definition von padding-bottom : #menu
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten body und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten address und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #banner und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten html und #menu li a
* Zeile : 32 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten body und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten td.invalid und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten address und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten h2 und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .info und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten fieldset und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten p#msie und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten h6 und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten html und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten h6 und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten td.valid und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #revalidate und #menu li a
* Zeile : 32 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten #banner und #menu li a
* Zeile : 37 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #jumpbar

URI : http://validator.w3.org/results.css

* Zeile : 20 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : fieldset div.moreinfo p
* Zeile : 98 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : p.helpwanted
* Zeile : 98 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten li.msg_info span.err_type und p.helpwanted
* Zeile : 103 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : p.helpwanted a
* Zeile : 112 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : code.input strong
* Zeile : 112 (Level : 1) Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .fatal h2 und code.input strong
* Zeile : 129 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #source ol
* Zeile : 138 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #source ol li a
* Zeile : 156 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : dl#warnings dt

URI : http://validator.w3.org/print.css

* Zeile : 9 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : html
* Zeile : 20 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #banner

URI : http://validator.w3.org/tips.css

* Zeile : 13 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : dl.tip
* Zeile : 28 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : dl.tip dt a
* Zeile : 35 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : dl.tip dd

Alles anzeigen

Sind keine Errors, aber Wrnungen.

Errors sind Fehler, die in jedem Browser falsch sind. Warnungen weisen Koplikationsmöglichkeiten auf.

Also musst du da nochmal nachschaun

Zu finden auch:
http://jigsaw.w3.org/css-validator/…m/testlauf.html
(etwas herunter scrollen )

Wenn die "Fehler" korrigiert wurde sollte es eigentlich gehen.
War bei mir schonmal bei einem mouseover der fall.

ng.
Lukas

userschweiz

Dachte ich kann all die Warnungen umgehen

Aber stimmt natürlich, werde dieses auch beheben.....

thanks...

userschweiz

Wenn ich das validiere bekomme ich einige Warnungen zu meinem css stylesheet ("stylesheet.css"). Ich weiss aber nicht was alle Warnungen sind, die oben aufgezählt sind. Diese Geschichten handheld.css, docs.css, base.css, etc. sind ja nicht von mir. Und wenn ich die Seite beim CSS-Validator eingebe kommen auch nur die 11 Zeilen Warnungen. Aber die werde ich auf jeden Fall beheben jetzt.

userschweiz

So, jetzt ist alles validiert und keine Warnungen mehr.

Ein Problem konnte ich mittlerweile lösen. Im Firefox ist es kein Problem dass das "Seepferdchen" über Head und Body (alles teilweise im roten Streifen und teilweise im Weissen) ist. Aber im MS IE vergrössert er den bereich "head" damit das Bild Platz hat. Jetzt habe ich das Bild verkleinert damit es im roten Bereich Platz hat. Somit ist es im Firefox und MS IE gleich.

Lediglich die Navigationsleiste krieg ich im IE noch nicht hin. Dort passt es einfach nicht.

userschweiz

Jetzt schreib ich mir nur noch selber

Aber Dank dieses Forumbeitrages:

https://www.forum-hilfe.de/viewtopic.php?t=16318

habe ich eine Antwort auf mein Logo Problem bekommen. Durch eine absolute Positionierung kann das Seepferdchen über den roten Bereich in den weissen ragen.

Hier zu sehen:

http://www.tradingmonk.com/testlauf.html

So jetzt muss ich noch die Navigationsleiste hinkriegen.

Tags