More troubles with Firefox

I can't work out how to position <li> menu buttons so that they don't indent in Firefox. It works fine in IE. Also, my CSS for h1, h2, h3, h4 isn't picked up by Firefox and gives me defaults.

Work in progress: http://www.usdmanciano.com/test.html

Also, I've ended up having to use a table for positioning because of trouble with Firefox.

Help!!!!!!!!!!

ul, li {margin-left:0; padding-left:0; list-style:none;}

That'll do ya in every browser.

Yeah it's a pain until you figure out to use negative margins on the <li> elements. Also be sure to set style-position to "outside".

Huh? I've never had to do either of those two things to get 'no margins'.

Thanks Herkalees.
It worked. I tried the negative margins previously. It worked in Firefox but messed up IE. Any thoughts on why my h1, h2, etc don't work in Firefox.

The CSS I've written is:
h1, {
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 20px;
}

But I get default headings in Firefox.

A good rule to follow here is:

Tell the browser everything it needs to know. Never leave it to assume defaults cos they will mess you up when you least expect it.

It happens in Firefox sometimes when you have a vertical list column floated to either side. It can push the whole list out of the container.

When I saw it, it was in the context of a browser-sniffer with second stylesheet, so I just put in negative margins on the list items.

You might also try floating the <li>'s in the opposite direction of the list, but I don't know if this will take out the built-in <li> indent, or not.

Try removing the red comma I highlighted in your quote.

Doh! The comma!
Thanks.

Always a good idea to validate the css when there's a problem. It can save a lot of eyestrain

I agree with Herkalees, you should never have to use negative margins to correct something.

Now using them intentionaly as part of the style - fine, but not to correct. If you have to use it then there are issues elsewhere in the code even if things line up correctly and validate.

Yes, I agree too that you shouldn't "have" to use negative margins. When I have used them, they have eventually come out as the code improved (IIRC though, it actually is not a bad method for some setups, I think maybe three-column liquid). But I'm not convinced you can always correct list-indenting cross-browser without them.

I'm working on a three-high six-wide set of css buttons. I'll work some today on trying to get them to work without neg. margins and report back, maybe you guys can spot a mistake.

Awesome. I still haven't figured out how it gets screwed up -- possibly an inheritance problem? -- but I've got a 6x3 bank of buttons working in all available browsers (IE7, Opera, FF, Netscape) with no neg. margins.

Thanks Herk, afaik you are 100% right. This simple tip was a big help.