Here's some CSS:
CSS code: div.sidebar ul.common
{
background: #000000;
color: #638CBD;
margin: 0px; border: 0px; padding: 0px;
list-style: none inside url(menu_marker.gif);
display: block;
width: 140px;
height: 40px;
}
div.sidebar ul.common li
{
display: block;
width: 100%;
margin: 0px; border: 0px; padding: 0px;
}
div.sidebar ul.common li a
{
display: block;
width: 100%;
margin: 0px; border: 0px; padding: 0px;
color: #638CBD;
font-weight: bold;
}
div.sidebar ul.common li a:hover
{
color: #FFC562;
}
Here's some XHTML:
HTML code: <ul class="common menu">
<!--- TODO: Menu --->
<li><a href="#Myself&Xfa.Logout#">Logout</a></li>
</ul>
Here's the result of these in IE6 and FF1.5:
I'm using a XHTML1.1 DOCTYPE, so both browsers should be in strict/standards-compliant mode.
I have two problems:
1) IE is ~20 pixels too wide.
2) Firefox isn't showing the list image.
Tried a few things but can't figure it out, and it's just a style issue so I don't want to spend ages working on it, but if anyone here has any ideas they would be appreciated.
(and I'm sure I'll be kicking myself and go 'oh yeah!' when the answer comes up)
|
