IE ignores padding when white-space: nowrap

Question

Ok so I have a span with a background that is positioned in the left side, and a 20px padding-left to keep text from being rendered on top of the image... pretty standard.

I also set white-space:nowrap on the span to stop the line from wrapping.

The span is in a div about 200px wide. If the text in the span is long enough to exceed the length of the containing div suddenly the padding starts to get ignored and the text renders on top of the bg image. This stops happening if I leave white-space:normal. Also the containing div has overflow: auto set (scroll bars being rendered).

Using IE8 ... is this a known thing? Is there a standard fix, I haven't been able to find anything :(

Answer 1

You may need to post more code but from what I'm hearing your html looks something like this

<div class="container"><span class="text">Text asdf asdf</span></div>

and your css looks something like this

.container
{
   overflow:auto;
   width:200px;
}
.text
{
   background:...
   white-space:nowrap;
   padding-left:20px;
}

In this simplistic model your padding will disappear because the the span is display inline and will stop properly applying the padding as it runs out of room to the right. In order to properly get your span to follow padding rules. You will need to change to display:block this will force you to make other changes as well if you want this to flow with other items in the div rather than being it's own line.

Answer 2

I don't have an answer to this, but it looks like Firefox (3.6) ignores the padding too. Hopefully there's a fix for this...