Question

In IE6, display:block with a colored background color extends that color to the far right side of the page. Changing to display:inline fixes that problem, but the color now ends immediately after my last character, despite the fact that I have specified padding-right: 1em
in the CSS. padding-left is working, but not padding-right. Any workarounds? I have been googling for hours and cannot find an answer.

Answer 1

I would hope display:block and display:inline work that way in other browsers too, not just IE6, since that’s how they’re meant to work. Block elements take up the full width (unless you specify a width yourself, in which case it will be that width) and have a newline afterwards, whereas inline only takes up the width it needs (even if you give it a different width, it won’t use it) and has no new line. This is why the background colour extends to the far right of the page when it’s a block element.

Padding should work fine on an inline element, so it’s possible you have another element or style which is conflicting and causing the issue. Without seeing a code sample it’s impossible to tell.

You could try using display:inline-block will keep the element inline (so that it doesn’t take up a full line and have a line break) but it will behave as a block element with regards to padding, margins and widths.

Note though that IE6 (and 7) only allow display:inline-block on elements that are default inline elements (span, etc)

Failing that, you would need to provide a code example that reproduces the problem so we can see if something else is having an impact.