Hello all,
I'm have an annoyance I can't seem to solve. I'm working on a website that
has a sidebar floating to the right. In the sidebar is an unordered list. In
IE and in Opera, the list shows up as I want - aligned left. In FF, the list
displays in the middle of the sidebar, totally ignoring the margin, it
seems. In fact the main menu, which is styled similarly, also shows the same
issue. You can see an example here:
http://www.ssaes.org/test_site
You can see the <ul> in the sidebar seems as if it's ignoring my margin
styling. The alternate main menu has the same problem. The actual menu is a
JavaScript menu, but I've provided an alternate list-based menu utilizing
the <noscript> tag. If you turn off JavaScript, you'll see the main menu,
and you'll see that that's indented also.
The page validates to the HTML 4.01 Strict standard. Here's the html for the
<ul>
<div id="sidebar">
<script type="text/javascript" src="memticker.js"></script>
<br>
<p style="color: red; text-decoration: underline"><b>Related
Links:</b></p>
<ul>
<li>Read the <a href="principal_letter.htm">Principal's
Letter</a></li>
<li>See tonight's <b><a href="homework.shtml">HOMEWORK</a></b>
assignments.</li>
<li><a href="edu_resource.htm">Education Resources</a> for kids and
Teachers</li>
<li><a href="links.htm">Armenian Links</a></li>
<li>See <a href="about.htm">pictures</a> from the 5th grade class trip to
Armenia.</li>
</ul>
</div>
And here's my CSS:
#sidebar ul {
font-size: 90%;
text-align: left;
list-style-image: url('arrow.gif');
margin-left: 15px;
}
#sidebar li {
padding-bottom: 0;
padding-left: 0;
margin-left: 0;
}
#sidebar p {
text-align: left;
}
Any ideas as to why the margin shows up different in FireFox? Thanks in
advance for any replies.
Viken K.