Padding-Probleme innerhalb des Anker-Tags

[Lufine]

Hallo,

ich habe Probleme mit Padding innerhalb von Hyperlinks. Während IE 6.0, NN 7.1, Opera 7.0, Mozilla 1.5 auf dem PC und Mozilla 1.3, NN 6.2 unter MacOS alles wunderbar darstellen, zicken IE 5.1 sowie Opera 6.0 und ignorieren das padding-right: 30px innerhalb der des Anker-Tags schlichtweg.

Unter http://www.bkfrauengesundheit.de/broschuere/ könnt Ihr da Problem "besichtigen".

Hat jemand von Euch eine Idee, wie das Problem in den Griff zu bekommen ist?

In dem vertikalen Menü, dass sich innerhalb eines DIVs befindet, soll bei Mouseover zum einen der Hintergrund farbig werden  und zum anderen rechts vom Text ein Bild erscheinen. Das Bild soll sich am rechten Rand des DIV´s einblenden.

Das Style dazu:

.listesubli       { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; list-style-type: none;  }

Die Links werden im Stylesheet wie folgt definiert:

a.menu:link    { color: #1443a3; text-decoration: none; padding-right: 30px }
a.menu:active       { color: #1443a3; text-decoration: none; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; padding-right: 30px }
a.menu:visited     { color: #1443a3; text-decoration: none; padding-right: 30px }
a.menu:hover      { color: #1443a3; text-decoration: none; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; padding-right: 30px }

Innerhalb der Liste gibt es aber auch noch nicht auswählbare Menüpunkte. Das Style dazu:

.listeli      { font-weight: bold; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 10px; padding-right: 30px; }

Der HTML-Code des DIVs sieht auszugsweise so aus:

<div id="menu">
    <ul class="listeul">
     <li class="listeli">Frauen sind anders</li>
     <li class="listesubli"><a class="menu" href="/broschuere/html/flg_01.htm">Lebenswelten</a></li>
     <li class="listesubli"><a class="menu" href="/broschuere/html/flg_02.htm">Der gewisse Unterschied</a></li>
     <li class="listeli">Zur Frau werden</li>
     <li class="listesubli"><a class="menu" href="/broschuere/html/flg_03.htm">Erste Blutung</a></li>
     <li class="listesubli"><a class="menu" href="/broschuere/html/flg_04.htm">Essstörungen</a></li>

</ul>
</div>

[Orlando]

Hi Lufine,

[...] IE 5.1 sowie Opera 6.0 und ignorieren das padding-right: 30px innerhalb der des Anker-Tags schlichtweg.

a.menu:link    { color: #1443a3; text-decoration: none; padding-right: 30px }
a.menu:active       { color: #1443a3; text-decoration: none; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; padding-right: 30px }
a.menu:visited     { color: #1443a3; text-decoration: none; padding-right: 30px }
a.menu:hover      { color: #1443a3; text-decoration: none; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; padding-right: 30px }

wenn du die gleichbleibenden Definitionen in a.menu {} zusammenfasst, klappt es auch mit Opera 6 und M$IE 5.5, nicht allerdings mit 5.01.

a.menu         { padding-right:30px; text-decoration:none; }
a.menu:link    { color: #1443a3; }
a.menu:active  { color: #1443a3; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; }
a.menu:visited { color: #1443a3; }
a.menu:hover   { color: #1443a3; background: #f0f0f8 url(/broschuere/grafik/hover.gif) no-repeat right; }

Grüße,
 Roland

[Lufine]

Hi Roland,

danke für den Tipp :-) So klappt´s!

Lufine