Layout-Problem mit meiner Website

Übersicht

Sonstiges

Smalltalk

	ChristianK Betreff: Layout-Problem mit meiner Website	Mi, Aug 29, 2007 21:51 Antworten mit Zitat
Ich hab mir gerade meine Website ( www.progamercoder.net ) mit verschiedenen Browser angeschaut, und musste feststellen, dass das Layout bei Firefox und Opera große Fehler hat. Mit Internet Exporer 7 geht alles. Ich habe die Seite auch mit dem W3C-Validator getestet. Sie ist "Valid HTML 4.01 Transitional" und CSS ist auch valid. Trotzdem wird sie falsch dargestellt. Ich habe mal ein paar Screenshots hochgeladen. Kann mir jemand sagen, wie ich das Layout ordentlich hinbekomme und wo der Fehler liegt? Ein großes Dankeschön schonmal im voraus! Internet Exporer 7 So soll es aussehen: http://img265.imageshack.us/img265/5075/ie7wl8.png Opera Die grauen Balken sind zu kurz: http://img66.imageshack.us/img66/2937/operagm7.png Firefox Wie bei Opera sind die Balken zu kurz und die Titelleiste ist nicht hoch genug. Der Copyright-Balken ist an der falschen Stelle. http://img251.imageshack.us/im...foxcs7.png Außerdem wird die Seite bei Opera und Firefox links oben im Browserfenster angezeigt, statt in der Mitte.
AdvanceLcd Intel Core 2 Duo 3.2 GHz, 4 GB RAM, GeForce 8800 GTX \| MacBook Pro 15,4″ Intel Core 2 Duo 2.4 GHz, 2 GB RAM, GeForce 8600M GT

ChristianK

Betreff: Layout-Problem mit meiner Website

Mi, Aug 29, 2007 21:51
Antworten mit Zitat

Ich hab mir gerade meine Website ( www.progamercoder.net ) mit verschiedenen Browser angeschaut, und musste feststellen, dass das Layout bei Firefox und Opera große Fehler hat. Mit Internet Exporer 7 geht alles.
Ich habe die Seite auch mit dem W3C-Validator getestet. Sie ist "Valid HTML 4.01 Transitional" und CSS ist auch valid.
Trotzdem wird sie falsch dargestellt. Ich habe mal ein paar Screenshots hochgeladen. Kann mir jemand sagen, wie ich das Layout ordentlich hinbekomme und wo der Fehler liegt? Ein großes Dankeschön schonmal im voraus!

Internet Exporer 7
So soll es aussehen:
http://img265.imageshack.us/img265/5075/ie7wl8.png

Opera
Die grauen Balken sind zu kurz:
http://img66.imageshack.us/img66/2937/operagm7.png

Firefox
Wie bei Opera sind die Balken zu kurz und die Titelleiste ist nicht hoch genug. Der Copyright-Balken ist an der falschen Stelle.
http://img251.imageshack.us/im...foxcs7.png

Außerdem wird die Seite bei Opera und Firefox links oben im Browserfenster angezeigt, statt in der Mitte.

AdvanceLcd
Intel Core 2 Duo 3.2 GHz, 4 GB RAM, GeForce 8800 GTX | MacBook Pro 15,4″ Intel Core 2 Duo 2.4 GHz, 2 GB RAM, GeForce 8600M GT

	ICE TRUCK	Mi, Aug 29, 2007 21:59 Antworten mit Zitat
momentmal... sag bitte nicht du hast die seite entweder mit frontpage oder mit wordpad gemacht... ne für wordpad zu gut... ich sehs mir mal an^^ da macht mans am liebsten gleich neu XD ps.: gruslig wennstes damit machst - ich empfehls nicht generieren zu lassen - kommt nur sowas raus wie Code: [AUSKLAPPEN] [EINKLAPPEN] padding: 0px; margin-top: 0px;

ICE TRUCK

Mi, Aug 29, 2007 21:59
Antworten mit Zitat

momentmal... sag bitte nicht du hast die seite entweder mit frontpage oder mit wordpad gemacht... ne für wordpad zu gut... ich sehs mir mal an^^ da macht mans am liebsten gleich neu XD

