IE6 Darstellung miserablè

[Freelancer]

Hallo jswelt !!

Entschuldigt den Wenig-Aussagekräftigen Titel. Aber anders kann ich es leider nicht ausdrücken.

Vorweg schon einmal, es geht um diese Seite bzw. diese Navigation:

http://www.forever-together.eu

Diese sollte von der Darstellung im Optimalfall in etwa so aussehen:

​

Firefox, Safari, Internet Explorer 7 etc. stellen die Navigation auch richtig dar. NUR Internet Explorer 6 natürlich nicht. Mir könnte das im Grunde ja egal sein, wüsste ich nicht zufällig, dass die Besucher dieser Page (Bekannte meiner Freundin) zumeist IE6 aus mir unbekannten Gründen verwenden.

Naja, man könnte jetzt tiefergehende Debatten über die bisherige Arbeitsweise dieser Page halten, über Dinge, die ich bei der Programmierung schöner machen könnte (Beispiel: Die leeren DIV's- dafür gibt es bestimmt schönere Alternativen) etc.

Das Problem:
Inzwischen konzentriere ich mich im wesentlichen auf Visual Basic 2005 und C##-Programmierung, und gestalte nur noch gelegentlich Webseiten. Insofern komme ich nach und nach aus der Übung- gerade was IE6-CSS-Hacking betrifft.

Ich hoffe, Ihr nehmt mir das nicht all zu übel und könnt mir helfen.

Bin im übrigen trotzdem offen für alles... (...was die Seite schöner/besser/schneller/stabiler macht)!


Danke vorweg für Eure Hilfe.

Grüße
Stephan


PS: Habe jetzt einen Anhang beigefügt, der Euch helfen könnte.

 

[undefined]

Wieso die Möchtegern-Slicerei? Ein Hintergrundbild in einem Div mit den Navigationselementen wäre viel besser.

Wieso JS für die Hover-Geschichten?

Wieso die Mehrfachvergabe von ids?

 

[anna55]

Der Threadtitel ist völlig ok, sieht wirklich übel aus im IE6.

Das sollte helfen:

* html #navigation_right {
	margin-left:-2px;
}
* html #navigation_bottom {
	margin-top: -3px;
}

 

[undefined]

Bei sauberem Markup und korrekten Dimensionszuweisungen braucht es keinerlei Hacks.

 

[Freelancer]

1. Wieso die Möchtegern-Slicerei?
2. Ein Hintergrundbild in einem Div mit den Navigationselementen wäre viel besser.

• Kannst du die Fett-gedruckte Problematik (siehe Punkt 1) genauer erläutern?
• Zu Satz 2: Hängt dann ja wohl mit dem u. a. Punkt "JS für die Hover-Geschichten" zusammen. Komme gleich darauf zu sprechen.

Wieso JS für die Hover-Geschichten?

Ich arbeite generell gerne - was Hover-Effekte betrifft - mit JavaScript. Gibt es bessere Alternativen? Natürlich, mit CSS kann ich in den Hintergrund des DIV's ein Bild stecken, kein Problem:

#navi_button_home {
	url(../Images/finish/head_2_middle_home_1.jpg)
	width: 113px;
	}

#navi_button_wir {
	url(../Images/finish/head_3_middle_wir_1.jpg)
	width: 113px;
	}
	
...

Aber hier habe ich ja noch keinen Hover-Effekt. Lt. meinem beschränktem Wissen würde ich sagen, das jetzt im HTML-Code ohnehin wieder JS zum Einsatz kommen müsste.

Dann hätte ich die Bilder des Hovereffektes in 2 Dateien gesplittet. Da ist es mir dann eigentlich lieber, ich habe alle technischen Navigationselemente an einem zentralen Ort untergebracht (bspw. der HTML-Datei)- der besseren Übersicht halber.

Oder verstehe ich gerade einiges falsch?

Kannst du dass genauer erläutern?

Wieso die Mehrfachvergabe von ids?

Ok, da hast du absolut recht. Hier müssten Klassen her. Das werde ich ändern, kein Ding. Aber ist dass die Ursache für die Internet Explorer-Problematik?

Sofern du es weißt- könntest du auf die IE6-Problematik noch besser eingehen?

Vielen Dank vorweg und viele Grüße
Stephan

 

[undefined]

Wie wir wissen kann IE<7 hover nur bei Links. Deine Hover-Effekte beziehen sich auf Links. Was folgern wir daraus?

Hack-freies CSS:

#navigation_bottom{
clear:both;
margin-top:0px;
}
#navi_button{/*Mach 'ne Klasse draus!*/
display:block;
overflow:hidden;/*Korrektur für unkorrekte Breite von Navi-Bildchen*/
}

Nicht vergessen, Deine a-tags zu schließen...

 

[Freelancer]

Der Threadtitel ist völlig ok, sieht wirklich übel aus im IE6.

Das sollte helfen:

* html #navigation_right {
	margin-left:-2px;
}
* html #navigation_bottom {
	margin-top: -3px;
}

Puhh, ich komme mit Posten gar nicht nach. Erst einmal Danke anna! Das funktioniert tatsächlich. Das Problem:

Ich weiß nicht, was hier passiert. Kannst du erläutern, wieso dieser kleine Hack nun was bewirkt?

Habe den Hack eingebaut, und es sieht in der Tat nun richtig aus. Das Problem, schaut man sich eine Historie meiner IE6-Hack-Probleme an, tauchen ähnliche Probleme immer wieder auf:

1. http://forum.jswelt.de/css-und-x-html/33680-verstaendnisfrage-css.html
2. http://forum.jswelt.de/css-und-x-html/34271-css-navi-problem.html
3. ...

Eigentlich ist das peinlich, aber ich nehme die Schmach auf mich. Gerne würde ich einmal einen Schluss aus den Hilfestellungen ziehen, damit ich nicht immer wieder fragen muss.

Kannst du mir erklären, was hier passiert?

Bei sauberem Markup und korrekten Dimensionszuweisungen braucht es keinerlei Hacks.

Stimme ich Dir zu. Wie gesagt- ohne meine Arbeit entschuldigen zu wollen, aber das Problem liegt hier:

.....gestalte nur noch gelegentlich Webseiten. Insofern komme ich nach und nach aus der Übung......

Wie wir wissen kann IE<7 hover nur bei Links. Deine Hover-Effekte beziehen sich auf Links. Was folgern wir daraus?

Hack-freies CSS:

#navigation_bottom{
clear:both;
margin-top:0px;
}
#navi_button{/*Mach 'ne Klasse draus!*/
display:block;
overflow:hidden;/*Korrektur für unkorrekte Breite von Navi-Bildchen*/
}

Nicht vergessen, Deine a-tags zu schließen...

Danke!! Werde mir die Ratschläge zu Herzen nehmen, und meine Seite umbauen.

Wirklich, ich danke euch für eure Hilfe.

Grüße
Stephan

 

[dkdenz]

Ich arbeite generell gerne - was Hover-Effekte betrifft - mit JavaScript. Gibt es bessere Alternativen? Natürlich, mit CSS kann ich in den Hintergrund des DIV's ein Bild stecken, kein Problem:


Aber hier habe ich ja noch keinen Hover-Effekt. Lt. meinem beschränktem Wissen würde ich sagen, das jetzt im HTML-Code ohnehin wieder JS zum Einsatz kommen müsste.

Hovereffeke ohne JS mit nur einer Grafik: dkdenz' CSS-Spielwiese

 

[anna55]

Bei sauberem Markup und korrekten Dimensionszuweisungen braucht es keinerlei Hacks.

Weiß nicht, ob ich das so 100%ig unterschreiben kann, aber ich wünsche es mir regelmäßig.
Aber ich bin ganz bei Dir, undefined: Wir sollten uns an Standards halten und sauberen Code schreiben, dann tauchen ganz klar weniger Probleme auf.
Trotzdem bin ich dankbar für diese kleinen Hacks, mit denen ich den 6er und manchmal auch noch extra den 5.5er IE auf Linie zwingen kann.
Hab jetzt bei Stephan nicht so genau auf das Markup geachtet wie Du, hab z.B. nicht gesehen, dass die a-Tags nicht geschlossen waren.

@Stephan: Ich hab einfach Deinen Code als gegeben und über den Star-HTML-Hack Einfluss auf die Darstellung im IE6 genommen. (Auch der 5.5er schluckt das so.)

Grundsätzlich stelle ich immer wieder fest, dass der FF und die IE Abstände unterschiedlich interpretieren. So ganz glaub' ich nicht daran, dass ein cross-browser-coding so ganz ohne Tricks funktioniert - bezogen auf HTML und CSS. Außer man schreibt halt nur, was überall stimmig ist. Aber so ganz einengen lassen möchte ich mich einfach nicht, nur weil die IE - besonders der 6er - so ausnehmend standardmäßig programmiert wurde. Ob sich das mit dem 8er ändern wird? Jetzt ist Molly Holzschlag bei M$ und macht ein paar Wellen. Aber Du hast ja selbst geschrieben, dass der 6er im Gebrauch ist und auch die Statistiken sagen so. Wer weiß, wann der mal so zurückgeht wie es jetzt beim 5.5er der Fall ist.

 

[undefined]

Ich bin nicht grundsätzlich gegen Hacks. Wo sie unnötig sind, wie in Bezug auf Freelancers Problem, sollte man aber m. E. darauf verzichten.

 

[anna55]

Ich bin nicht grundsätzlich gegen Hacks. Wo sie unnötig sind, wie in Bezug auf Freelancers Problem, sollte man aber m. E. darauf verzichten.

Hab Dein CSS jetzt eben mal eingesetzt und siehe da, bis runter zum 5.5 IE siehts einwandfrei aus. (Weiß, dass Du Code testest, bevor Du was behauptest. Ist nicht bei jedem so. )

Heißt im Klartext: Vermutlich bin ich doch zu nachlässig im Bezug auf korrektes CSS und baue dann Hacks ein, die bei ordentlichem Coding gar nicht nötig wären. Werde also hier einen weiteren guten Vorsatz für 2008 fassen: ordentliches CSS basteln.