CMS Made Simple Forums

kroontekst.nl

heeft een menu met onderstreping voor de actieve pagina, ziet er in de meeste browsers super uit alleen in Google Chrome is het streepje nog een andere kleur (zie bijlage), hoe kan ik dit overal gelijk maken? Of is dit gewoon een probleempje van Chrome?
in mijn CSS heb ik onder andere de volgende om de onderlijning actief te krijgen (met dank aan dit forum):
#menu .menuactive {
text-decoration: underline;
}

ik zou de links zelf stylen, ipv de list-items. Denk dat dat het probleem oplost.

Hoe bedoelt u de links zelf stylen? De links zijn alsvolgt gemaakt:

#menu a:link, #menu a:visited {
font-size:30px;
font-family:"BellMTBold";
font-weight:normal;
line-height:60px;
text-align: right;
letter-spacing: 3px;
text-decoration: none;
}


#menu a:hover {
text-decoration: underline;
font-size:30px;
font-family:"BellMTBold";
font-weight:normal;
line-height:60px;
text-align: right;
letter-spacing: 3px;
}

#menu a:active {
text-decoration: underline;
font-size:30px;
font-family:"BellMTBold";
font-weight:normal;
line-height:60px;
text-align: right;
letter-spacing: 3px;
}

Ik zou niet weten wat hierin te veranderen is waardoor chrome het ook goed doet, als u een idee heeft hoor ik het natuurlijk graag

je past nu veel stijl toe op de list-items, zoals #menu .menuactive. Dit is een list-item. De <a> tag die hierin staat neemt de kleur blijkbaar wel over maar de underline (in chrome) hiervan niet.

Je bespaart jezelf een hoop ellende door de style-regels zoals color, text-decoration enz. gewoon direct op de <a> tags toe te passen in plaats van op hun parents. Dus bijv. "#menu .menuactive a" te gebruiken.

Als dat de oplossing zou zijn, kan je volgens mij gewoon dit:

#menu .menuactive {
text-decoration: underline;
}

veranderen in dit:

#menu a.menuactive {
text-decoration: underline;
}

ik zie dat de <a> tag ook die classname heeft dus ja dat kan ook.