Question

The problem we’re trying to solve is that text is overflowing past the end of a <p>. It seems to be the result of its contents, which include a relatively-positions <a> element, with an absolute-positioned <span> element within it, which has padding. Firefox wraps the text as I would normally expect.

Here’s an abstraction of my HTML:

<p>
    In this second example, 
    <a href="#">
        <span class="icon"><img src="play.gif"></span>
        mo
    </a> 
    muh...
</p>

And an abstraction of the CSS, as simplified as I think still makes sense:

a {
    padding: 5px;
}
a span.icon {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
}

Here’s a screenshot of the problem (the highlighting is Chrome’s element inspector with the <p> element highlighted). You can see the word immediately overflowing at the end of the <p>:

Any pointers in the right direction appreciated.

Answer 1

Instead of using absolute positioning, try using display:inline or display:inline-block (if you need to set height/width – Note: not supported in IE 7 and lower).

You could drop the display all together, because images and spans are inline to start with. I have an example here removing the span and just styling the image and surrounding link.

You could also use the image as a background for the button, and set the padding to account for the space. Example:

.button{
  background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
  padding: 0 0 0 15px;
}

example