Problem margin auf anchor in Liste im FF

[benny]

Hallo,

ich habe eine Liste in der ich die Anchors innerhalb der Listenpunkte positionieren möchte. Dies klappt allerdings nur im IE. Der Firefox will unbedingt einen Border um das LI haben, damit das Anchor das margin-top berücksichtigt. Wie bringe ich dem Firefox bei, das margin-top zu machen, ohne einen Border setzen zu müssen?

Code:
<ul style="background: #0000ff;">
    <li style="background: #ff9900; height: 50px; border: 1px solid #fff;">
        <a style="background: #ff0000; margin-top: 5px; height: 30px; display: block;" href="#">Test 1</a>
    </li>
    <li style="background: #ff9900; height: 50px;">
        <a style="background: #ff0000; margin-top: 5px; height: 30px; display: block;" href="#">Test 1</a>
    </li>
    <li style="background: #ff9900; height: 50px;"><a href="#">Test 1</a></li>
    <li style="background: #ff9900; height: 50px;"><a href="#">Test 1</a></li>
</ul>

[Antipitch]

Hi Benny,

Wie bringe ich dem Firefox bei, das margin-top zu machen, ohne einen Border setzen zu müssen?

Code:
<ul style="background: #0000ff;">
    <li style="background: #ff9900; height: 50px; solid #fff;">
        <a style="background: #ff0000; margin-top: 5px; height: 30px; display: block;" href="#">Test 1</a>
    </li>
</ul>

Gib einfach den <li>s ein padding-top:5px und nimm den margin für die <a>s raus.

Gruß
Antipitch

[benny]

Hi Benny,

Gib einfach den <li>s ein padding-top:5px und nimm den margin für die <a>s raus.

Gruß
Antipitch

leider nicht so gut, denn die anchors haben einen hover der so groß sein soll, wie das LI (bis auf ein px weniger wegen dem BG). wenn ich ein padding mache, ist das anchor kleiner.

[Antipitch]

Hi,

leider nicht so gut, denn die anchors haben einen hover der so groß sein soll, wie das LI (bis auf ein px weniger wegen dem BG). wenn ich ein padding mache, ist das anchor kleiner.

das ist ja nun auch eine etwas andere Anforderung und hätte eine anfängliche Erwähnung verdient gehabt.

Versuchs mal trotzdem mit dem padding und a:hover kriegt die neue Höhe, position:relative und einen negativen Wert für top.

Gruß
Antipitch

[benny]

bin mittlerweile weiter gekommen, allerdings bekomme ich jetzt dem IE 6 nicht beigebracht, dass das position:absolute wieder aufgehoben wurde mit position: static;

Dieser Teil stellt das wichtigste im Moment dar:

#navigation ul .li_a_0,
#navigation ul .li_a_1 {
 height: 30px;
}

#navigation ul .li_a_0 a,
#navigation ul .li_a_1 a {
 height: 23px;
 margin-top: 1px;
 padding-top: 6px;
 display: block;
 position: absolute;
}

*:first-child+html #navigation ul .li_a_0 a,
*:first-child+html #navigation ul .li_a_1 a,
* html #navigation ul .li_a_0 a,
* html #navigation ul .li_a_1 a {
 position: static;
}

Listenaufbau

<div id="navigation">
 <ul class="navigation_0">
 <li class="li_a_0"><a href="#">Test 1</a></li>
 <li class="li_a_0"><a href="#">Test 2</a></li>
 <li>
  <ul class="navigation_1">
   <li class="li_a_1"><a href="">Test 3</a></li>
   <li class="li_a_1"><a href="">Test 4</a></li>
   <li class="li_a_1"><a href="">Test 5</a></li>
   <li class="li_a_1"><a href="">Test 6</a></li>
  </ul>
 </li>
 <li class="li_a_0"><a href="#">Test 7</a></li>
 <li class="li_a_0"><a href="#">Test 8</a></li>
 <li class="li_a_0"><a href="#">Test 9</a></li>
 <li class="li_a_0"><a href="#">Test 10</a></li>
 <li class="li_a_0"><a href="#">Test 11</a></li>
 <li>
</div>

Der gesamte Style wäre:

#navigation ul {
 text-align: left;
 list-style: none;
 margin: 0px auto;
 padding: 0px;
 width: 215px;
}

.navigation_0 {
 background-image: url(./images/navigation_bg.png);
}

* html #navigation ul {
 margin: 0px;
}

#navigation ul .li_a_0,
#navigation ul .li_a_1 {
 height: 30px;
}

#navigation ul .li_a_0 a,
#navigation ul .li_a_1 a {
 height: 23px;
 margin-top: 1px;
 padding-top: 6px;
 display: block;
 position: absolute;
}

*:first-child+html #navigation ul .li_a_0 a,
*:first-child+html #navigation ul .li_a_1 a,
* html #navigation ul .li_a_0 a,
* html #navigation ul .li_a_1 a {
 position: static;
}

* html .navigation_0 a {
 width: 215px;
}

#navigation ul li a { padding-left: 5px; width: 210px; }
#navigation ul ul li a { padding-left: 10px; width: 205px; }
#navigation ul ul ul li a { padding-left: 20px; }

#navigation ul li a {
 font-weight: bold;
 text-decoration: none;
 font-size: 0.8em;
 color: #444444;
}

#navigation ul a:hover {
 background-color: #444444;
 color: #ffffff;
}

[benny]

dreck ie...
hab den IE 6 hack vom IE 7 hack getrennt, jetzt gehts.
trotzdem besten dank, für die mühe und den versuch :-)

*:first-child+html #navigation ul .li_a_0 a,
*:first-child+html #navigation ul .li_a_1 a {
 position: static;
}

* html #navigation ul .li_a_0 a,
* html #navigation ul .li_a_1 a {
 position: static;
}