[CSS] Breedte van <a> tags

[armageddon_2k1]

Ik zit met een probleem en ik weet bij god niet hoe het komt.
Ik heb al een aantal sites gemaakt waar menu-items aan de linkerkant staan als <a>'tjes in een <td>. Als er dan over die cell heenbewogen wordt met de muis licht ie op, of veranderd er gewoon iets aan de tekst ofzo. Maar op één of andere rare manier lukt het nu niet. De site is dit keer in het CMS Mambo gemaakt en daar had ik sowieso al meer problemen mee. Dit is de uiteindelijk source-code die eruit rolt (van het menu-gedeelte):

HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td align="left" width="100%" class="mainlevel-leftmenu"><a href="index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=11" class="mainlevel-leftmenu" id="active_menu-leftmenu">Home</a></td></tr>
<tr align="left"><td align="left" width="100%" class="mainlevel-leftmenu"><a href="index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=12" class="mainlevel-leftmenu" >Home-item 1</a></td></tr>
</table>

en dit is de CSS die ik erbij gebruik (ik heb nu al 1000x iets veranderd waardoor er waarschijnlijk dingen instaan die niet zinnig zijn, of dubbele dingen ofzo):

Cascading Stylesheet:

.mainlevel-leftmenu { 
font-size: 8pt;
text-decoration: none; 
width: 150px;
padding-left: 1px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
}

.mainlevel-leftmenu:link, .mainlevel-leftmenu:visited {
color: #990000; 
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; 
width: 150px;
padding-left: 1px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
}

.mainlevel-leftmenu:hover { 
color:#FFCC66; 
background-color:#990000; 
width: 150px;
}

En het probleem is nu dat de links niet de volledige breedte innemen van de td-cellen. Wat ik bedoel is dat als je het woord Home heb, dat deze natuurlijk niet de hele cel vult, maar dat de A wel de hele cel moet vullen en dat lukt nu niet...ik wordt er gek van. Ik zie iets over het hoofd ofzo.
Ik kan natuurlijk de hele suffe manier doen van een OnMouseOver, maar dat is niet netjes, aangezien ie dan oplicht zelfs als je niet echt over de link heen gaat (aangezien de link niet de volledige breedte inneemt).

[ Voor 24% gewijzigd door armageddon_2k1 op 27-06-2005 11:51 ]

[Verwijderd]

Waarom zo moeilijk?

Waarom gebruik je niet gewoon

code:

<STYLE>

#normal{
background-color:white;
}

#over{
background-color:red;
}

</STYLE>

<TD onmouseover="javascript:this.id='over"' onmouseout="javascript:this.id='normal'">Home</TD>

Zo licht de hele cell op als je er overheen gaat.

[ Voor 28% gewijzigd door Verwijderd op 27-06-2005 12:00 ]

[disjfa]

.mainlevel-leftmenu:link -> .mainlevel-leftmenu a

:link bestaat zover ik weet niet echt

--edit--
Ik lees er even een beetje overheen aangezien de code nogal warrig is opgezet. Je moet gewoon de :link weghalen en dan zou het moeten werken in IE.

<a> blijft namelijk een inline element en kan je dus geen breedte aan meegeven tenzei je het geen inline element meer maakt

[ Voor 62% gewijzigd door disjfa op 27-06-2005 11:58 ]

[crisp]

Een inline-element heeft geen width; je kan alleen een width opgeven als je er ook een display:block aan toekent.

[BtM909]

crisp schreef op maandag 27 juni 2005 @ 11:57:
Een inline-element heeft geen width; je kan alleen een width opgeven als je er ook een display:block aan toekent.

Even een aanvulling: dan hoef je ook meteen geen width meer mee te geven, aangezien je container element dat al doet

[armageddon_2k1]

@Crisp: dat weet ik maar ik was de wanhoop nabij en probeerde alles.
Ohw en zonder :Link werkt het nog steeds niet

[ Voor 27% gewijzigd door armageddon_2k1 op 27-06-2005 12:04 ]

[Verwijderd]

Ik kan natuurlijk de hele suffe manier doen van een OnMouseOver, maar dat is niet netjes, aangezien ie dan oplicht zelfs als je niet echt over de link heen gaat (aangezien de link niet de volledige breedte inneemt).

Dan gebruik je toch een OnMouseOver in je <A> tag...en laat je daarmee de hele cell oplichten.

onmouseover="javascript:this.parentElement.id='over'"

Heel suf...

[ Voor 19% gewijzigd door Verwijderd op 27-06-2005 12:13 . Reden: parent moet natuurlijk parentElement zijn :) ]

[armageddon_2k1]

@Nika:

Ik moet toch eens die Javascript goed onder de knie krijgen. PHP, Java...geen probleem. Maar Javascript altijd een beetje verzuimd. Heel veel dank!

[Boelie-Boelie]

Begrijp ik het goed als ik zeg dat je een menuutje wilt waarbij items oplichten als je er overheen gaat?
http://css.maxdesign.com.au/listutorial/
(Werkt zonder javascript.)