SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <li><p> is running out of parent div

    I have a <div> that hold different information coming from the database. One is a horizontal list with dates. It works great until there are to many dates in the list. When that is the case the list just extends outside of the parent <div>. Is there a way to avoid that?

    This is the html structure:

    Code HTML4Strict:
    <ul class="detail_titles">
      <li>
        <p><b>Dates:</b> <span>#variables.datestr#</span></p>
      </li>
    </ul>

    Note: This happens in Chrome and IE. In FF it works fine.

    Any ideas?

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    You'll need to show CSS how you are making the div contain the horizontal list items and how you are making the list items horizontal. And where do they pop out of the div? From the side? the bottom?

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Stomme poes. This is the css regarding this part:

    Code CSS:
    .detail_titles {
    	width: 369px;
    	margin-bottom: 20px;
    	float: left;
    	font-size: 100%;		
    }
     
    .detail_titles li {
      width: 369px;
      float: left;
      color: #86bd03;
      list-style: none;
      margin:0 0 20px;
    }
     
    .detail_titles p {
      margin:0 !important;
      padding:0 0 0 6em;	
    	line-height: 1.1;
    }
     
    .detail_titles p b{
      width:5.5em;
      margin-left:-6em;
      float:left;
      clear:left;
    }
     
    .detail_titles li span {
        display: inline-block;
        color: #1d6406
    }
     
    .listing_details li span a {
    	font-weight: bold;
    }

    and they pop out to the right.

    Thank you
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Can you show a working demo of the problem as I don't see anything wrong with the above snippet ?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I was unable to fault your code, i tried it in Firefox, Chrome and IE and in all cases it worked perfect for me.

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post

    ...information coming from the database.

    It works great until there are to many dates in the list. When that is the case the list just extends outside of the parent <div>. Is there a way to avoid that?
    Hi donboe,

    Is your database running the dates together without whitespace? If so that could be the problem as it would basically be treating the dates as one word. But then FF should show the problem too.

    If you can't post a link to the page for some reason then post the generated html of the problem area.

    If it is acting like one word then you could use the word-break property.

    Code HTML4Strict:
    <ul class="detail_titles">
      <li>
        <p><b>Dates:</b> <span>01-21-11,02-22-11,03-23-11,04-24-11,05-25-11</span></p>
      </li>
    </ul>

    Code:
    .detail_titles li span {
        display: inline-block;
        word-break:break-word;
        color: #1d6406
    }

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Correction, actually I had meant to say word-wrap
    Code:
    .detail_titles li span {
        display: inline-block;
        word-wrap:break-word;
        color: #1d6406
    }

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Can you show a working demo of the problem as I don't see anything wrong with the above snippet ?
    Hi Paul you can see the problem here

    Like I said in Firefox it goes to the next line when the width is reached, but in Chrome and IE it just pops out of the <div>
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Hi donboe:
    yup, it's what Ray was talking about.

    The reason it's different per browser is, Firefox for example will break a line where it sees a / but for example Opera won't (we see this with long URLs all the time).

    I would use Ray's word-wrap: break-word and then check which browsers that doesn't work in (if you have enough users with browsers where that doesn't work, you could stoop to using Javascript to look for the / and add a ' ' in there).

    Or, get your back-end to do that when it grabs from the database. Spaces after the commas would make the dates more readable anyway, and all browsers can wrap on a space.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I would use Ray's word-wrap: break-word and then check which browsers that doesn't work in (if you have enough users with browsers where that doesn't work, you could stoop to using Javascript to look for the / and add a ' ' in there).
    Support is very good for word-wrap:break word now and all versions of IE support it and all modern browsers also.

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur and Paul but I can't get it to work as you can see here any other suggestions?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    When they upgraded the forums it looks like it reformatted the code snippet in my last post.

    You have the the word-wrap nested in the [ COLOR=Blue] [ /COLOR] tags in your layout.css

    Code:
    .detail_titles li span {
        display: inline-block;
        word-wrap:break-word;
        color: #1d6406
    }
    It should work just fine for you if you remove the color tags

    Code:
    .detail_titles li span {
        display: inline-block;
        word-wrap: break-word;
        color: #1d6406
    }


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
  •