list background colour screwed up in IE7

Answer 1

A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.

Answer 2

I think this is a case of IE-7 auto indending the li's the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode. then launch the developer tools from the tools menu

You can then inspect the individual elements and check if there are hidden padding or margins being applied

Answer 3

I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.

P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...

Answer 4

IE and the other browsers have a different default style sheet.

IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.

So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.

(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)