<P> background troubles

Hello,

I have a DIV with a <P> tag and then a nested <UL> in the <P>. The <P> has a background, and the <LI> has one also (for the bullet, just a 12x12px). The list cuts off the <P> background and leaves it nice and ugly, and then resumes the background after the list ends.

I have the following css:

.boxes p {
	padding: 5px; background: url('images/mid_fade.png') no-repeat
}

.boxes li {
	background: url('images/bullet.png') no-repeat left; padding: 0 17px; margin-left: 17px;
}

Code (markup):

Here is the corresponding HTML:

	<div class="boxes">
		<P>Something goes here
			<ul>
				<li>list item 1</li>
				<li>list item 2</li>
				<li>list item 3</li>
			</ul>
		</p>
	</div>

Code (markup):

Bassically it looks like this right now:
<P>
###############
###############
<li>
<li>
<li>
###############
</p>

The # is suppose to be the <P> background. it should go down through the li.

Thanks.

 

As far as I know, p can only accept inline elements. You can't put a UL inside a P.
Why would you even want to put a UL inside a p? why not use a div to contain it or just style the ul with a background?

 

Nah, a better way would be to add span instead of p

But it all depends on the effect you want to achive, a url as an example or a png/psd would be better.


AHHHHHHHHH WRONG:

IGNORE THE MESSAGE ABOVE THIS ONE
What you want is dimensions on your boxes div and a big background image on it, so that it goes behind the list
forget about p or span for setting the background and use the div for it, simple as that, let me know if you need me to write it for you.