Search code examples
htmlcssstylesheet

Overriding link style

My CSS looks like:

A:link { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:visited { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:active { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:hover { text-decoration: none; color: white; border-bottom:1px solid white; font-style:italic; }

#mainmenu A:link { text-decoration: none; }
#mainmenu A:visited { text-decoration: none; }
#mainmenu A:active { text-decoration: none; }
#mainmenu A:hover { text-decoration: underline; color: white; }

and in HTML I have:

<div id="mainmenu">
   <a href="link here">link</a>
</div>

I would think that this menuitem would have the style without text decoration, but instead it gets the underlined style. So the styles for #mainmenu seem to be ignored, it always take the default style.

Am I missing something?

Solution

  • This http://jsfiddle.net/CU9RH/1/ demonstrates that there is no underline for #mainmenu link, but there is a bottom dotted border.

    You will need to override the bottom border if you want it to not show:

    #mainmenu A:link { text-decoration: none; border-bottom:none;}
#mainmenu A:visited { text-decoration: none; border-bottom:none;}
#mainmenu A:active { text-decoration: none; border-bottom:none;}

    Demonstration with fix: http://jsfiddle.net/uYhtw/1/