Search code examples
cssunderline

How to make the underlines the same size in all browsers with css?

When I have the following in css, the underlines under the links in IE and Firefox are "doubled". I have seen that some websites have the same font-family, same font-size, in bold and underlines are not doubled. How can I make the underline only one line and not two (1px vs 2px). A simple css that would work in all browsers (if possible). I know I could use border-bottom to solve the problem but I don't really like the idea.

.a_12 {
font-family: arial;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}

Thank you for your help and suggestions

Solution

  • You cannot control how browsers render their text underlines using CSS. If you really need that level of control, it doesn't hurt to use a bottom border.