✔ IE 6: Menü klappt nicht auf, hover funktionieren

C

Club***

Hallo,

ich habe das Menü für die Homepage nocheinmal ganz neu geschrieben. Die Menüs klappen jetzt in allen Browsern auf.. außer dem Internet Explorer 6. Ich such schon seit gestern abend nach einer Lösung dazu, die ohne Javascript funktioniert.
Ohne Erfolg.

Bei den Oberpunkten Aktuelles und Verein sollten Unterpunkte aufklappen...
Warum gehen die Hover, wenn das Menü nicht aufklappt, kann der Internet Explorer das display:block Element nicht darstellen oder wie ?
Wie kann ich das ganze lösen ?

Achja, dann hab ich noch ein Problem. Wenn ich einen dritten Beitrag erstelle, überlaufen die #post den footer.
Wie schaffe ich es das sich der #content dynamisch an die Länge der #sidebar und die Gesamtlänge der #post anpasst ?
 
Zuletzt bearbeitet von einem Moderator:
Hi,

IE6 (und älter) interpretiert die :hover-Pseudoklasse in der Liste der HTML-Elemente ausschließlich für das <a>-Element - in dem Menü kommt aber, wie in der CSS-Praxis für ein Dropdown-Menü üblich, der Selektor "li:hover ul" zum Einsatz, um die versteckten Submenüs beim Überfahren der Hauptmenüpunkte einzublenden.

Wenn du das dazugehörige Javascript aus dem verwendeten "Suckerfish Dropdown-Menu" nicht nutzen willst, das dazu dient, die mangelhafte Unterstützung seitens des IE6 zu korrigieren, damit auch er die Submenüs anzeigt, schau dir alternativ Stu Nicholls' Dropdown-Menus an (wie z.B. A cross-browser drop-down cascading validating menu), die ohne JS-Unterstützung im IE6 funktionieren, dafür aber im Gegenzug mit einem speziellen und komplexeren HTML-Code aufwarten, der zunächst mal "gewohnheitsbedürftig" ist.

Was das "Überlappen" des Footer-Bereichs angeht, fehlt die Angabe clear:both für #footer, um den Textumfluß (float:left-Deklaration für #post) der beiden Spaltenblöcke abzubrechen.

mfg Maik
 
Ich probiers gleich mal aus :)


edit: Also das mit dem clear:both funktioniert, außer das jetzt der Abstand zwischen dem #footer und dem #content weg ist. Den bring ich auch nicht mehr mit margin-top hin..
Und jetzt kommt mal wieder der IE 6 ins Spiel, dort schiebt die Sidebar immer mit den Beiträgen mit..

das menü: Ich glaub ich nimm doch das Javascript, ich versteh zwar den Code auf cssplay, aber ich weiß dann doch nicht wie ich das ganze auf mein Bilder-Menü umsetze..
Doch zum Javascript, wo bau ich es ein ? In den Header, Body, ? In die Weiche rein, oder nicht ?

Und wo kommt das hin:
Code: 
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

--
flo
 
Zuletzt bearbeitet von einem Moderator:
margin-top funktioniert hier, wenn der Block zusätzlich mit position:relative formatiert ist.

Die Sidebar sitzt bei mir im IE6, wo sie hingehört.

mfg Maik
 
ClubatrOnic hat gesagt.:
das menü: Ich glaub ich nimm doch das Javascript, ich versteh zwar den Code auf cssplay, aber ich weiß dann doch nicht wie ich das ganze auf mein Bilder-Menü umsetze..
Doch zum Javascript, wo bau ich es ein ? In den Header, Body, ? In die Weiche rein, oder nicht ?

Und wo kommt das hin:
Code: 
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
Zum Vergrößern anklicken....
Hast du dir zu http://www.htmldog.com/articles/suckerfish/dropdowns/ nicht die Beispiele, wie z.B. http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html angeschaut? Da stehen im Quellcode die Antworten auf deine Fragen.

mfg Maik
 
