Menue geht mit IE6 aber mit IE7 u. Firefox nicht...

[stefan58]

Hallo zusammen!

Von Gestern auf Heute bin ich für unsere neu ins web gestellte Homepage zuständig.
Leider musste ich feststellen, dass ein horizontales Menue nicht nur im IE 6 funktioniert.
Im IE 7, Firefox funktioniert das menue nicht. Das heißt:
Wenn man mit dem Mauszeiger über das Menue streicht erscheint nicht die Hand und
es ist auch keine Funktion durch klicken ausführbar. Im IE 6 ist alles ok!

Ich vermute, dass ich für die anderen Versionen IE 7, IE 5 und Firefox zusätzliche
Angaben machen muss - habe aber leider noch keine Ahnung welche.

Ich hoffe ich habe alle wichtigen Bereiche aus dem script kopiert.

Vielen Dank im Voraus an die Experten!

Gruß Stefan

ul {
 position: absolute;
 width: 750px;
 height: 113px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 left: -1px;
 top:35px;
}

<ul>
  <li id="bu2"><a href="../texte/glaskos.html"><span>Glas/ Kosmetik</span></a></li>
  <li id="bu3"><a href="../texte/kunkos.html"><span>Kunststoff/ Kosmetik</span></a></li>
  <li id="bu4"><a href="../texte/kunchem.html"><span>Kunststoff/ Chemie</span></a></li>
  <li id="bu5"><a href="../texte/glaspharm.html"><span>Glas/ Pharmazie</span></a></li>
  <li id="bu6"><a href="../texte/airless.html"><span>Airless-Spender</span></a></li>
  <li id="bu7"><a href="../texte/dosier.html"><span>Dosierpumpen</span></a></li>
  <li id="bu8"><a href="../texte/news.html"><span>News</span></a></li>
  <li id="alles"><a href="../texte/allesin.html"><span>Alles aus einer Hand</span></a></li>
  <li id="hulo"><a href="../texte/hulo.html"><span>TEST GmbH</span></a></li>
</ul>

*li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a, li#bu5 a, li#bu6 a, li#bu7 a, li#bu8 a {
 position: absolute;
 width: 110px;
 height: 32px;
 bottom: 3px;
 text-decoration: none;
 left: 633px;
 visibility: inherit;
 z-index: 2;
}

/* adjusted values for IE6 */
html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a, * html*li#bu5 a, * html*li#bu6 a, * html*li#bu7 a { bottom: 38px; }
*li#bu8 a { bottom: 41px; }
*li#hulo a {
 position: absolute;
 width: 128px;
 height: 154px;
 bottom: 12px;
 text-decoration: none;
 left: 1px;
 visibility: inherit;
 z-index: 2;

li#alles a { left: 126px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#alles a:hover { background-image:url(../bilder/Trans.gif); }
li#alles a:active { background-image:url(../bilder/Trans.gif); }

li#bu1 a { left: 21px; }
li#bu2 a { left: 126px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu2 a:hover { background-image:url(../bilder/GlasKos1.png); }
li#bu2 a:active { background-image:url(../bilder/GlasKos.png); }

li#bu3 a { left: 227px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu3 a:hover { background-image:url(../bilder/KunKos1.png); }
li#bu3 a:active { background-image:url(../bilder/KunKos.png); }

li#bu4 a { left: 329px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu4 a:hover { background-image:url(../bilder/KunChem1.png); }
li#bu4 a:active { background-image:url(../bilder/KunChem.png); }

li#bu5 a { left: 430px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu5 a:hover { background-image:url(../bilder/GlasPharm1.png); }
li#bu5 a:active { background-image:url(../bilder/GlasPharm.png); }

li#bu6 a { left: 532px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu6 a:hover { background-image:url(../bilder/airless1.png); }
li#bu6 a:active { background-image:url(../bilder/airless.png); }

li#bu7 a { left: 633px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu7 a:hover { background-image:url(../bilder/dosier1.png); }
li#bu7 a:active { background-image:url(../bilder/dosier.png); }