ps.: gruslig wennstes damit machst - ich empfehls nicht generieren zu lassen - kommt nur sowas raus wie

Code: [AUSKLAPPEN]

padding: 0px;
margin-top: 0px;

Zuletzt bearbeitet von ICE TRUCK am Mi, Aug 29, 2007 22:01, insgesamt einmal bearbeitet

	hectic Sieger des IS Talentwettbewerb 2006	Mi, Aug 29, 2007 22:00 Antworten mit Zitat
Ein schneller Überflug auf deine styles.css und deine Beispielbilder sagen mir, dass Firefox es richtig anzeigt und der IE sich etwas selber einfallen lies, was zufällig auf deine Bedürfnisse besser hinhaute. Code: [AUSKLAPPEN] [EINKLAPPEN] ... { width: 900px; height: 70px; padding-left: 20px; text-align: left; background: rgb( 255, 255, 255 ); } ... Du gibst 70 Pixel als Höhe an, das hat Firefox auch gemacht. Der IE hat daraus 63 gemacht, was - wie eben schon erwänt - bei dir zufällig besser hinhaute. Tipps: - Mache das Bild ''Progamer.Coder'' nicht höher als 60 Pixel - Gib dem Header auch 60 Pixel hoch - Positioniere das Bild dann genau auf dem Header
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

hectic

Sieger des IS Talentwettbewerb 2006

Mi, Aug 29, 2007 22:00
Antworten mit Zitat

Ein schneller Überflug auf deine styles.css und deine Beispielbilder sagen mir, dass Firefox es richtig anzeigt und der IE sich etwas selber einfallen lies, was zufällig auf deine Bedürfnisse besser hinhaute.

Code: [AUSKLAPPEN]

...
{
width: 900px;
height: 70px;
padding-left: 20px;
text-align: left;
background: rgb( 255, 255, 255 );
}
...

Du gibst 70 Pixel als Höhe an, das hat Firefox auch gemacht. Der IE hat daraus 63 gemacht, was - wie eben schon erwänt - bei dir zufällig besser hinhaute.

Tipps:

- Mache das Bild ''Progamer.Coder'' nicht höher als 60 Pixel
- Gib dem Header auch 60 Pixel hoch
- Positioniere das Bild dann genau auf dem Header

Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

	TheShadow Moderator	Mi, Aug 29, 2007 22:01 Antworten mit Zitat
ein valider Coder ist keine Garantie für richtige Darstellung... denn da wird nur die Syntax kontrolliert Generell hat Firefox die richtige Darstellung Opera und besonders IE zeigen die Seiten nicht korrekt an - bzw interpretieren da was eigenes hinein... ich empfehle Doctype STRICT zu verwenden - das kann dein Problem schon lösen HTML scheint richtig zu sein - CSS auf die Schnelle kann ich jetzt nicht nachgucken
AMD64 3500+ \| GeForce6600GT 128MB \| 1GB DDR \| WinXPsp2

TheShadow

Moderator

Mi, Aug 29, 2007 22:01
Antworten mit Zitat

ein valider Coder ist keine Garantie für richtige Darstellung...
denn da wird nur die Syntax kontrolliert

Generell hat Firefox die richtige Darstellung

Opera und besonders IE zeigen die Seiten nicht korrekt an - bzw interpretieren da was eigenes hinein...

ich empfehle Doctype STRICT zu verwenden - das kann dein Problem schon lösen

HTML scheint richtig zu sein - CSS auf die Schnelle kann ich jetzt nicht nachgucken

AMD64 3500+ | GeForce6600GT 128MB | 1GB DDR | WinXPsp2

	pixelshooter	Do, Aug 30, 2007 8:03 Antworten mit Zitat
solltest außerdem nicht unbedingt fixe breiten benutzen, wie wäre es mit min/max-width und dann relativ zum body? (ok, der IE 6 kennt min/max-width nicht. mein Problem mi dem ie: ein textarea, für das ich nicht die spaltenzahl angeben kann (aufgrund von cms internals), wollte ich per css schmaler machen. Alle browser machen das eig area auch schmaler, nur der IE belegt dann noch den restlichen platz mit nichts. Dadas ganze in einer tabelle liegt, nicht gut.
>> Musikerstellung, Grafik und Design: http://www.pixelshooter.net.tc

pixelshooter

Do, Aug 30, 2007 8:03
Antworten mit Zitat

solltest außerdem nicht unbedingt fixe breiten benutzen, wie wäre es mit min/max-width und dann relativ zum body?
(ok, der IE 6 kennt min/max-width nicht.

mein Problem mi dem ie:
ein textarea, für das ich nicht die spaltenzahl angeben kann (aufgrund von cms internals), wollte ich per css schmaler machen. Alle browser machen das eig area auch schmaler, nur der IE belegt dann noch den restlichen platz mit nichts. Dadas ganze in einer tabelle liegt, nicht gut.

>> Musikerstellung, Grafik und Design: http://www.pixelshooter.net.tc

	ChristianK	Do, Aug 30, 2007 13:24 Antworten mit Zitat
Danke, dass ihr mir so schnell geholfen habt. Der Header funktioniert jetzt bei allen Browsern. Der Rest scheint durch das Padding verursacht zu werden. Zum Beispiel habe ich einen Kasten, der 900px breit ist und ein Padding von 25px, damit der Text nicht ganz links oben anfängt. Bei Firefox und Opera ist der Kasten dann aber 925px breit. Was mache ich da falsch? PS: Strict hat auch nichts gebracht. PPS: Fixe Breite will ich aber eigentlich schon haben.
AdvanceLcd Intel Core 2 Duo 3.2 GHz, 4 GB RAM, GeForce 8800 GTX \| MacBook Pro 15,4″ Intel Core 2 Duo 2.4 GHz, 2 GB RAM, GeForce 8600M GT

ChristianK

Do, Aug 30, 2007 13:24
Antworten mit Zitat

Danke, dass ihr mir so schnell geholfen habt. Der Header funktioniert jetzt bei allen Browsern.
Der Rest scheint durch das Padding verursacht zu werden. Zum Beispiel habe ich einen Kasten, der 900px breit ist und ein Padding von 25px, damit der Text nicht ganz links oben anfängt. Bei Firefox und Opera ist der Kasten dann aber 925px breit. Was mache ich da falsch?

PS: Strict hat auch nichts gebracht.
PPS: Fixe Breite will ich aber eigentlich schon haben.

AdvanceLcd
Intel Core 2 Duo 3.2 GHz, 4 GB RAM, GeForce 8800 GTX | MacBook Pro 15,4″ Intel Core 2 Duo 2.4 GHz, 2 GB RAM, GeForce 8600M GT

	pixelshooter	Do, Aug 30, 2007 14:30 Antworten mit Zitat
k kennt jemand ne lösung für die sach mit den textareas?
>> Musikerstellung, Grafik und Design: http://www.pixelshooter.net.tc

pixelshooter

Do, Aug 30, 2007 14:30
Antworten mit Zitat

k kennt jemand ne lösung für die sach mit den textareas?

>> Musikerstellung, Grafik und Design: http://www.pixelshooter.net.tc

	hectic Sieger des IS Talentwettbewerb 2006	Do, Aug 30, 2007 14:45 Antworten mit Zitat
@Pixelschooter, innerhalb einer Tabelle sollten dann auch Tabellenzellen benutzt werden. CSS ist gut, aber auch keine Wollmilchsau für alles anzuwenden. Ausser dein Problem ist sehr speziell, dann solltest du mal das XHTML-Forum - das mit dem grünem Streifen als Title - anfragen, da wurde mir bisher immer gut geholfen.
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

hectic

Sieger des IS Talentwettbewerb 2006

Do, Aug 30, 2007 14:45
Antworten mit Zitat

@Pixelschooter,
innerhalb einer Tabelle sollten dann auch Tabellenzellen benutzt werden. CSS ist gut, aber auch keine Wollmilchsau für alles anzuwenden. Ausser dein Problem ist sehr speziell, dann solltest du mal das XHTML-Forum - das mit dem grünem Streifen als Title - anfragen, da wurde mir bisher immer gut geholfen.