SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with <ul><li> destroying padding/margin.

    Hello,

    I add news to my site like this:

    Code:
    <span class="date">DATE, YEAR </span><span class="time">POSTED TIME</span>
    	<h2 class="newstitle">A title</h3>
    	<p class="newsbody">
    		Some text.<br /><br />
    		Some more text.<br /><br />
    		Even more text!
    	</p>
    the css:

    Code:
    #newscontent .date {
    	font-size: 					11px;
    	color:						#F0441E;
    	margin:						0;
    	padding:					0;
    }
    #newscontent .time {
    	font-size: 					11px;
    	color:						#999;
    	margin:						0;
    	padding:					0;
    }
    #newscontent .title {
    	font-size: 					11px;
    	color:						#B3B3B3;
    	margin:						0;
    	padding:					0;
    }
    
    p.newsbody {
    	margin:						0 0 10px 0;
    	color:						#888;
    }
    h2.newstitle {
    	color:						#606060;
    }
    My problem is this: If I add a

    Code:
    <ul>
        <li>listitem</li>
    </ul>
    into my newsbody paragraph the margin of newsbody is removed. This makes so the newsbody and next news item's newstitle goes together without any space between them. It's supposed to be a 10px margin between every news. Why does this happend when I add a list into the newsbody?

    Martin Lundberg
    Sweden

  2. #2
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to tell that the space only disapears in mozilla firefox, in IE it's there.

    Martin Lundberg
    Sweden

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Investigate

    I can't really answer your question without trying it myself, but you could add background colors and borders to both the p and the ul to help visualize what is actually happening with margins and padding; it may be that you'll have to style the ul as well. Strictly speaking, a p shouldn't contain a list, though...
    Regards,
    Ronald.

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

    I'm not sure what you are trying to do but you can't put the list inside the paragraph as rnaldb66 pointed out.

    The 10px margin is on the bottom of the paragraph anyway so it won't have any effect on anything inside!

    Why don't you change it to just a list.
    Code:
    ul.newsbody {
     list-style-type:none;
     margin:0;
     padding:0;
    }
    
    ul.newsbody li{
    margin:	  0 0 10px 0;
    padding:0; 
    color:	  #888;
    }
    Code:
    <ul class="newsbody">
      <li>listitem</li>
      <li>listitem</li>
      <li>listitem</li>
    </ul>
    You can style the list however you want (get rid of bullets/margins/padding etc as required).

    I'm not sure this is what you meant anyway

    Paul

  5. #5
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well what I want is to be able to write lists in my news entrys. I will change everything now and see if it works after som tweaks =) I will have to do something like having a <div class="newsbody"></body> and inside that I have paragraphs and lists (closing the paragraph before adding a list).

    Thanks for the help! =)

    Martin Lundberg
    Sweden

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thought about that...

    That would work as well; at least that way you can specify whatever margins or padding you want on the div, securing a predictable separation between them.
    Regards,
    Ronald.


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
  •