li#bu8 a { left: 733px; background: url(../bilder/Trans.gif) 0 0 no-repeat; }
li#bu8 a:hover { background-image:url(../bilder/news1.png); }
li#bu8 a:active { background-image:url(../bilder/news.png); }

[EKKi]

Mahlzeit,

Von Gestern auf Heute bin ich für unsere neu ins web gestellte Homepage zuständig.

Glückwunsch und Beileid.

Leider musste ich feststellen, dass ein horizontales Menue nicht nur im IE 6 funktioniert.

Da hat der vorherige "Webmaster" also Murks gemacht und die Seiten entweder während der Entwicklung nur auf dem IE6 getestet oder für den IE6 "optimiert". Wenn Du es Dir dauerhaft einfacher machen willst, kommst Du um eine komplette Überarbeitung sowohl des HTML-Codes als auch sämtlicher CSS-Anweisungen nicht herum.

Ich vermute, dass ich für die anderen Versionen IE 7, IE 5 und Firefox zusätzliche
Angaben machen muss - habe aber leider noch keine Ahnung welche.

Mitnichten! Du solltest im Gegentum eher dafür sorgen, dass sowohl HTML als auch CSS (insbesonders dort finde ich bei Dir ziemlich viele ungültige Angaben, also http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack@title=Hacks für den IE) valide sind. Anschließend kannst Du mit bestimmten wohldosierten Hacks oder auch <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> dafür sorgen, dass allgemein der IE und speziell Versionen, die kleiner als 7 sind, den Inhalt auch so darstellen, wie es bei richtigen Browsern ist.

<li id="bu2"><a href="../texte/glaskos.html"><span>Glas/ Kosmetik</span></a></li>

Das <span> ist übrigens extrem hyperfluid.

MfG,
EKKi

[Cheatah]

Hi,

Da hat der vorherige "Webmaster" also Murks gemacht und die Seiten entweder während der Entwicklung nur auf dem IE6 getestet oder für den IE6 "optimiert". Wenn Du es Dir dauerhaft einfacher machen willst, kommst Du um eine komplette Überarbeitung sowohl des HTML-Codes als auch sämtlicher CSS-Anweisungen nicht herum.

ACK.

Mitnichten! Du solltest im Gegentum eher dafür sorgen, dass sowohl HTML als auch CSS [...] valide sind.

ACK.

(insbesonders dort finde ich bei Dir ziemlich viele ungültige Angaben, also http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack@title=Hacks für den IE)

Stop! Hacks haben *nichts* mit Gültigkeit zu tun. Im Gegenteil. Die meisten Hacks sind absolut und vollkommen valide und tendenziell um einiges problemärmer als Conditional Comments zur Einbindung von CSS. Dass in diesem speziellen Code invalider Code in der Nähe von Hacks produziert wurde, tut dem keinen Abbruch.

Anschließend kannst Du mit bestimmten wohldosierten Hacks oder auch <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> dafür sorgen, dass allgemein der IE und speziell Versionen, die kleiner als 7 sind, den Inhalt auch so darstellen, wie es bei richtigen Browsern ist.

Die einzigen Vorteile, die Conditional Comments zur Einbindung von CSS haben, treten erst in Größenordnungen auf, in denen sie zu Problemen führen, die nicht mehr sinnvoll lösbar sind - außer durch Umstieg auf valide Hacks. Nutze *keine* Conditional Comments zur Einbindung von CSS, sofern es sich irgendwie vermeiden lässt.

Cheatah

[suit]

Die einzigen Vorteile, die Conditional Comments zur Einbindung von CSS haben, treten erst in Größenordnungen auf, in denen sie zu Problemen führen, die nicht mehr sinnvoll lösbar sind - außer durch Umstieg auf valide Hacks. Nutze *keine* Conditional Comments zur Einbindung von CSS, sofern es sich irgendwie vermeiden lässt.

