In CSS1Compat mode Firefox doesn't display underlines for my links if
they set to display:-moz-inline-box.
The same styling works fine in BackCompat (quirk) mode, so I guess it
is some W3C box model issue again, but how to fix it? Strangely enough
-moz-box-sizing: border-box; doesn't here, only explicit drop
into quirk mode by say removing doctype.
An URL with the very same page broken by Yahoo! insertions so being
dropped into quirk mode: underlines are just fine:
http://www.geocities.com/schools_ring/tmp/inbox.html
The page of question (no URL, sorry, cannot disclose the customer):
the underlines are hot visible on Firefox. IE, Safari and Opera are
fine in either case:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
ul#menu {
list-style-position: outside;
list-style-type: none;
font-family: Verdana, Geneva, sans-serif;
font-variant: small-caps;
font-weight: bold;
font-size: 0.7em;
}
ul#menu li {
width: 200px;
margin-bottom: 15px;
}
ul#menu li a {
display: inline-block;
display:-moz-inline-box;
width: 100%;
color: black;
}
ul#menu li a:hover {
color: red;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="http://www.example.com">Link 1</a></li>
<li><a href="http://www.example.net">Link 2</a></li>
<li><a href="http://www.example.org">Link 3</a></li>
</ul>
</body>
</html>