General Question

shivian's avatar

CSS Lists, IE vs Firefox?

Asked by shivian (10points) August 4th, 2008

Is there any one good definitive resource on the differences, and work arounds, in IE vs FireFox for UL and LI padding / margin differences?

Observing members: 0 Composing members: 0

8 Answers

lapilofu's avatar

You should be able to normalize lists margins and padding by simply setting them yourself in the CSS. The one exception is that in IE6 (I’m pretty sure this doesn’t happen in 7…) lists get a little extra space that’s almost impossible to get rid of. The workaround is to form lists with line breaks like this:

><li>Item one</li
><li>Item two</li
><li>Item three</li

It’s a little odd looking, but doesn’t break anything and fixes the extra space in IE6.

Does that help?

shivian's avatar

Sorta. I have utilized my own setting of the margin / padding in CSS but they still display differently in IE7 vs FF3… thoughts?

damien's avatar

Try setting the style for all ul elements to have no margins or padding on all sides and then use a separate style to define the list your trying to style on top of that.

Better yet, use Yahoo’s reset and base stylesheets to make styling more consistent.

lapilofu's avatar

Eric Meyer also has a fantastic reset style.

shivian's avatar

Thanks for your help everyone with your stylesheets as bases. However, I am already doing this with no avail. So I take it no-one can aide in this?

lapilofu's avatar

If you send me a link to the files, I’ll try to track down the problem.

aidje's avatar

I suggest abandoning IE 6. Forget the workarounds. Eventually we’ll reach critical mass and people won’t be able to use IE 6 anymore. It will be a glorious day.

lapilofu's avatar

Hear hear!

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther