• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IE6 float von UL/LI in DIV

C

cKoNe_RaZoR

Neues Mitglied
Hallo liebe Community,

habe mal wieder ein Problem. Mein CSS will mit dem IE6 nicht so richtig. IE6 is schon ne Zicke :D

Möchte das mein Menü koreckt dargestellt wird, wie im IE8 und FF und Opera und Chrome und Safari -.-*

Das floaten funktioniert nicht soo ganz.

Hier mal mein CSS Code...

Code: 
body {
behavior:                 url(csshover.htc); 
}
    
div.menu { 
width:                     100%; 
background:             url(img/menu_bg.png); 
float:                     left;
}

div.menu ul#menu0 { 
list-style:             none; 
margin:                 0px; 
padding:                 0px;  
float:                     left;
height:                    44px;
} 

div.menu ul#menu0 li ul { 
list-style:             none; 
margin:                 0px; 
padding:                 0px;  
float:                     left;
} 

div.menu ul#menu0 li {
position:                 relative;
float:                    left;
} 

div.menu ul#menu0 ul {
display:                 none;
width:                     100%; 
margin-top:                -6px;
left:                    -1px;
} 

div.menu ul#menu0 li:hover ul {
display:                 block;
width:                     100%; 
margin-top:                -6px;
left:                    -1px;
} 

/*MAIN-LINK-STYLE*/

div.menu ul#menu0 li a {
font:                     bold 13px/22px Verdana,Arial,Helvetica,sans-serif;
height:                    40px;
margin:                 0px; 
padding:                 8px 10px 0px 10px; 
color:                     #375162; 
text-transform:         uppercase;
display:                block;
}

div.menu ul#menu0 li a:hover {
background:             url(img/menu_hover.gif);
color:                    #ffffff; 
}


/*SUBMENU-LINK-STYLE*/

div.menu ul#menu0 li ul li  a {
color:                     #375162; 
background:             #e5f3fe; 
text-decoration:         none; 
height:                    22px;
text-align:                center;
padding:                0px;
display:                block;
}

div.menu ul#menu0 li ul li  a:hover { 
color:                     #ffffff; 
background:             url(img/submenu_hover.gif); 
}

div.menu ul#menu0 li ul li  {
display:                block;
float:                    none;
}

div.menu ul#menu0 ul { 
position:                 absolute; 
z-index:                 500;
border-left:            1px solid #a3a3a3;
border-right:            1px solid #a3a3a3;
border-bottom:            1px solid #a3a3a3;
}

/*ACTIVE TAB ANDEREN BG GEBEN*/

div.menu ul#menu0 li a#CurrentLink {
background:             url(img/menu_active.gif);
color:                    #ffffff; 
}

UND hier der HTML CODE
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Menü-Test</title>
  <link rel="stylesheet" type="text/css" href="dnn_tauglich.css">
 </head>
 <body>
<div class="menu">
    <ul id="menu0">
        <li class="CurrentItem">
        <a id="CurrentLink" class="hide" href="">Willkommen</a>
        </li>
        <li class="Tab487">
        <a class="hide" href="">Unsere Leistungen</a>
            <ul id="menuList487">
                <li class="Tab795"><a class="hide" href="">Untermenü 1</a></li>
                <li class="Tab685"><a class="hide" href="">Untermenü 2</a></li>
                <li class="Tab684"><a class="hide" href="">Untermenü 3</a></li>
                <li class="Tab686"><a class="hide" href="">Untermenü 4</a></li>
                <li class="Tab729"><a class="hide" href="">Untermenü 5</a></li>
                <li class="Tab730"><a class="hide" href="">Untermenü 6</a></li>
            </ul>
        </li>
        <li class="Tab489"><a class="hide" href="">Seminare</a></li>
    </ul>
</div>
</body>
</html>