Ach, ich hab den dritten Beitrag(also auf der Homepage) vorhin wieder gelöscht.
Deshalb, ich erstelle nochmal schnell einen, damit du siehst was ich meine.

Ein kleiner Abstand zeigt sich beim Footer aber immer noch nicht, es ist durchgehend grün..

Das Menü klappt jetzt, jedoch werden die Bilder nur zur Hälfte angezeigt.. und sind stark nach rechts versetzt was auch nicht zu verändern ist....
 
Zuletzt bearbeitet von einem Moderator:
Validier mal zwischendurch dein Markup (siehe http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0), denn da fehlt der abschliessende </div>-Tag für #content. Dann klappt's auch mit dem Abstand für den Footerbereich.

Da sich der Footer demnach wohl außerhalb des Blocks #content befinden soll, damit sich zwischen beiden eine weiße Lücke ergibt, muß in diesem Fall meine vorgeschlagene clear:both-Regel anderweitig in #content angewendet werden, damit es in den standardkonformen Browsern zu keinen Fehldarstellungen führt, die in der Vergangenheit hier im Forum in vielen Facetten so viele Male angesprochen wurde, dass es mir einen Webmaster-FAQ-Artikel wert war.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

mfg Maik
 
Moin,

ich komme mal auf die Sidebar und die verschobenen Submenüs zurück.
  • Sidebar:

    Um das Umbrechen des rechten Spaltenblocks zu vermeiden, empfehle ich, die einzelnen Posts in einem übergeordneten Block einzubetten (hier #postcolumn benannt), diesen anstelle der Klasse .post mit float:left zu formatieren, und #sidebar mit float:right ebenfalls aus dem normalen Textfluß zu nehmen.
HTML: 
<div id="content" class="clearfix">
    <div id="postcolumn">
        <div class="post">...</div>
        <div class="post">...</div>
        <div class="post">...</div>
        <!-- usw. -->
    </div>
    <div id="sidebar">...</div>
</div>
CSS: 
#postcolumn {
float: left;
width: 572px;
}

.post {
width: 550px;
min-height 50px;
color: #fff;
margin: 0px;
margin-left:10px;
margin-right: 10px;
padding-top: 5px;
border: 1px solid #ffffff;
margin-bottom: 10px;
/*float: left;*/ /* entfällt */
}

#sidebar {
height: 400px;
margin: 0px;
padding: 0px;
border: none;
/*margin-left: 570px;*/ /* entfällt */
float: right; /* Element steht rechts und wird links davon von nachfolgenden Elementen umflossen */
width: 306px; /* Elementbreite */
display: inline; /* fixt IE5/6-Doubled-Float-Margin-Bug */
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0 !important; /* Für moderne Browser */
margin-left: -3px; /* fixt IE6-3px-Gap-Bug */
padding-left: 10px;
padding-bottom: 10px;
border: 1px solid #fff;
}
  • Submenüs:

    Tausch die erste Regelmenge, in der sich u.a. im Selektor ein Syntaxfehler eingeschlichen hat:
CSS: 
#nav, nav ul { /* Das #-Zeichen fehlt beim zweiten ID-Bezeichner "nav" */
width: 900px;
height: 30px;
list-style: none;
margin: auto;
margin-top: 2px;
padding: 0;
text-align: center;
}
gegen diese beiden aus:
CSS: 
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
width: 900px;
height: 30px;
margin: 2px auto 0 auto;
}
und entferne im Verlauf des weiteren Stylesheets die Angaben margin-left:-40px für die Links der zweiten Menüebene.


Abschliessend noch zwei Tipps:
  • Mit der derzeitigen Dokumenttyp-Deklaration für das HTML-Dokument schalten die Browser in den proprietären Darstellungsmodi "Quirksmode", der sich in der IE-Familie negativ bemerkbar macht - so wird die Seite nämlich derzeit in ihrem Fenster nicht mehr horizontal zentriert.

  • Diese Quellcode-Passage zum "Vorladen" der Menübilder (insbesondere die "Hover"-Grafiken)
