Problem mit IE6 + Verbesserungsvorschläge für Webseite

[HanSolo]

Hallo,

ich hatte die Ehre nebenbei für meinen Arbeitgeber eine neue Internetseite zu bauen. Das ist jetzt im Prinzip die erste Seite die ich gebaut habe, die auch wirklich eingesetzt werden soll... hoffentlich :-). Naja, eigentlich ist sie noch lange nicht fertig, dennoch will er sie morgen das erstemal sehen, die Seite soll als erste Diskussionsgrundlage dienen und soll in den folgenden Monaten immer weiter verbessert werden. In der Entwicklung hab ich mit dem Firefox und dem IE7 getestet.

Hab mir die Seite eben mal im IE6 angeschaut. Dort wird die Navigation viel zu weit unten angezeigt. Des weiteren ist am unteren Rand ein schmaler weißer Balken zu sehen, der dort nicht hingehört. Könnt ihr mir vielleicht auf die schnelle sagen wie ich das weg bekomme? Hier der Link zur Seite:

Link zur Seite

Ist es eigentlich notwendig die Seite, wenn sie auf dem IE6 und IE7 richtig dargestellt wird, auch auf dem IE8 zu testen, oder kann man dann davon ausgehen, dass sie dort auch richtig dargestellt wird?

Die Seite habe ich basierend auf Typo3 erstellt. In den nächsten Woche werde ich noch folgende Dinge verbessern:

• komplette Überarbeitung des Designs (den Banner im Kopf hab ich provisorisch mit Gimp zusammengebastelt, wird aber noch überarbeitet)
• das CSS werde ich komplett überarbeiten, ist aus zeitgründen etwas chaotisch geworden
• SEO (die Metatags im head sind z.B. noch alle leer, ändert sich natürlich noch)
• Validierung der Seite (hier gibt es noch sehr viel zu tun, da ich teilweise auch mit templates gearbeitet habe die noch mit Tabellen arbeiten, wo man eigentlich garkeine verwenden sollte. Aus Zeitgründen hab ich das bisher noch nicht geändert. Die Semantik wird aber noch verbessert.)
• Quellcodeoptimierung (mit Hilfe von tidy)

Könnt ihr mir unabhängig von den Punkten die ich sowieso noch verbessern will noch ein paar Ratschläge geben? Was könnte man ändern oder besser machen?

Welchen Eindruck macht die Seite auf euch?

[Der Martin]

Hallo,

Link zur Seite
Das ist jetzt im Prinzip die erste Seite die ich gebaut habe, die auch wirklich eingesetzt werden soll... hoffentlich :-).

aber nicht die erste, die du tatsächlich erstellt hast, oder? Dafür sieht sie nämlich richtig gut aus.

Hab mir die Seite eben mal im IE6 angeschaut. Dort wird die Navigation viel zu weit unten angezeigt.

Das scheint ein reines IE6-Problem zu sein (meiner schläft gerade). Denn im IE5.5 steht die Navi an derselben Position wie in Opera und Firefox.

Des weiteren ist am unteren Rand ein schmaler weißer Balken zu sehen, der dort nicht hingehört. Könnt ihr mir vielleicht auf die schnelle sagen wie ich das weg bekomme?

Leider nein, aber ich sehe ihn auch.

Ist es eigentlich notwendig die Seite, wenn sie auf dem IE6 und IE7 richtig dargestellt wird, auch auf dem IE8 zu testen, oder kann man dann davon ausgehen, dass sie dort auch richtig dargestellt wird?

Ich las vor einiger Zeit hier im Forum, dass der IE8 bereits so gut sei, dass man sich den als zusätzlichen Testkandidaten sparen könnte.

Könnt ihr mir unabhängig von den Punkten die ich sowieso noch verbessern will noch ein paar Ratschläge geben? Was könnte man ändern oder besser machen?

Das Suchfeld links oben wird im IE winzig, die Breite reicht bei mir gerade mal für den Inhalt "Suchen +".

Das Login-Formular schreit nach einem Hinweis, wer sich da einloggen kann und wozu.

Auf der Startseite ein Tippfehler: "Zubör"

Im Impressum fehlt eine Person als verantwortlicher Ansprechpartner (Geschäftsführer, Pressesprecher o.ä.)

Keine aussagekräftigen URLs: http://www.geisler-trier.de/impressum wäre schöner als http://www.geisler-trier.de/index.php?id=162

Welchen Eindruck macht die Seite auf euch?

Es ist das, was ich im Gesamteindruck als "schön schlicht" bezeichnen möchte. Aufgeräumt und übersichtlich. Das Bild auf der Startseite ist nicht so der Brüller; es weckt schon merkwürdige Assoziationen, wenn das Firmenschild regelrecht umzingelt ist von Apothekensymbolen.

