Paragragh under List

[Banana Man]

Hi,

Im being driven insane with this one. I have a problem where if i try to add a paragrapgh of text below a <ul> list the pargrapgh is appearing behind the <ul> list text instead of below it. Can anyone help with this?

Thanks

[Paul O'B]

Hi,

We'd need to see some code as it could be one of a number of things.

e.g.

Is it the background that appears behind the ul or the content? If so then you probably haven't cleared the float.

Is the ul or p absolutely positioned?

Have you set a height on the ul that doesn't actually match its content height?

Have you used negative margins somewhere?

and so on ...

[Banana Man]

Sorry, here's my code:

<div id="colum-middle"><img src="images/06.jpg" class="header_image" ><h2>Blackrock Cash Registers</h2>
<p>Blackrock Cash Registers provide professional retail products and services to all businesses in the retail environment.</p>
 
<p>Our highly trained team have been providing retail products and excellent customer service in the Leinster region for over 30 years.</p>
 
<p>We specialize in six main areas:</p>
<div>
<ul>
<li>Cash Register Systems</li>
<li>Touch Screen Systems</li>
<li>Free Technical Phone Support</li>
<li>Drawer Bases</li>
<li>Rental Packages Available</li>
<li>A full range of Till Rolls and Ink Ribbons</li>
<li>Weighing Machines</li>
</ul>
</div>
<div id="clear"></div>
<p>Staff trained and cash registers programmed by Blackrock Cash Registers. We ensure that the system is installed to your satisfaction.</p>
</div>

#colum-middle ul {
	padding:0px;
	margin-left:40px;
	margin-right: 4px;
	margin-top: 0px;
	text-align: left;
}
 
#colum-middle ul li {
	font-family:verdana; 
	list-style:none; 
	padding-left:15px;
	margin-left: 0px;
	margin-bottom:5px; 
	background:url(../images/13.jpg) no-repeat 0 0.42em;
	line-height: 14pt;
	text-align: left;
   	color: #333333;
}

You can see the result here:

http://dublinwebdesign.com/bcr/

[Paul O'B]

Hi,

My telepathic powers are at full strength today and I answered your question in point three of my first post

Have you set a height on the ul that doesn't actually match its content height?

ul {
    /*height: 45px;*/
    margin: 0 auto;
    padding: 0;
}

If you want a specific ul to be 45px high then set a class and isolate it accordingly. Don't set all uls to 45px high as that will cause problems

[Banana Man]

Excellent, thanks for the help!