✔ Minus Werte bei IE 7

[SEK1989]

Sooo...
Kann das sein das IE7 bei Margin keine minus werte aktzeptiert?

 

[Maik]

Nö, die unterstützt er grundsätzlich wie die übrigen Browser.

mfg Maik

 

[SEK1989]

Also ich schreibe seit einem Jahr jetzt CSS Layouts frei aus dem Kopf immer schön nach W3C aber das kam noch nie vor...

Ich habe ne Liste als Menu mit einer Liste als Untermenu sprich:

<ul id="submenu-1">
    <li>Menulink 1</li>
    <li>
          <ul id="submenu-2">
                <li>Unterlink 1</li>
          </ul>
    </li>
    <li> Menulink 2</li>
</ul>

#submenu-1{
	list-style:none;
	width: 170px;
}

#submenu-1 li{
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 3px;
	background:#CCC;
	border-bottom: #FFF solid 1px;
}
#submenu-2{
	list-style: inside circle;
	width: 170px;
	margin-left: -3px;
}
#submenu-2 li{
	background:#FFF;
}

Ist jetzt nicht ganz das Original, weil ich heute schon ne Stunde daran rumprobiert habe...

 

[Maik]

Vielleicht machst du dir das Leben leichter, wenn du zu Beginn die voreingestellten Polsterungeigenschaften des Listenelements zurücksetzt. Oder welchen Sinn soll die margin-left:-3px-Deklaration ergeben?

mfg Maik

 

[SEK1989]

Das erste Menu ist Grau.
Das Untermenu ist aber weiß.

Durch das margin-left wollte ich eigentlich das padding-left von dem ersten listenpunkt zurücksetzten...

unter firefox und co funktioniert das... nur unter IE nicht.

Firefox schluckt das und zeigt mir einen grauen Listenpunkt und darunter auch den weißen Untermenupunkt. alles toll! Beim IE wird im untermneu noch ein grauer Balken angezeigt.

Wenn ich nach dem Boxenmodell vorgehe habe ich:

padding-left vom listenpunk -> margin-left vom untermenu (ul) -> padding-left vom untermenu (ul) -> Inhalt <- padding-right vom untermenu (ul) <- margin-right vom untermenu (ul) <- padding-right vom listenpunk

 

[Maik]

<ul id="submenu-1">
    <li><a href="#">Menulink 1</a></li>
    <li>
          <ul id="submenu-2">
                <li><a href="#">Unterlink 1</a></li>
          </ul>
    </li>
    <li><a href="#">Menulink 2</a></li>
</ul>

ul {
        margin:0;
        padding:0;
}

#submenu-1{
        list-style:none;
        width: 170px;
}

#submenu-1 li{
        padding-top: 2px;
        padding-bottom: 2px;
        /*padding-left: 3px;*/
        background:#CCC;
        border-bottom: #FFF solid 1px;
}

#submenu-1 li a {
        margin-left: 3px;
}

#submenu-2{
        list-style: inside circle;
        width: 170px;
        /*margin-left: -3px;*/

}
#submenu-2 li{
        background:#FFF;
}

mfg Maik

 

[SEK1989]

Vielen Dank.
Darauf bin ich gar nicht gekommen...

Habe es jetzt so gelöst

<ul id="submenu-1">
    <li><a href="#">Menulink 1</a></li>
    <li>
          <ul id="submenu-2">
                <li><a href="#">Unterlink 1</a></li>
          </ul>
    </li>
    <li><a href="#">Menulink 2</a></li>
</ul>

/*
Benötige ich nicht nutze Reset-CSS von Eric Meyer ("bekannter CSS Guru")
ul {
        margin: 0;
        padding: 0;
}
*/

#submenu-1{
	list-style: none;
	width: 170px;
}

#submenu-1 li{
	padding-top: 2px;
	padding-bottom: 2px;
	background: #CCC;
	border-bottom: #FFF solid 1px;
}
#submenu-1 li a {
margin-left: 3px;
}

#submenu-2{
	list-style: inside circle;
	
}
#submenu-2 li{
	background: #FFF;
	width: 167px;
	padding-left: 3px;
}