Position Text in Div

[Steve Macleod]

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

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

The div looks like this:

<div class="warningB ox" style="width:25 0px">
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

[Ben C]

On 2006-09-28, Steve Macleod <st***********@ blueyonder.co.u kwrote:

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

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

The div looks like this:

<div class="warningB ox" style="width:25 0px">
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.gi f);

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.

[Steve Macleod]

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

<div class="warningB ox" style="width:25 0px">
<p>test warning dialog box test warning dialog box test warning
dialog</p>
</div>

with:

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