Position Text in Div

Hi, I am attempting to write a generic class for a warning box. The
class looks like this:

..warningBox {
background-image:url(images/co_images/warning_flag.gif);
background-repeat:no-repeat;
text-indent:15px;
border: solid 1px silver; background-color:rgb(255,255,225);
background-color:rgb(255,255,225);
background-position:2px 2px;
padding:2px;
overflow:visible;
line-height:inherit;
}

The div looks like this:

<div class="warningBox" style="width:250px">
test warning dialog box test warning dialog box test warning dialog
</div>

The thing is, the "text-indent" property indents the first line of text
so that it is padded to the left, avoiding the small (12x12) background
image. This is fine, but all subsequent lines of text appear
non-indented. Is there any way to indent ALL lines of text?

Many thanks

On 2006-09-28, Steve Macleod <steve.macleod (AT) blueyonder (DOT) co.uk> wrote:

Hi, I am attempting to write a generic class for a warning box. The
class looks like this:

.warningBox {
background-image:url(images/co_images/warning_flag.gif);
background-repeat:no-repeat;
text-indent:15px;
border: solid 1px silver; background-color:rgb(255,255,225);
background-color:rgb(255,255,225);
background-position:2px 2px;
padding:2px;
overflow:visible;
line-height:inherit;
}

The div looks like this:

<div class="warningBox" style="width:250px"
test warning dialog box test warning dialog box test warning dialog
</div

The thing is, the "text-indent" property indents the first line of text
so that it is padded to the left, avoiding the small (12x12) background
image. This is fine, but all subsequent lines of text appear
non-indented. Is there any way to indent ALL lines of text?

You could make the div a list-item, and give it:

list-style-position: outside;
list-style-image: url(images/co_images/warning_flag.gif);

Precisely where the image goes is UA dependent, but it ought to put it
somewhere sensible.

Otherwise make both the image and the warningBox div float: left.

Thanks for the reply. The purpose was mainly to keep markup as
explanitory and simple as possible. I ended up using:

<div class="warningBox" style="width:250px">
<p>test warning dialog box test warning dialog box test warning
dialog</p>
</div>

with:

..warningBox {
background-image:url(images/co_images/warning_flag.gif);
background-repeat:no-repeat;
border: solid 1px silver; background-color:rgb(255,255,225);
background-color:rgb(255,255,225);
background-position:2px 2px;
padding:2px;
overflow:visible;
line-height:inherit;
}
..warningBox p {padding-left:20px}