seh ich nicht so - ein conditional comment sort mit fast 100%iger sicherheit dafür, dass genau ein browser angesprochen wird

überhaupt benötigt man nur für den ie6 ausnahmen - ab und and mal die den ie7 - ich hab sehr sehr selten probleme mit opera, firefox oder safari

im übrigen hilft bei mir dieses flowchart und es führt fast immer zum gewünschten ergebnis:
10: ist das problem ohne hacks/conditional comments lösbar? ja -> erledigt; nein -> weiter bei 10

der vorteil: wenn ein neuer browser kommt der ggf wieder auf einen alten "bug" (hack) anspricht, muss man nichts ändern

bereits 1 monat nach dem bauen einer seite kennt keiner mehr den eigentlichen code und die genaue syntax von speziellen hacks für bestimmte browser die vielleicht dann 12 monate später nicht mehr existieren

conditional commentes spezifizieren genau einen (oder mehrere browser)

mit if lte ie6 weiss ich "ah, ie6 verbockt was mit dem normalen css - also muss ich hier nachsehen" - ich muss nicht erst überlegen, welcher hack auf welchen browser wie in welcher reihenfolge anspricht

einfach ein zusätzliches stylesheet rein und die sache hat sich

[Cheatah]

Hi,

seh ich nicht so

dann recherchiere nach dem Thema und lerne.

der vorteil: wenn ein neuer browser kommt der ggf wieder auf einen alten "bug" (hack) anspricht, muss man nichts ändern

Ja - wenn Du Hacks benutzt hast. Die Wahrscheinlichkeit, dass nicht nur der Hack, sondern auch das Gehackte[1] in diesem neuen Browser gleich ist, liegt dann nahe 100%. Bei Conditional Comments musst Du der Darstellung wegen den HTML-Code ändern.

bereits 1 monat nach dem bauen einer seite kennt keiner mehr den eigentlichen code und die genaue syntax von speziellen hacks für bestimmte browser die vielleicht dann 12 monate später nicht mehr existieren

Laut Deinen eigenen Aussagen benötigst Du nur Hacks für IE 6 (* html) und IE 7 (*+html). Alzheimer hast Du aber nicht, oder?

conditional commentes spezifizieren genau einen (oder mehrere browser)

Und in Bezug auf neue Browserversionen genau die falschen.

mit if lte ie6 weiss ich "ah, ie6 verbockt was mit dem normalen css - also muss ich hier nachsehen"

Und suchst stundenlang in mehreren Dateien rum, anstatt alle Styles zu einem Gebiet an der selben Stelle zu haben.

ich muss nicht erst überlegen, welcher hack auf welchen browser wie in welcher reihenfolge anspricht

Wenn Du hierin tatsächlich Probleme siehst, dann verstehe ich Deinen Irrtum.

einfach ein zusätzliches stylesheet rein und die sache hat sich

Ich habe mich - privat wie beruflich - *sehr* intensiv mit dem Thema beschäftigt und bin zu dem Schluss gekommen: Wer Conditonal Comments zur Einbindung von Stylesheets benutzt, obwohl es sich vermeiden lässt, der hat von Webseiten- und Software-Entwicklung nicht viel Ahnung.

Cheatah

[1] Halb und halb.

[Ingo Turski]

Hi,

Ich habe mich - privat wie beruflich - *sehr* intensiv mit dem Thema beschäftigt und bin zu dem Schluss gekommen: Wer Conditonal Comments zur Einbindung von Stylesheets benutzt, obwohl es sich vermeiden lässt, der hat von Webseiten- und Software-Entwicklung nicht viel Ahnung.

ich finde CSS-Hacks für die IEs zwar auch praktisch(er), aber teile Deine pauschale Einstellung nicht. Da es sich ja fast immer nur um IE-Hacks handelt: warum sollen andere Browser diesen für sie überflüssigen Code überhaupt vorgesetzt bekommen? Das gilt auch für den IE7, wenn der keine Korrekturen benötigt. Abgesehen davon kann man über CC auch evtl. erforderlichen invaliden Code eintragen, ohne ständig die Validator-Meldungen prüfen zu müssen.

