SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Paragragh under List

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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 ...

  3. #3
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, here's my code:

    Code HTML4Strict:
    <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>

    Code CSS:
    #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/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Quote Originally Posted by me
    Have you set a height on the ul that doesn't actually match its content height?
    Code:
    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

  5. #5
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •