IE positioniert DIV falsch + hat Probleme mit transparentem PNG

[Andi]

Hallo,
ich schraube gerade an folgender Seite:
weekview

FF, Opera und Safari zeigen (fast) alles korrekt an (Opera ignoriert leider noch den Farbverlauf) - zumindest sind alle Elemente richtig positioniert!

Nur der IE zerschie0t das Layout, da die Klasse "maincontent" viel zu weit nach rechts verschoben ist. Ich habe schon versucht, sie relativ zum Elternelement zu positionieren, aber das brachte auch keinen Erfolg.
Weiß jemand Rat?

Außerdem habe ich ein Problem auf der Startseite. Während wieder FF, Opera und Safari die "Overlay-bilder" korrekt darstellen, zeigt der IE während der Blede einen hässlichen Rand um die Bilder (ind en transp. Bereichen), der erst verschwindet, wenn das Bild vollständig eingeblendet ist. Warum? :)

Würde mich über den ein oder anderen Tipp sehr freuen!

Gruß, andi

[Klawischnigg]

Hi there,

Nur der IE zerschie0t das Layout, da die Klasse "maincontent" viel zu weit nach rechts verschoben ist. Ich habe schon versucht, sie relativ zum Elternelement zu positionieren, aber das brachte auch keinen Erfolg.

Nicht nur der IE, auch im Seamonkey (2.2) schauts verschoben aus...

Außerdem habe ich ein Problem auf der Startseite. Während wieder FF, Opera und Safari die "Overlay-bilder" korrekt darstellen, zeigt der IE während der Blede einen hässlichen Rand um die Bilder (ind en transp. Bereichen), der erst verschwindet, wenn das Bild vollständig eingeblendet ist. Warum? :)

Der IE < 7 hatte immer Probleme mit der Darstellung von (teil-) transparenten PNGs, die Probleme bei einem neueren IE kann ich Dir nicht erklären...

[Andi]

Hallo

Der IE < 7 hatte immer Probleme mit der Darstellung von (teil-) transparenten PNGs, die Probleme bei einem neueren IE kann ich Dir nicht erklären...

diese Probleme sind mir bekannt aber egal :)
Nur schauts eben auch mit dem IE7 und 8 doof aus. Kann das jemand bestätigen und hat eine Lösung parat?

[dedlfix]

Hi!

weekview
Nur der IE zerschie0t das Layout, da die Klasse "maincontent" viel zu weit nach rechts verschoben ist. Ich habe schon versucht, sie relativ zum Elternelement zu positionieren, aber das brachte auch keinen Erfolg.

Die relative Positionierung macht auch im FF Ärger. Benötigt wird sie nicht. Der IE (8 in meinem Fall - welcher ist es bei dir? Die gibts ja mittlerweile in mehreren Qualitätsstufen) bemisst einige Elemente anders. Dem zeitplanermenu zwei Pixel mehr Höhe spendiert oder etwas kleinere Schrift - und schon passt alles. Hilfsmittel, um solche Feinheiten mal eben schnell zu testen, haben alle modernen Browser eingebaut (oder sind im Falle FF mit FireBug nachrüstbar). Zu erreichen sind diese üblicherweise über F12.

Lo!

[Andi]

Danle für Deine Antwort!

Dem zeitplanermenu zwei Pixel mehr Höhe spendiert oder etwas kleinere Schrift - und schon passt alles.

Dann habe ich aber im FF eine dünne weiße Linie (Abstand) zwischen den "Tabs" und dem "Content". Im IE schaut es in der Tat jetzt sauber aus.

[andi]

Dann habe ich aber im FF eine dünne weiße Linie (Abstand) zwischen den "Tabs" und dem "Content". Im IE schaut es in der Tat jetzt sauber aus.

ok, bin ich auch losgeworden - danke :)

[dedlfix]

Hi!

Dem zeitplanermenu zwei Pixel mehr Höhe spendiert oder etwas kleinere Schrift - und schon passt alles.
Dann habe ich aber im FF eine dünne weiße Linie (Abstand) zwischen den "Tabs" und dem "Content". Im IE schaut es in der Tat jetzt sauber aus.

Gib den Elementen keine Höhen vor, sorge nur dafür, dass sie einen passenden Innen- und Außenabstand haben, gegebenenfalls zuzüglich Rahmen. Die fließen dann schon von selbst ordentlich untereinander, auch wenn der eine Browser ein Element man etwas höher oder niedriger als der andere darstellt.