Bin am verzweifeln und wäre über jeden Tipp dankbar... Habe herausgefunden, das wenn ich a floate und li, dass dann die Elemente richtig gefloatet werden, ABER dann is das ausklappen fürn PO :-(


Ich hoffe auf eure Intelligenz :D


LG und Danke schonmal fürs durchlesen

Micha
 
Hmm

Ich möchte kein JS benutzen...

Es muss doch mithilfe von additional Comments möglich sein das zu realisieren?

Danke für deine Mühe
 
cKoNe_RaZoR schrieb:
Ich möchte kein JS benutzen...

Es muss doch mithilfe von additional Comments möglich sein das zu realisieren?

Danke für deine Mühe
Zum Vergrößern anklicken....

Conditional Comments braucht man sowieso.
Es gibt eine Methode von Stu Nicholls wo für den IE6 mithilfe von Kommentaren Tabellen eingefügt werden. Das ist reines CSS ohne JS.

Allerdings ist die Methode sehr heikel. Ausgedehnte Kommentare im Markup sind manchmal nicht ohne.
Und wie der IE damit in Zukunft umgeht ist auch eher unsicher. Dann muss man alle HP's wo man das gemacht hat wieder ändern.
 
cKoNe_RaZoR schrieb:
ich suche ja für meine variante einen fix :-(
Zum Vergrößern anklicken....

ähem, nur mal am Rande:
HTML: 
behavior: csshover.htc
Dahinter steckt ja letzlich auch JS.

Du hast zwei Möglichkeiten:
-Entweder so wie Stu Nicholls es macht, oder

-du brauchst JS was für den IE6 diese Klasse einfügt.
Da ist Son of Suckerfish einfach das Bekannteste und Bewährteste.

Anders geht es schlichtweg nicht. ;-)

Dein Beispiel mit dem display:none; für die Subliste finde ich nicht so solide, deshalb hab ich ein anders gelöstes Beispiel gepostet, von dem ich definitiv weiss das es sicher und solide funktioniert.
 
ich kann nicht mit suckerfish arbeiten, da ich keine DIV benutzen kann..

nutze DNN und skinne grad dafür.... Modul SEO_Menü ist installiert....

von mir aus bekommt der IE6 ein komplett eigenes stylesheet, aber das problem ist das der aufbau der HTML datei und alle Tags gleich beiden müssen.


Aber das muss doch so zu lösen sein????
 
Dein Beispiel ist im Browser zunächst nicht zu sehen.
Ohne Grafiken (die wir nicht haben) ist da nur weiße Schrift auf weißem Hintergrund.

Daß sich ul li a auf die Komplette Breite ausdehnt hängt mit haslayout für <a>
zusammen (ausgelöst durch height für div.menu ul#menu0 li a und div.menu ul#menu0 li ul li a).
Siehe: Über hasLayout — das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

Wozu du die height-Angaben benötigst läßt sich ohne die Grafiken nicht sagen.
Vielleicht geht es auch ohne height oder mit width für <a>.

Am Rande:
Für das Son of Suckerfish-dropdown kannst du dein html-Code beibehalten.
Nur eine ID ist nötig. Die class sfhover fügt das Script bei Bedarf automatisch ein.

koslowskis Beispiel basiert auf das Suckerfish-dropdown, kommt ohne <div>s aus und enthält HasLayout für <a>.
Probiere es aus (es funktioniert auch mit csshover.htc).
 
Zuletzt bearbeitet:
Habs mal hochgeladen, damit ihr sehen könnt, was genau passiert im IE6

Menü-Test


Habe immer noch keine Lösung...

Das Problem ist ich kann keine Classes oder IDs hinzufügen, genausowenig wie ich an der html datei irgendwas machen kann...Liegt an SEO_Menu für DotNetNuke...

Ich hoffe der Upload hilft evtl

Lieben Dank Micha
 
dann gib li mal ne Breite:
HTML: 
div.menu ul#menu0 li {
position:                 relative;
float:                    left;
width:11em;
}

So bekommst du die Links im IE6 auf die Reihe.

Aber ohne JS ohne Stu Nicholls Lösung klappt da trotzdem nix aus.

Der IE6 akzeptiert :hover nur in Verbindung mit a.
Mit li:hover kann er nix anfangen.
 
Doch es ist möglich oihne DIREKTES JS Li:hover für den IE6 zu machen!!!!

mit der csshover.htc datei...


möchte ja eine variable breite meiner LIs haben, damit ich kurzen und langen Text einfügen kann....


Das Hovern ist nicht das Problem, das Problem ist, dass die Links nicht nebeneinanderstehen im IE6....Weil er dafür nicht width:100%; haben will
 
cKoNe_RaZoR schrieb:
Doch es ist möglich oihne DIREKTES JS Li:hover für den IE6 zu machen!!!!

mit der csshover.htc datei...
Zum Vergrößern anklicken....

Es gibt nur die beiden von mir genannten Möglichkeiten, den IE6 zum Ausklappen des Submenüs zu bewegen. Punkt!

Mach die Datei csshover.htc auf dann siehst du das es JS ist, ob dir das gefällt oder nicht.

li und a brauchen HasLayout und a muss auch floaten:
HTML: 
* html div.menu ul#menu0 li  {
    height:1px;
}

* html div.menu ul#menu0 li a  {
    float:left;
    height:1px;
}

Damit das nur der IE6 interpretiert das * html davor, Conditional Comment wäre aber besser.
 
Der IE6 kann die zweite (absolute positionierte) Ebene nicht prozentuell von dem Float ohne Breitenangabe berücksichtigen.

Da der Internetexplorer in dem Beispiel keine Schriftvergrößerung zulässt könnte man den Wert für width fest eintragen.

Code: 
* html div.menu ul#menu0 li  {
zoom:1;
position: relative; /*negative Verschiebung sichtbar machen und containing-block für ul li ul*/
white-space: nowrap; /* Umbruch verhindern /*
}

/*shrink-to-fit :*/
* html div.menu ul#menu0 li a,
* html div.menu ul#menu0 li ul li a  {
    display: inline;
    zoom:1;
}

* html div.menu ul#menu0 li ul li a  {
width: 13em; /* je nach Schriftart anpassen*/
}

* html div.menu ul#menu0 li ul {
padding: 0;
top: 47px;
width: 1em; /*wird durch ul li li a auseinandergedrückt (Expanding Bug)*/
}

Ganz genau wird das aber nicht immer passen (Schrift-Laufweite).

Mit offsetWidth ließe sich die px-Breite von <li class="Tab487"> ermitteln.

Wenn sich wirklich nur die css-Datei anpassen lässt suche nach:
expression offsetWidth
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben