List-image bij hyperlink die geen <li>-item is

[Yoeri]

Vage omschrijving, ik weet het.

Ik heb volgende tabel:

HTML:

<table cellpadding="0" cellspacing="0" class="moduletable">
<tr><th valign="top">De Vereniging</th></tr>
<tr><td>    

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="bla" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >De Vereniging</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >Contact</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >Nieuws</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >Agenda</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >Onze meter</a></td></tr>
<tr align="left"><td><a href="bla" class="mainlevel" >Fotogallerij</a></td></tr>
</table>
</table>

Over het feit dat hier tabellen voor layout gebruikt worden heb ik niets te zeggen, dit is nu eenmaal wat het CMS uitspuwt.

Ik heb nu volgende css:

Cascading Stylesheet:

a.mainlevel:link, a.mainlevel:visited {
  color: #366E62;
  text-decoration:none;
  padding-left:15px;
  text-align: left;
}

a.mainlevel:hover {
  color: #366E62;
  font-weight: bold;
  background-image:url("../images/menuitem-prefix.gif");
  background-position:center left;
  background-repeat: no-repeat;
}

a.mainmenu:link, a.mainmenu:visited {
  color: #366E62; 
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Hiermee staan alle links continu 15px van de linkerrand af. Bij een hover komt er in die 15px dan een plaatje (menuitem-prefix.gif) te staan. Het probleem ontstaat als een link te lang is voor één regel. Dan staat de eerste lijn wel 15px ingesprongen, maar de tweede lijn niet. Daardoor komt het plaatje vervolgens half door de tekst heen te staan. Een voorbeeld van wat ik bedoel staat op http://bvsm.area61server....task=view&id=17&Itemid=41 onder het kopje 'Mucoviscidose' is de link 'Ziekte en behandeling' te lang.

Hoe kan ik dit oplossen puur met behulp van de css, ik heb werkelijk al vanalles geprobeerd met text-indent, margin, padding, ...

[crisp]

waarschijnlijk werkt dit wel:

Cascading Stylesheet:

a.mainlevel { display:block; }

Bedenk verder ook dat door een bug in IE deze browser elke keer weer het achtergrond-plaatje zal downloaden bij een hover...

[Superdeboer]

En als je op die anchors nou eens een display: block; zet dan?

edit:
Arghhhh spuit13.

[ Voor 19% gewijzigd door Superdeboer op 09-11-2005 18:33 ]

[Yoeri]

Held

Ik heb hier werkelijk uren op zitten zweten alvorens dit topic te openen, en dan is het met één lijntje opgelost... Om van te huilen

* Yoeri gaat in een hoekje zich zitten schamen

[ Voor 14% gewijzigd door Yoeri op 09-11-2005 18:33 ]