Lo!

[Matthias Apsel]

Om nah hoo pez nyeetz, Andi!

Nur der IE zerschie0t das Layout, da die Klasse "maincontent" viel zu weit nach rechts verschoben ist. Ich habe schon versucht, sie relativ zum Elternelement zu positionieren, aber das brachte auch keinen Erfolg.

für meinen Geschmack ist das auch im FF5 zu weit rechts. Ebenso kann ich keinen Farbverlauf entdecken. Du hast einen doppelt vergebenen ID.

Matthias

[Andi]

Danke für Deine Antwort.

für meinen Geschmack ist das auch im FF5 zu weit rechts.

Definiere "für Deinen Geschmack" :) Im IE ist (bzw. war) der Block linksbündig mit der Außenkante der Tabs, also ca. 400px zu weot links.

Ebenso kann ich keinen Farbverlauf entdecken.

Der ist auch sehr dezent. :)

Du hast einen doppelt vergebenen ID.

Danke, ist gefixt.

[Matthias Apsel]

Om nah hoo pez nyeetz, Andi!

Danke für Deine Antwort.

für meinen Geschmack ist das auch im FF5 zu weit rechts.

Definiere "für Deinen Geschmack" :) Im IE ist (bzw. war) der Block linksbündig mit der Außenkante der Tabs, also ca. 400px zu weot links.

Er begann in der Mitte des Reiters A5-Planer. Jetzt geht er über die gesamte Breite.

Matthias

[Gunnar Bittersmann]

@@Andi:

nuqneH

ich schraube gerade an folgender Seite:
weekview

Leider verwendest du eine in Pixel festzementierte Breite, die mit 970px auch irrsinnig groß ist. Dadurch muss man (ich selbst bei meinem 19-Zoller) horizontal scrollen, was alles andere als nutzerfreundlich ist.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> steht doppelt im 'head', sollte (darf?) aber nur einmal vorkommen.

(Opera ignoriert leider noch den Farbverlauf)

Das sollte nicht verwundern; du hast ja für Opera keinen angegeben. Opera unterstützt ab Version 11.10 lineare Gradienten, selbe Synatx wie Mozilla, allerdings mit Präfix -o-.

IE 9 unterstüzt Gradienten ebenfalls mit Präfix -ms-.

Chrome unterstüzt mittlerweile auch diese Syntax (Präfix -webkit-), lediglich Safari hinkt noch hinterher und versteht nur seine proprietäre Variante. (Warum schreibst du da 'color-stop', wo du doch gar keine hast? Für Anfang/Ende gibt es 'from' und 'to'.)

'0%' und '100%' kannst du übrigens weglassen.
Und es schadet auch nicht, schon die präfixlose CSS3-Eigenschaft zu notieren, so dass die Angabe so aussieht:

#headerbar{  
	background:#115d79;  
	background-image: -moz-linear-gradient(center bottom , rgb(48, 135, 166), rgb(26, 82, 103));  
	background-image: -ms-linear-gradient(center bottom , rgb(48, 135, 166), rgb(26, 82, 103));  
	background-image: -o-linear-gradient(center bottom , rgb(48, 135, 166), rgb(26, 82, 103));  
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(48,135,166)), to(rgb(26,82,103))); /* noch(!) nötig für Safari */  
	background-image: -webkit-linear-gradient(center bottom , rgb(48, 135, 166), rgb(26, 82, 103));  
	background-image: linear-gradient(center bottom , rgb(48, 135, 166), rgb(26, 82, 103));  
}

Qapla'

[Andi]

Hi Gunnar

Leider verwendest du eine in Pixel festzementierte Breite, die mit 970px auch irrsinnig groß ist. Dadurch muss man (ich selbst bei meinem 19-Zoller) horizontal scrollen, was alles andere als nutzerfreundlich ist.

Hm, nur das Bild ist ja schon so breit. Von daher hat man so oder so einen scrollbar, oder? Schön wäre es natürlich, wenn die komplette Seite (inkl. aller Bilder) kleiner skaliert würde, bei kleineren Auflösungen. Wie kriegt man das hin und vor allem: bleiben dann die Bild-Overlays auch an der richtigen Position?

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> steht doppelt im 'head', sollte (darf?) aber nur einmal vorkommen.

oh - danke

Und es schadet auch nicht, schon die präfixlose CSS3-Eigenschaft zu notieren, so dass die Angabe so aussieht:

cool. Vielen vielen Dank!