nicht angemeldet
LI UL erscheint n.i.o. in IE5x, 6x
0 
Gunnar Bittersmann
0 0 0 0
LI UL erscheint n.i.o. in IE5x, 6x
Hallo zusammen,
Ich habe einen Navigations Leiste erstellt komplett aus CSS und LI/UL's.
Durch FF und IE7 erscheint es ok.
Jetzt, unser liebe IE5x und 6x gibt mir einen Alptraum.
Der Sinn da drin ist wie bei JS, Mann hat Scrolldown Menus um Platz zu sparren.
Hier ist den Link für d. Website: http://www.chicas-del-fuego.de/Beta
Nach viele Recherche, habe ich Code gefunden und einbearbeite so das es passt.
Erstmal, hier ist d. CSS teil:
div#Rahmen {
width: 900px;
height: 20px;
padding: 0px;
border: 0px solid #5B5B5B;
background-color: clear;
text-align: center;
}
* html div#Rahmen { /* Corrections for IE 5.x */
width: 900px;
w\idth: 900px;
}
div#Rahmen div {
background: clear;
text-align: center;
/* Corrections for IE 5.x */ width: 900px; w\idth: 100%;
}
ul#Navigation {
margin: 0;
padding: 0;
text-align: center;
}
* html ul#Navigation {/* Corrections for IE 5 and 6 */
width: 900px;
w\idth: 900px;
}
ul#Navigation li {
list-style: none;
float: left;
/* NEW -> */width: 180px;
position: relative;
margin: 0px;
padding: 0px;
}
* html ul#Navigation li { /* Corrections for IE 5 and 6 */
margin-bottom: -5px;
width: 180px;
}
*:first-child+html ul#Navigation li { /* Corrections for IE 7 */
margin-bottom: 0px;
}
ul#Navigation li ul {
margin: 0;
padding: 0;
position: absolute;
top: 1px;
left: 0px;
}
* html ul#Navigation li ul { /* Corrections for IE 5.x */
left: 0px; lef\t: 0px; width: 180px;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 1px;
background-image: url(Images/smoke-bg.jpg)
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 1px 1px;
text-decoration: none;
font-weight: bold;
border: 1px solid #5B5B5B;
border-left-color: #BBBBBB;
border-top-color: #BBBBBB;
color: black;
background-image: url(Images/smoke-bg.jpg);
}
* html ul#Navigation a, * html ul#Navigation span { /* Nesseccary only for IE */
width: 100%; w\idth: 6em;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: #BBBBBB;
border-left-color: #5B5B5B;
border-top-color: #5B5B5B;
color: #F7DE0A;
background-image: url(Images/smoke-bg-H.jpg);
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #E7002A;
background-color: clear;
}
ul#Navigation li ul span { /* Actual 2nd level highlights */
background-color: #E7002A;
}
ul#Navigation li>ul {
display: none;
top: 1.8em;
}
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
display: block; /* Corrections for IE 5.x */ width: 180px;
}
Workaround for IE 7
*:first-child+html ul#Navigation ul {
background-color:clear;
padding-bottom:0px;
}
Ich werde mich freuen wenn jamand mich auf'm richtigen Pfad zeigen kann.
Bis jetzt, interessiere ich mich mit CSS und sein Fähigkeiten.
Ich habe auch gelesen dass bei IE5x und 6x, muss Mann Breit in Prozent eingeben. Auch getestet.
HTML Code ist nicht anderes als paar DIVs.
<div id="Rahmen" align="center">
<ul id="Navigation">
<li>
<a href="bla.html"><font color="#F7DE0A">bla</font>
</a>
</li>
<li>
<a href="bla-2.html">bla-2
</a>
</li>
<li>
<a href="bla-3.html">bla-3
</a>
</li>
<li>
<a href="bla-4.html">bla-4
</a>
<ul>
<li>
<a href="bla-4b.html">bla-4b
</a>
</li>
</ul>
</li>
</ul>
<div></div>
</div>
greets
Mark
-
@@wannabe:
Jetzt, unser liebe IE5x und 6x gibt mir einen Alptraum.
Die verstehen werden ':hover' für was anderes als Links noch Kindselektoren.
Schau dir mal Stu Nicholls’ CSS only drop-down menu an!
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
Hi wannabe,
Jetzt, unser liebe IE5x und 6x gibt mir einen Alptraum.
bitte mach genauere Problembeschreibungen. Was ist nicht so, wie Du denkst, das es sein soll?
Hier ist den Link für d. Website: http://www.chicas-del-fuego.de/Beta
Auf dieser Seite gibt es (abgesehen von der fehlenden doctype-Angabe) _nicht eine einzige_ Liste. Dafür strotzt der Quellcode nur so von Tabellenteilen.
Ergo:
Gib einen Doctype an.
Schreib eine _valide_ Seite _ohne Tabelle_.
Verwende die von Dir angekündigte Liste.
Und wenn Dir der Validator dann eine fehlerfreie Seite bescheinigt, schauen wir uns an, was nicht so ist, wie es sein sollte, hm? ;-)mfG
gooxsy
-
Hi wannabe,
sorry, natürlich ist eine doctype-Angabe dabei. Ich hatte grad 3 verschiedene Validator-Fenster offen und irrtümlich das falsche geöffnet. Muß also nur noch die Tabelle weg. ;-)
mfG
gooxsy
-
-
Hallo Mark,
Nach viele Recherche, habe ich Code gefunden und einbearbeite so das es passt.
Das ist ein denkbar schlechter Ansatz. Befasse dich lieber ernsthaft mit HTML und CSS. Wenn du nicht weißt was der Code macht, ist es sehr schwer dir zu helfen.
Mein Rat: Fang noch mal neu an und schreibe die Seite von Grund auf selbst. Validiere deinen Code und dein CSS.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide." -
Hi,
Der Sinn da drin ist wie bei JS, Mann hat Scrolldown Menus um Platz zu sparren.
ich würde in diesem Fall darauf verzichten. Den Punkt Galerie kannst Du normal mit aufnehmen und die zusätzlichen Angaben unter "Disclaimer" in die Kontaktseite setzen.
Nach viele Recherche, habe ich Code gefunden und einbearbeite so das es passt.
Nur leider hast Du den nicht im Ansatz verstanden... und/oder völlig unsinnige Teile hinzugefügt.
background-color: clear;
wie sieht denn Deiner Meinung nach die Farbe "clear" aus? Eher weiss wie nach einer guten Entfärbung? ;-)
* html div#Rahmen { /* Corrections for IE 5.x */
width: 900px;
w\idth: 900px;
}das ist völlig unsinnig, da Du ja die zuvor gemachte Angabe überhaupt nicht änderst.
background: clear;
s.o.
* html ul#Navigation {/* Corrections for IE 5 and 6 */
width: 900px;
w\idth: 900px;
}Die zweite Angabe ist überflüssig; die erste vielleicht auch.
* html ul#Navigation li { /* Corrections for IE 5 and 6 */
margin-bottom: -5px;
width: 180px;
}die zweite Angabe ist überflüssig.
*:first-child+html ul#Navigation li { /* Corrections for IE 7 */
margin-bottom: 0px;
}überflüssig.
* html ul#Navigation li ul { /* Corrections for IE 5.x */
left: 0px; lef\t: 0px; width: 180px;
}die ersten beiden Angaben sind überflüssig.
* html ul#Navigation a, * html ul#Navigation span { /* Nesseccary only for IE */
btw: dieser Code kommt mir größtenzteils sehr bekannt vor - bis auf diese seltsamen Übersetzungen der Kommentare. ;-)
ul#Navigation li>ul {
diesen Selektor kennt der IE6 noch nicht. Das kannst Du aber nachlesen und auch die Anmerkungen zum Workaround.
freundliche Grüße
Ingo -
Danke Ingo, thebach, gooxsy und Gunnar,
Ich muss mich damit auseinander setzen um alles zu durchlesen und verstehen.
Es ist ein gutes Anfang um CSS besser zu verstehen. Ich mach den Idee mit CSS und möchte es weiter verwenden in solchen Situationen.
Es daurt paar Tagen vor ich einige Änderungen unternehme.greets
Mark