freundliche Grüße
Ingo

[suit]

Ja - wenn Du Hacks benutzt hast. Die Wahrscheinlichkeit, dass nicht nur der Hack, sondern auch das Gehackte[1] in diesem neuen Browser gleich ist, liegt dann nahe 100%. Bei Conditional Comments musst Du der Darstellung wegen den HTML-Code ändern.

warum sollte man den html code ändern - ein condtional comment sollte nur zum einbinden eines zusätzlichen stylesheets verwendet werden

Laut Deinen eigenen Aussagen benötigst Du nur Hacks für IE 6 (* html) und IE 7 (*+html). Alzheimer hast Du aber nicht, oder?

ich weiss nicht, was du beruflich machst - aber ich habe "ab und an" mit html zu tun ich weiss nicht mehr, 100%ig welche formatierung für was in welcher website die ich gebaut habe zuständig ist - wenn man tag täglich templates baut vergisst man das schon mal - bei einer website ist das verständlich, aber wenn du im monat 10 templates baust, dann versichere ich dir, dass du nach einem jahr auch nicht mehr weisst wo bei welchem was im code steht

es spart enorm viel zeit das alles separat in einem zweiten file zu haben

conditional commentes spezifizieren genau einen (oder mehrere browser)

Und in Bezug auf neue Browserversionen genau die falschen.

ich gehe prinzipiell davon aus, dass neue browser besser sind als vorgänger - wenn ich ein stylesheet für den ie7 mache, dann gilt das nicht automatisch für den ie8, sollte der rauskommen nutzt der das allgemeine welches auch bei safari, firefox usw einwandfrei funktioniert - ansonsten würde ggf eine ausnahmeregelung die einen renderfehler umgeht auch bei einem neuen browser der diesen fehler nicht mehr hat bestehen

was ist wenn *+html auch im ie8 zum "erfolg" führt aber er das was du damit anders formatierst eigentlich nicht falsch dargestellt würde im ie7 aber schon? -> conditional comment bessere lösung

Und suchst stundenlang in mehreren Dateien rum, anstatt alle Styles zu einem Gebiet an der selben Stelle zu haben.

es gibt ein stylesheet für alle browser und wenns mal irgendo zusätzliche für den ie gibt stehen da drinne 10 zeilen, das ist übersichtlich und ein anderer findet sich ebenfalls schnell zurecht

Wenn Du hierin tatsächlich Probleme siehst, dann verstehe ich Deinen Irrtum.

ich muss den code lesen können und jeder andere auch, und das führ zu problemen weil nicht jeder jeden hack in jeder kombinationsmöglichkeit kennen kann

Ich habe mich - privat wie beruflich - *sehr* intensiv mit dem Thema beschäftigt und bin zu dem Schluss gekommen: Wer Conditonal Comments zur Einbindung von Stylesheets benutzt, obwohl es sich vermeiden lässt, der hat von Webseiten- und Software-Entwicklung nicht viel Ahnung.

wie gesagt, ich mach das nicht zum spass, ich verdien mein geld damit - wer allein arbeitet kann sich das leisten, aber wenn man mit mehreren leuten gemeinsam an vielen verschiedenen webseiten über einen großen zeitraum arbeitet, dann bricht dir das defintiv das genick ;) - es spar im nachhinein einiges an arbeit - und ich hab wahrlich schon viele tage und wochen damit verschissen, irgendwelche "altlasten" zu fixen, die irgendjemand mit wenig umsichtiger verwendung von css hacks begangen hat

mit conditional comments passiert das nicht, da steht eben klar drin "wenn du ein ie6 bist tu jenes"

und versteht mich nicht falsch: conditional comments werden von mir nur eingesetzt um zusätzliche stylesheets einzubinden, keinesfalls dazu um invaliden html code für den ie zu schreiben weils mit css keine lösung gab (die gibt es immer)