✔ Problem mit Navigation mit Liste und divs

[xela123]

Hi,

ich habe mir eine Navigation gebastelt, die oberen Punkte ist eine Liste, die Unterpunkte in divs. Das ganze habe ich ein bisschen animiert. Im Firefox wird alles richtig dargestellt, aber im IE 6 wird das li option 1 mitvergrößert, obwohl das div nicht im li-Tag drin ist.

HTML-Code:

<ul id="idList">
    <li id="li1">option 1</li>
	<div class="unterpunkt" id="unterpunkt1">
		<div>option A</div>
		<div>option B</div>
		<div>option B</div>
	</div>
    <li id="li2">option 2</li>
    <li id="li3">option 3</li>
    <li id="li4">option 4</li>
    <li id="li5">option 5</li>
    <li id="li6">option 6</li>
</ul>

CSS:

#idList {
	margin: 0;
	padding: 0;
}
 
#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 145px;
	background:#2488bb;
	color: white;
	cursor:default;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:white;
	height: 1%; 	
}
.unterpunkt
{
	display: block;
	margin-left: 5px;
	width: auto;
}
.unterpunkt div
{
	display: block;
	margin-left: 0px;
	padding: 4px;
	width: auto;
	background:#00b7e9;
}

Anschauen könnt ihr euch das hier:

http://website-promoter.de/schule/blog_asp/

Hoffe ich bin im HTML Forum richtig.

xela123

 

[Maik]

Hi,

nimm mal im Stylesheet format_ie.css die folgende float-Eigenschaft auf, damit der IE keine Lücke zwischen den Listenpunkten erzeugt.

#idList li
{
        width: 145px;
        float:left;
}

Zudem müssen die DIVs im Listenpunkt "option 1" eingebettet werden, da sie kein unmittelbares Nachfahreelement des ul-Listenelements sind:

<ul id="idList">
    <li id="li1">option 1
        <div class="unterpunkt" id="unterpunkt1">
            <div>option A</div>
            <div>option B</div>
            <div>option B</div>
        </div>
     </li><!-- hier endet der Listenpunkt option 1 -->
     <li id="li2">option 2</li>
     <li id="li3">option 3</li>
     <li id="li4">option 4</li>
     <li id="li5">option 5</li>
     <li id="li6">option 6</li>
</ul>

 

[xela123]

Hi Maik,

danke für deine Antwort, allerdings funktioniert es leider nicht.

Hab durch die Änderung jetzt auch im FF den Fehler,
hab dann auch in der format.css das "float:left;" probiert, hat allerdings nicht geholfen.

Werd wohl die Navigation ein wenig umbauen müssen.

xela123

 

[Maik]

IE vorher:


IE nachher:


Und wieso taucht bei dir derselbe Fehler nun plötzlich im Firefox auf, wenn du die Regelerweiterung im IE-spezifischen Stylesheet vorgenommen hast, das alle nicht-IE-Browser durch den "Conditional Comment" (<!--[if IE 6]> ... <![endif]-->) ignorieren?

Bei mir ändert sich nämlich dadurch in den übrigen Browsern überhaupt nichts zum Nachteil.

 

[xela123]

Es ging mir auch nicht um die kleine Lücke, sondern darum, dass sich der Hintergrund des li-Elements im IE mit erweitert hat.

Es soll so aussehen wie auf dem Screenshot im Anhang.

ps. Ich lade mal meine aktuelle Version hoch, in der es im FF genau richtig ist.

 

[Maik]

Dass Firefox es "richtig" bzw. wie von dir eigentlich gewünscht anzeigt, liegt an dem von mir vorhin erwähnten Fehler im Markup - siehe hierzu auch [Invalid] Markup Validation of http://website-promoter.de/schule/blog_asp/ - W3C Markup Validator.

Wenn ich den Quellcode, wie von mir gezeigt, validiere, sieht die CSS-Welt im Firefox und den anderen standardkonformen Browsern auch nicht mehr so rosig aus.

Soweit bin ich mal gekommen:

<ul id="idList">
     <li id="li1"><span>option 1</span>
            <ul class="unterpunkt" id="unterpunkt1">
                   <li><span>option A</span></li>
                   <li><span>option B</span></li>
                   <li><span>option B</span></li>
             </ul>
     </li>
     <li id="li2"><span>option 2</span></li>
     <li id="li3"><span>option 3</span></li>
     <li id="li4"><span>option 4</span></li>
     <li id="li5"><span>option 5</span></li>
     <li id="li6"><span>option 6</span></li>
</ul>

* {
margin:0;
padding:0;
}

#idList  {
        margin: 0;
        padding: 0;
}

#idList li {
        display: block;
        margin: 0;
        padding: 0;
        width: 145px;
        background:#2488bb;
        color: white;
        cursor:default;
        border-bottom-style:solid;
        border-bottom-width:1px;
        border-bottom-color:white;
}

#idList li span, #idList li ul#unterpunkt1 li span  {
        display:block;
        padding:4px;
}

#idList li ul#unterpunkt1
{

        margin:0;
        padding:0;
        padding-left: 5px;
        width: 145px;
        background:#fff;
        color: white;
        cursor:default;
        border-bottom-style:solid;
        border-bottom-width:1px;
        border-bottom-color:white;
}
#idList li ul#unterpunkt1 li
{
        display: block;
        margin:0;
        padding: 0px;
        width: 153px;
        background:#00b7e9;
        color: white;
        cursor:default;
        border-bottom-style:solid;
        border-bottom-width:1px;
        border-bottom-color:white;
}

nur verbreitert der IE6 den ersten Listenpunkt entsprechend dem nach rechts verschobenen Submenü, der IE7 hingegen zeigt's wie die standardkonformen Browsern an.

 

[xela123]

Ahh, ok, danke für die Infos.