So long,
 Martin

[HanSolo]

aber nicht die erste, die du tatsächlich erstellt hast, oder? Dafür sieht sie nämlich richtig gut aus.

Erstmal danke für die Blumen. Ich beschäftige mich schon seit Ende letzten Jahres mit dem Kram, hab erst händisch ne Seite gebaut und bin dann irgendwann (dank suit) zu Typo3 gekommen. Es ist schon recht heftig sich in Typo3 einzuarbeiten, aber wenn man mal so halbwegs klarkommt findet man diese System einfach nurnoch GEIL.

Das scheint ein reines IE6-Problem zu sein (meiner schläft gerade). Denn im IE5.5 steht die Navi an derselben Position wie in Opera und Firefox.

Des weiteren ist am unteren Rand ein schmaler weißer Balken zu sehen, der dort nicht hingehört. Könnt ihr mir vielleicht auf die schnelle sagen wie ich das weg bekomme?

Leider nein, aber ich sehe ihn auch.

So ein Mist, ich muß die beiden Bugs heute noch rausbekommen. Ich weiß leider garnicht wie ich die Ursache lokalisieren könnte. Für Tipps wäre ich sehr dankbar.

[Shadowcrow]

hi $name,

Ich las vor einiger Zeit hier im Forum, dass der IE8 bereits so gut sei, dass man sich den als zusätzlichen Testkandidaten sparen könnte.

Man soll nicht alles glauben was man liest, aus eigener Erfahrung kann ich dem nur widersprechen, die seite sah in IE6+7 gut aus und im 8er eher mäßig, abhilfe schafte <meta http-equiv="X-UA-Compatible" content="IE=7" /> vlt. nicht schön, aber wirksam.

gruss
shadow

[Vinzenz Mai]

Hallo,

Ich las vor einiger Zeit hier im Forum, dass der IE8 bereits so gut sei, dass man sich den als zusätzlichen Testkandidaten sparen könnte.

Man soll nicht alles glauben was man liest, aus eigener Erfahrung kann ich dem nur widersprechen, die seite sah in IE6+7 gut aus und im 8er eher mäßig, abhilfe schafte <meta http-equiv="X-UA-Compatible" content="IE=7" /> vlt. nicht schön, aber wirksam.

äh ja. Meistens enthalten solche Seiten Code, der im Gießkannenprinzip über alle IEs gegossen wird, ob diese ihn brauchen oder nicht (IE8). Damit wird die prinzipiell mögliche gute Darstellung durch den IE8 kaputtgemacht - eben weil man ihm jede Menge Korrekturen vorsetzt, die er gar nicht braucht.

Freundliche Grüße

Vinzenz

[Shadowcrow]

hi $name,

Man soll nicht alles glauben was man liest, aus eigener Erfahrung kann ich dem nur widersprechen, die seite sah in IE6+7 gut aus und im 8er eher mäßig, abhilfe schafte <meta http-equiv="X-UA-Compatible" content="IE=7" /> vlt. nicht schön, aber wirksam.

äh ja. Meistens enthalten solche Seiten Code, der im Gießkannenprinzip über alle IEs gegossen wird, ob diese ihn brauchen oder nicht (IE8). Damit wird die prinzipiell mögliche gute Darstellung durch den IE8 kaputtgemacht - eben weil man ihm jede Menge Korrekturen vorsetzt, die er gar nicht braucht.

mag sein,, bei meiner seite sah's schon vor den korrekturen für die anderen IEs unschön aus.

gruss
shadow

[Vinzenz Mai]

Hallo,

Ist es eigentlich notwendig die Seite, wenn sie auf dem IE6 und IE7 richtig dargestellt wird, auch auf dem IE8 zu testen,

ja, das ist erforderlich.

oder kann man dann davon ausgehen, dass sie dort auch richtig dargestellt wird?

Nein, davon kann man nicht ausgehen. Bei für den IE (7, 6 oder tiefer) "optimierten" Seiten hab ich' schon erlebt, dass diese im IE8 in reinem Weiß angezeigt wurden. Derzeitige "Lösung" : IE8 wird in den Kompatibilitätsmodus geschickt.

Freundliche Grüße

Vinzenz

[Dieter Pan]

Hallo,

teste in allen Browsern, die in Frage kommen. Raten, ob ein Browser es korrekt (wie gewünscht) darstellt, bringt nichts.

• SEO (die Metatags im head sind z.B. noch alle leer, ändert sich natürlich noch)

das zählt afaik heutzutage kaum noch zu SEO.

• Quellcodeoptimierung (mit Hilfe von tidy)

Falls du dich noch an die Schule erinnern kannst, eine ordentlich formatierte Klassenarbeit, in der nur Scheisse steht, gibt auch ne 6. Spar dir den Aufwand. Eingerückter HTML Text interessiert niemanden.

Könnt ihr mir unabhängig von den Punkten die ich sowieso noch verbessern will noch ein paar Ratschläge geben? Was könnte man ändern oder besser machen?

Content. Content. Content.

cya

[HanSolo]

Kann mir keiner bezüglich der IE6 Bugs helfen? Ich brauche das wirklich dringend und weiß absolut nicht wie ich da ran gehen muß um den Fehler einzugrenzen.

[Vinzenz Mai]

Hallo,

Kann mir keiner bezüglich der IE6 Bugs helfen? Ich brauche das wirklich dringend und weiß absolut nicht wie ich da ran gehen muß um den Fehler einzugrenzen.

Dein Content-Bereich läßt im IE nicht genügend Platz für den Navigationsbereich. Da die Navigation nach dem Content kommt, wird sie vom IE6 unter dem Content angezeigt. Es fehlen nur ein paar Pixel - und frag' mich nicht, woher das kommt, dazu ist der CSS-Wust, den Typo3 da generiert, mir zu kompliziert.

Der weiße Strich am Ende ist der Hintergrund Deines Footers.
Einfacher Workaround: gib dem Footer die gleiche Hintergrundfarbe wie dem Außenbereich. Derzeit dürfte die Hintergrundfarbe transparent sein, deswegen scheint das Weiß des Body-Elementes durch. Aus irgendwelchen Gründen ist im IE6 die Höhe Deines Footers größer als von Dir angenommen.

Echte Beseitigung: finde heraus, warum die Höhe im IE6 anders ist und korrigiere dies.

Ach ja: wie bin ich herangegangen:
ich habe den drei Verdächtigen:

<div #id="content">
<div #id="navigation">
<address #id="footer">

eine knallige Hintergrundfarbe per Inline-Styles verpasst.

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo,

Kann mir keiner bezüglich der IE6 Bugs helfen?

vorab: wenn's in den anderen IE-Versionen soweit ok ist, füttere nur den IE6 mit folgenden klitzekleinen Änderungen:

a) Verringere das seitliche Padding der Container #content oder #navigation um
   zwei Pixel, z.B. mit

#navigation {  
	float: left;  
	width: 160px;  
	height: 350px;  
	padding: 20px 18px 20px 20px;  
        /* statt original  
	padding: 20px 20px 20px 20px;  
        */  
}  

Damit reicht der Platz im body-Element, um #content und #navigation nebeneinander zu bekommen.

b) Der weiße Strich im Footer kommt vom Hintergrund des body-Elementes.
   Dein Footer wird im IE6 80 Pixel hoch, dies erfolgt aufgrund der
   line-height-Eigenschaft.

Mit

#footer {  
    background: url(../images/footer.png) top left no-repeat;  
    clear: both;  
    width: 940px;  
    height: 75px;  
    line-height: 75px;  
/* *******************  
   statt normal  
    line-height: 80px;  
*/  
    padding: 0px 0px 0px 20px;  
    color: black;  
}  

verringerst Du die line-height auf 75 Pixel, verringert sich die Footer-Höhe im IE6 von 80 Pixel auf 75 Pixel - und der weiße Strich verschwindet.

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo Ingrid,

Kann mir keiner bezüglich der IE6 Bugs helfen?

a) Verringere das seitliche Padding der Container #content oder #navigation um
   zwei Pixel, z.B. mit

welcher der zahlreichen IE6-Bugs für die fehlenden zwei Pixel verantwortlich ist, kann ich Dir nicht sagen

b) Der weiße Strich im Footer kommt vom Hintergrund des body-Elementes.
   Dein Footer wird im IE6 80 Pixel hoch, dies erfolgt aufgrund der
   line-height-Eigenschaft.

Der weiße Strich wird durch den IE6-Expanding-Box-Bug hervorgerufen:

Du hast für den Footer eine Höhe von 75 Pixel definiert.
Durch die Angabe von 80 Pixeln für die line-height wird der Inhalt im Footer 80 Pixel hoch und der IE 6 vergrößert die Box entsprechend, andere Browser schneiden den Inhalt außerhalb der 75-Pixel-Box ab.

Frage: warum definierst Du für den Footer überhaupt eine line-height von 80 Pixel?

Freundliche Grüße

Vinzenz

[HanSolo]

Besten Dank :-)... dann kann ich jetzt doch noch die Bayern gucken :-)