SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Defintion list doesn't have a height

    Simply as I have mentioned in the title, and reason why this is a problem is that on the outside of the definition list there is a div containing it, but in the site it looks screwed up because the div won't go past the definition list (and I know this because there is a border that stops right before it. I'll just post the code I'm having difficulty with... Maybe I'm forgetting to close a tag somewhere...

    Code:
    <div class="panel">
    
    	<p>{L_UCP_WELCOME}</p>
    
    <!-- IF .topicrow -->
    	<h3>{L_IMPORTANT_NEWS}</h3>
    
    	<ul class="topiclist cplist">
    	<!-- BEGIN topicrow -->
    		<li class="row<!-- IF topicrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
    			<dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
    				<dt <!-- IF topicrow.TOPIC_ICON_IMG -->style="background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;"<!-- ENDIF -->>
    					<!-- IF topicrow.S_UNREAD --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a><br />
    					<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
    					<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
    				</dt>
    				<dd class="lastpost"><span>{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
    					<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{topicrow.LAST_POST_TIME}</span>
    				</dd>
    			</dl>
    		</li>
    	<!-- END topicrow -->
    	</ul>
    <!-- ENDIF -->
    
    	<h3>{L_YOUR_DETAILS}</h3>
    
    	<dl class="details">
    		<dt>{L_JOINED}:</dt> <dd>{JOINED}</dd>
    		<dt>{L_VISITED}:</dt> <dd>{LAST_VISIT_YOU}</dd>
    		<dt>{L_TOTAL_POSTS}:</dt> <dd><!-- IF POSTS_PCT -->{POSTS}<!-- IF S_DISPLAY_SEARCH --> | <strong><a href="{U_SEARCH_USER}">{L_SEARCH_YOUR_POSTS}</a></strong><!-- ENDIF --><br />({POSTS_DAY} / {POSTS_PCT})<!-- ELSE -->{POSTS}<!-- ENDIF --></dd>
    		<!-- IF ACTIVE_FORUM --><dt>{L_ACTIVE_IN_FORUM}:</dt> <dd><strong><a href="{U_ACTIVE_FORUM}">{ACTIVE_FORUM}</a></strong><br />({ACTIVE_FORUM_POSTS} / {ACTIVE_FORUM_PCT})</dd><!-- ENDIF -->
    		<!-- IF ACTIVE_TOPIC --><dt>{L_ACTIVE_IN_TOPIC}:</dt> <dd><strong><a href="{U_ACTIVE_TOPIC}">{ACTIVE_TOPIC}</a></strong><br />({ACTIVE_TOPIC_POSTS} / {ACTIVE_TOPIC_PCT})</dd><!-- ENDIF -->
    		<!-- IF WARNINGS --><dt>{L_YOUR_WARNINGS}:</dt> <dd class="error">{WARNING_IMG} [{WARNINGS}]</dd><!-- ENDIF -->
    	</dl>
    </div>
    The definition list that has the class of "details" is the one I'm having trouble with, tell me if you need anymore information, but I can't post a link to the site, as I'm working on it through localhost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To help much, we'd need your CSS, and the actual generated HTML, rather than all that extra CMS code (or whatever it is). But at a guess, try adding overflow: hidden to the container div. Otherwise post a test page with the HTML and CSS together.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy crap! "overflow: hidden" actually worked perfectly! But could you explain to me why you guessed that? Or why you thought that might have worked? (for future reference)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It sounds like your <dl> is floated. By default, a container (like a div) does not wrap around a floated element. Floated elements "hang out" of containers by default. To force the container to enclose the floated object, there are a few methods, but the easiest is to add overflow: hidden to the container.

    Here's a more detailed answer:

    http://pageaffairs.com/web/css/containing-floats/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link and the help, greatly appreciate it!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Any time.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •