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.
A:
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.
Tom
2010-01-07 19:03:27
Nope. Renders just like display: block. Thanks anyhow.
Dave
2010-01-07 19:07:27
A:
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.
Matijs
2010-01-07 19:04:42
I disagree. You need to analyse your traffic profile (in Google Analytics or elsewhere) to see how important IE6 is for your business.
Tom
2010-01-07 19:08:54
I can't ignore IE6; the product has to work on IE6 and above, plus all the good browsers. The text itself is not in a place where I can add an nbsp only when I need it. Thanks.
Dave
2010-01-07 19:09:26
I disagree as well. IE6 is still an important factor, whether we like it or not.
Pekka
2010-01-07 19:36:14
+2
A:
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.
Rich Adams
2010-01-07 19:07:08
display:block respects the width property, though, and that can be used to limit the rightward extent. display-inline does not. You might be correct that all the other browsers are wrong and IE6 is correct. I would just like to know how to cause IE6 to render as I am hoping I can. Thanks for answering though.
Dave
2010-01-07 19:13:42
Ah sorry, I didn't mean blocks should always take up the full width, only when you don't specify a width yourself. If you specify a width yourself, then block elements will obviously be that width, whereas inline will always just use what they need and won't change width, even if you specify a width for them. I've updated that bit in my answer to make it clearer. Although I may have just made it more confusing :)
Rich Adams
2010-01-07 19:15:52
A:
so did you find a suitable solution??? i am having the same issue i think.
Adding looks good in IE6 but horrible of center in FF and IE8
btw: which IE6 hacks/fixes are there?? I use overflow: hidden per div for height issues
yous
2010-02-10 22:04:04