Why does IE6&7 displays ul li elements differenly than FF

[asbali]

For example please see Nahid Fashions

The Our product categories box at the top right shows all the li emelments in FF. But in IE7 they don't all fit in the box. IE6 displays them all but the line spacing is not the same as FF.

I've tried to play with the line spacing, but so far I haven't been able to get the desired affect in IE without breaking FF.

Is this one of those bugs. I've read the CSS FAQ but nothign seems to apply to this problem.

Thanks for any help

[Tyssen]

Seems to me like you've got too many floats in there. You're floating the <li> then you've got a div inside that which is floated and then you've floated the image as well when all you need to do is float the list items and make the image a bg-image of the anchor instead of putting it in the HTML.

[sears]

ive noticed that as well on all my css sites. I always getting different ul padding.

for example. http://www.precision-pc.com.au/staging/ down the bottom where it says special deals. the paddings are different.

i use * { padding: 0; margin: 0 }, which i thought was to reset everything. maybe i'm missing something.

Sorry that this post doesn't help you.

[Tyssen]

for example. http://www.precision-pc.com.au/staging/ down the bottom where it says special deals. the paddings are different.
i use * { padding: 0; margin: 0 }, which i thought was to reset everything. maybe i'm missing something.

It's because you've got text-align: center on #content.

[sears]

i was just testing something. back to normal now. as u can see it doesn't display the same in both browsers. not sure why.

[Tyssen]

Because the list is next to floated content. You need to give it margin-left wider than the floated content.

[asbali]

Thanks Tyssen for your help. The line spacing are good now.
However the list bullets do't appear. Possibly another float problem?

[Tyssen]

Because the list items are display: inline. Better to use float: left instead.