SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Collapsing Definition List

    I have a Definition List which displays User Info below someone's photo in the Comments section.

    The problem I just discovered, is that when a user doesn't complete all of the *optional* Profile fields, my Definition List is collapsing.

    Here is a screenshot...
    Attachment 60071


    Things should appear like this...
    Code:
    Joined:
    Location:
    Posts

    Originally I was thinking this was a PHP/mySQL issue, and that my code needs to replace a NULL value with something else so things don't collapse, but now I am wondering if crafting some smart CSS might accomplish the same thing, and with less fuss?!

    I was thinking of adding <br />, but I'm not sure that is right.

    Oh, btw, here is a code snippet...

    PHP Code:
        <dl>
            <
    dt>Joined:</dt>
            <
    dd>"
            . date('M Y' , strtotime(
    $joinedOn)) .
            "
    </dd>

            <
    dt>Location:</dt>
            <
    dd>"
            . str2htmlentities(
    $location) .
            "
    </dd>

            <
    dt>Posts:</dt>
            <
    dd>"
            . str2htmlentities(
    $posts) .
            "
    </dd>
        </
    dl
    Any way to fix this issue using HTML or CSS?

    Thanks,


    Debbie

  2. #2
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I discovered that either this...
    PHP Code:
        <dt>Location:</dt>
        <
    dd>"
        . (!empty(
    $location) ? str2htmlentities($location) : '<br />') .
        "
    </dd
    or this...

    PHP Code:
        <dt>Location:</dt>
        <
    dd>"
        . (!empty(
    $location) ? str2htmlentities($location) : '&nbsp;') .
        "
    </dd
    ...seems to solve the problem.

    (For all you non-PHP'ers out there, that code either inserts a <br /> or a &nbsp; if there was no Location: found in the database.)


    I am still curious if there is a way to handle this with CSS, though.

    Anyone?

    Thanks,


    Debbie

  3. #3
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,234
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    would adding "clear:both;" on the dt tag solve this? My guess is the float on am empty dd is allowing the float on dt to align next to the empty dd.
    Code:
    dt { clear: both }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cpradio View Post
    would adding "clear:both;" on the dt tag solve this?
    Code:
    dt { clear: both }
    Maybe clear: left, as you don't want to clear content to the right when it's been given.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Maybe clear: left, as you don't want to clear content to the right when it's been given.
    Is there any problem having my PHP just insert a &nbsp;??


    Debbie

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    They'll still stay on the same line, though. You want the dt to be on a new line.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    They'll still stay on the same line, though. You want the dt to be on a new line.
    The PHP code I posted above fixed things.


    Debbie

  8. #8
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    This seems like a CSS issue, not a PHP issue. I think cpradio and ralph have the right idea.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The problem with definition lists is that you can't easily have a clean break between the dt and the dd as they have no parent wrapped around each pair. Therefore if the dt or dd runs to zero lines or perhaps either runs to a few lines then you get a mismatch when the dt is floated because content will rise up or won't be pushed down.

    The only foolproof solution (apart from your scripting fix) is to use inline-block instead and to apply widths. This demo is from a similar thread a while back and shows that it works for any amount of content in either column and will still match up.


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
  •