HTML: 
<div style="width:0px;height:0px;visibility:hidden;">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/home.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/homeover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/aktuell.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/aktuellover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/termine.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/training.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/trainingover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/verein.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/vereinover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/historie.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/historieover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/satzung.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/satzungover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/beitreten.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/beitretenover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/team.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/teamover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/galerie.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/galerieover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/anfahrt.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/anfahrtover.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/impressum.gif" alt="">
<img src="http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/button/impressumover.gif" alt="">
</div>
lässt sich mit Hilfe von CSS-Sprites aus dem Code verbannen.

Demnach setzt du die Grafiken entweder paarweise (home.gif + homeover.gif), oder im Optimalfall alle gemeinsam in eine einzige ein, und positionierst im Anzeigebereich der Links den entsprechenden Bildausschnitt mittels background-position.

In meinem CSS-Tutorial CSS-Rollover - Teil 2 (Menüpunkte besitzen jeweils ein individuelles Hintergrundbild) stelle ich diese Technik im Abschnitt "CSS-Rollover mit background-position" vor.


mfg Maik
 
Danke für deine Hilfe!

Die Seite ist jetzt valide.

Die Subemenüs zeigt der Ie 6 nun richtig an.
Doch die Sidebar ist immer noch da unten wo sie nicht hin soll. Und der #posttitle hat sich nach oben verschoben und den rest, also #postinfo, #postcontent unten gelassen..

Ich hab den Doctype geändert, und es funktioniert jetzt wieder alles. Danke für die Info.

Zu der Möglichkeit mit der background-position:
Ich denke das werde ich jetzt nicht mehr machen, da das Menü funktioniert.
Ich habe nur mal wieder ein Problem mit dem Ie6, beim Vorladen der Grafiken..:
Wenn ich das ganze mit visibility:hidden; mache, zeigt es mir die Bilder zwar nicht an, aber die Seite wird um einiges länger als sie sein sollte.

Dann: wie machen das die größeren Seiten, bei denen lädt die Seite kurz und schon ist ein hover da, ohne was im Quelltext zu finden. wie machen die das?


LG Flo
 
Entferne mal im Stylesheet ie6.css die rotmarkierten Passagen, dann klappt's auch im IE6 mit der Sidebar:
Code: 
#logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://aufhausen.bplaced.net/wordpress/wp-content/themes/bclite/img/header.png', sizingMethod='scale');
background: none;
}

#post {
width: 550px;
min-height 50px;
color: #fff;
margin: 0px;
padding: 0;
margin-left: 5px;
margin-right: 10px;
padding-top: 5px;
border: 1px solid #ffffff;
margin-bottom: 10px;
float: left;
}

#postcontent {
width: 520px;
min-height: 80px;
font-size: 12px;
color: #fff;
margin: 0px;
margin-top: 3px;
margin-left: 13px;
margin-right: 15px;
border: none;
}

#posttitle {
width: 530px;
height: 25px;
margin: 0px;
margin-top: 5px;
margin-left: 12px;
margin-right: 10px;
}

#postinfo {
width: 530px;
height: 12px;
font-size: 11px;
color: #ffffff;
margin: 0px;
margin-top: 0px;
margin-left: 13px;
margin-right: 10px;
border: none;
}

#postoption {
margin-right: -20px;
margin-bottom: 5px;
margin-left: 340px;
margin-top: 5px;
width: 200px;
}

#sidebar {
height: 300px;
margin: 0px;
padding: 0px;
border: none;
display: inline;
float: right; 
width: 306px;
margin-left: -3px;
margin-right: 12px;
margin-top: -193px;
margin-bottom: 10px;
padding-left: 10px;
border: 1px solid #fff;
}


visibility:hidden versteckt zwar ein Element, hält aber weiterhin einen Platzhalter im Textfluß vor. display:none wäre hier die Eigenschaft deiner Wahl, um ein Element ohne Platzhalter zu verstecken.

Vermutlich werden diese Seiten ebenfalls die populäre "Sprites"-Technik nutzen.

Machen wir hier im Forum übrigens auch an diversen Stellen, um die HTTP-Requests deutlich herabzusenken:

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück