CODEWITHSUNDEEP
cssinternet-explorer-6
Dave
Dave

Reputation: 136

padding-right for display:inline elements in IE6

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.

Upvotes: 0

Views: 1203

Answers (3)

Rich Adams
Rich Adams

Reputation: 26574

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.

Upvotes: 2

Matijs
Matijs

Reputation: 2553

The best solution is to ignore IE 6. People still using IE 6 are used to getting bad web page displays and they are mostly using IE 6 because their network administrators think it is safer to let everybody use it.

As for a second choice solution: pad a hard space ( ) after the text.

Upvotes: 0

Tom
Tom

Reputation: 30698

Try setting the element to display:inline-block. That sometimes helps.

Also... seeing the code in context would make it easier to see what's going on.

Upvotes: 1

Related Questions