<UL> bigger indent in FireFox.

[Viken Karaguesian]

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>R elated
Links:</b></p>
<ul>
<li>Read the <a href="principal _letter.htm">Pr incipal's
Letter</a></li>
<li>See tonight's <b><a href="homework. shtml">HOMEWORK </a></b>
assignments.</li>
<li><a href="edu_resou rce.htm">Educat ion 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.

[Mark Parnell]

Deciding to do something for the good of humanity, Viken Karaguesian
<vikenkNO_SPAM@ NO_SPAMcomcast. net> spouted in
comp.infosystem s.www.authoring.html:

Any ideas as to why the margin shows up different in FireFox? Thanks in
advance for any replies.

Firefox has a default left padding of 40px on <ul>. I find the best way
to get consistent results across browsers is to set

* {margin: 0; padding: 0;}

at the top of my CSS file, and then just add the padding and margins I
need.

--
Mark Parnell
=============== =============== =============== ========
Att. Google Groups users - this is your last warning:
http://www.safalra.com/special/googlegroupsreply/

[Viken Karaguesian]

> Firefox has a default left padding of 40px on <ul>. I find the best way

to get consistent results across browsers is to set
My css styling of the <ul> does not override FF's defaults?
* {margin: 0; padding: 0;}
at the top of my CSS file, and then just add the padding and margins I
need.

I've seen this done before, and I've always wondered what the asterisk does.
Is it used as a wildcard, like in the normal computer lingo? So * {margin:0;
padding:0} means *all* margins and padding in the document?

Thanks for the reply Mark.

Viken K.

[Mark Parnell]

Deciding to do something for the good of humanity, Viken Karaguesian
<vikenkNO_SPAM@ NO_SPAMcomcast. net> spouted in
comp.infosystem s.www.authoring.html:

My css styling of the <ul> does not override FF's defaults?
You aren't setting any padding on it, so no.
I've seen this done before, and I've always wondered what the asterisk does.
Is it used as a wildcard, like in the normal computer lingo? So * {margin:0;
padding:0} means *all* margins and padding in the document?

Correct.
http://www.w3.org/TR/CSS2/selector.h...ersal-selector

--
Mark Parnell
=============== =============== =============== ========
Att. Google Groups users - this is your last warning:
http://www.safalra.com/special/googlegroupsreply/

[Viken Karaguesian]

> My css styling of the <ul> does not override FF's defaults?

You aren't setting any padding on it, so no.

Ah yes....thanks for pointing that out. I had set padding for the <li>
but not for <ul>. Made the change and all is now well.

Thank you!

Viken K.