I'm trying to use CSS for menu buttons, but am unsure how to specify
the width of blocks when displaying them inline.
At the moment I am using SPAN tags, and IE renders the WIDTH property,
but I understand that this is not standard CSS, and Mozilla ignores
width on these inline tags.
I've tried various alternatives with DIVs etc, but that always seems
to render with line breaks after each one - what I want is to show the
menu as it currently displays in IE, but for it to work in Mozilla
too.
This is the example code I am working with - it displays all the
buttons with equal WIDTH in IE (which is what I want), but not in
Mozilla:
--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Website</title>
<style>
.navbutton {
font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.navbutton a {
padding: 4px;
text-decoration: none;
width: 8em;
color: #224059;
background-color: #b5c9e2;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
}
.navbutton a:hover {
background-color: #99aabf;
border-top: 2px #31557f solid;
border-left: 2px #31557f solid;
border-bottom: 2px #cce3ff solid;
border-right: 2px #cce3ff solid;
}
</style>
</head>
<body>
<span class="navbutton"><a href="buttons.htm">News</a></span>
<span class="navbutton"><a href="buttons.htm">Diary</a></span>
<span class="navbutton"><a href="buttons.htm">Library</a></span>
<span class="navbutton"><a href="buttons.htm">Join Us</a></span>
<span class="navbutton"><a href="buttons.htm">Contacts</a></span>
</body>
</html>
