CSS layout issue with unwanted space

Discussion in 'Web Design and Development' started by Cabbit, Nov 17, 2008.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    [​IMG]
    broken

    [​IMG]
    ment to look like


    i am having a problem with my css where instead of the element being at the bottom with the border going all the way with it to the bottom it instead stops where the content stops.

    heres the css
    HTML:
    /* Threads for forum threads and comments */
    
    .thread_container {
    	-moz-border-radius-bottomright: 10px;
    	-webkit-border-bottom-right-radius: 10px;
    	margin-top: 5px;
    	border: 1px solid #999;
    	display: block;
    	overflow: hidden;
    }
    .thread_title {
    	display: inline;
    	padding: 5px;
    	border-bottom: 1px solid #999;
    	display: block;
    	overflow: hidden;
    	color: #666;
    	background-color: #e5ffe5;
    	font-size: .8em;
    }
    .thread_subject {
     	float: left;
    }
    .thread_number {
     	float: left;
    	font-size: .6em;
    }
    .thread_right {
     	float: right;
    }
    .thread_inner_container {
    	height: 100%;
    	width: 100%;
    }
    .thread_userstats {
    	height: 100%;
    	font-size: .8em;
    	float: left;
    	width: 150px;
    	background-color: #ffddff;
    	border-right: 1px solid #999;
    }
    .thread_body {
    	margin: 2px;
    	width: 560px;
    	float: right;
    }
    .thread_avatar {
    	border: 1px solid #999;
    	width: 110px;
    	margin: 2px auto 0px auto;
    }
    .thread_username {
    	text-align: center;
    	width: 150px;
    	margin: 2px auto 0px auto;
    }
    .thread_userrank {
    	color: #888;
    	text-align: center;
    	width: 150px;
    	margin: 2px auto 0px auto;
    }
    .thread_usertools {
    	text-align: center;
    	width: 148px;
    	padding: 1px;
    	background-color: #fff;
    	border-top: 1px solid #999;
    	margin: auto auto 0px auto;
    }
    /* End of Thread styleing */
    and the html for reference
    PHP:
    function forum_thread($row$number) {
        
    // Function for displaying a thread //
        
        // Begin output of the thread //
        // ************************** //
        
        // The container //
        
    echo '<div class="thread_container">';
            
        
    // Send the date for processing and return it //
        
    $date date_convert($row['date']);
        
    // End of date processing //
        
        // The header contains the subject, post date and the thread number //
        
    echo '    <div class="thread_title">
                    <div class="thread_subject">Subject: '
    .$row["subject"].'
                    <span class="thread_number">'
    .$date.'</span></div>  
                    <span class="thread_right">#'
    .$number.'</span>
                </div>'
    ;
        
        
    // Returns ether the users avatar or the no avatar if the user has none
        
    if ($row['avatar'] == '' || $row['avatar'] == 'not entered'
        { 
            
    $avatar '<img width="110px" src="../images/avatars/no_log.jpg" alt="No profile image" />';
        }
        else 
        { 
            
    $avatar '<img width="110px" src="../images/avatars/'.$row["avatar"].'" alt="'.$row["avatar"].'\'s avatar" />';
        }
        
        
    // The profile and mail me variables //
        
    $mail_me '<a href="../mail/compose.php?user=%s">
                        <img src="../images/layout/mail_new.png" alt="mail"  height="14px" hspace="5px"> 
                    </a>'
    ;
        
    $my_profile '<a href="../user_service/user_profile.php?&user=%s">
                            <img src="../images/layout/friends.jpg" alt="profile" height="20px"> 
                        </a>'
    ;
                        
        
    // inner containing element for the thread //
        
        
    echo '<div class"thread_inner_container">';
        
        
    // Returns the poster information //
        
        
    echo '<div class="thread_userstats">';
        echo 
    '<div class="thread_avatar">'.$avatar.'</div>';
        echo 
    '<div class="thread_username">'.$row['username'].'</div>';
        echo 
    '<div class="thread_userrank">'.user_rank($row['username']).'</div>';
        echo 
    '<div class="thread_usertools">'.$mail_me$my_profile.'</div>';
        echo 
    '</div>';
        
        
    // The body text of the thread, comment for comments and body for forum topics //
        
    echo '<div class="thread_body">';
        if (isset(
    $row["comment"]))
        {
            
    $body $row["comment"];
        }
        else
        {
            
    $body $row["post"];
        }
        
    $quote_start "\[quote\]";
        
    $string $body
        
    $new_string preg_replace("/".$quote_start."/i""<div class=\"quote\">"$string);
        
    $stingie $new_string;
        
    $quote_end "\[\/quote\]";
        
    $com_string preg_replace("/".$quote_end."/i""</div>"$stingie);
        if (
    $com_string == "") {
            
    $com_string $body;
        }
        echo 
    stripslashes($com_string);
        echo 
    '</div>';

        
    // The edit button //
        /*if ($usrname == $row["username"] || $session->userlevel == '8' || $session->isAdmin()) 
        { 
            echo '<span class="button"><a href="edit_comment.php?id='.$row["id"].'">Edit</a></span>';
        }

        // The delete button //
        if ($session->userlevel == '8' || $session->isAdmin()) 
        {
            echo '<span class="button"><a href="show_comments.php?id=$id&delete='.$row["id"].'">Delete</a></span>';
        }*/

        // end of the inner container //
        
    echo '</div>';
        
        
    // End of container //
        
    echo '</div>';
    // End function //
    }
     
  2. memco macrumors 6502

    Joined:
    May 1, 2008
    #2
    Do you have a link to the page or can you provide the code of the generated page rather than the PHP code? It'd make it easier for me to see what's going on.
     
  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><!-- Start header -->
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- Charicter set -->
    	<title>Adult Baby Comforts :: Forum</title><!-- Remember to make the title dynamic to page -->
    	<style type="text/css" media="all">@import "../stylesheet.css";</style><!-- Stylesheet import -->
    	<style type="text/css" media="all">@import "forum_style.css";</style><!-- Stylesheet import -->
    	<!-- Scripts -->
    		<script src="../script/whosonline.js" language="javascript" type="text/javascript"></script>
    	<!-- End Scripts -->
    </head><!-- End header -->
    <body><!-- Start outputting the body -->
    <div id="page_container"><!-- The page container for the entire page -->
    	<div id="header_repeat">
    <div id="header"><!-- Page header -->
    <!-- Header image called by css -->
    	<!-- header span -->
    	<div id="header_left"></div>
    <!-- Accessibility header that's only seen by screen readers or CSS-less browsers -->
    	<h1 class="nosee">Adult Baby Comforts</h1>
    </div><!-- End of "header"-->
    </div>
    <div id="navagation"><!-- Main navagation bar -->
    	<!-- Navagation Links -->
    	<ul>
    		<li><a href="../index.php">Home</a></li><li class="active_link"><a href="../forum/index.php">Forum</a></li><li><a href="../chat/index.php">Chat</a></li><li><a href="../stories/index.php">Stories</a></li><li><a href="../gallery/index.php">Gallery</a></li><li><a href="../site_help/index.php">Site Help</a></li>	</ul>
    </div><!-- End of "navagation" -->	<div id="crumbs"><!-- Main crumb bar -->
    	<!-- crumb Links -->
    		<ul>
    			<li>You are here : </li>
    			<li><a href="index.php">Forum Index</a>
    			 > </li><li><a href="index.php?category=1">Forum Topics</a> > </li><li><a href="index.php?topic=1">Announcments</a> > </li>			<li>Forum is open</li>
    				</ul>
    	</div>
    	<div id="page_main"><!-- box element that keeps the sidebar and main body areas grouped together -->
    		<div id="sidebar"><!-- The side bar block, for user cp and contribue blocks -->
    			 
    	<div class="side_block">
    		<h3>JerryLouise</h3>
    		<div class="inside_block">
    <span class="user_avatar"><img src="../images/avatars/teen_jerry.jpg" alt="avatar_JerryLouise" width="120px"/></span>Userlevel: Admin<div>
    <ul>
    	
    	<li>
    		<a href="/forum/forum_topic_view.php?admin_mode">Admin Mode</a>
    	</li>
    	<li>
    		<a href="../admin/index.php">Admin</a>
    	</li>	<li>
    		<a href="../process.php">Logout</a>
    	</li>
    	<li>
    		<a href="../useredit.php">Account</a>
    	</li>
    	<li>
    		<a href="/mail/index.php">Mail</a> 
    		 (0)	</li>
    </ul>
    </div>
    </div>
    
    </div><div class="side_block">
    	<h3>Contribute</h3>
    	<div class="inside_block">
    		<ul>
    			<li>
    				<a href="../forum/index.php?view_mode=statement">New forum topic</a>
    			</li>
    			<li>
    				<a href="../stories/index.php?view_mode=statement">New story</a>
    			</li>
    			<!--<li>
    				<a href="../forum/new_topic.php">New blog entry</a>
    			</li>
    			<li>
    				<a href="../forum/new_topic.php">New tip</a>
    			</li>-->
    			<li>
    				<a href="../forum/new_topic.php">New image</a>
    			</li>
    		</ul>
    	</div>
    </div>
    			<div id="whoonline"><noscript><br />
    <b>Warning</b>:  include(class/sidebar/noscript_whos_online.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/abcomfor/public_html/forum/forum_topic_view.php</b> on line <b>90</b><br />
    <br />
    <b>Warning</b>:  include(class/sidebar/noscript_whos_online.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/home/abcomfor/public_html/forum/forum_topic_view.php</b> on line <b>90</b><br />
    <br />
    <b>Warning</b>:  include() [<a href='function.include'>function.include</a>]: Failed opening 'class/sidebar/noscript_whos_online.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in <b>/home/abcomfor/public_html/forum/forum_topic_view.php</b> on line <b>90</b><br />
    </noscript></div>
    		</div><!-- End of "sidebar" -->
    		<div id="content"><!-- This is the main text body of the page -->
    			<div class="main_block"><h3>Forum is open</h3><form action="forum_search.php?search" method="post"<div class="function_box">
    	<div class="funtions">
    	<div id="subnav">
    		<ul>
    			<li><a href="reply.php?id=34">Reply</a></li>
    			<li><div class="separator"></div></li>
    			<li><a href="compose.php?id=34">New Topic</a></li>
    		</ul>
    	</div>
    	</div>
    	</div><div class="inside_block_special"><div class="thread_container">	<div class="thread_title">
    				<div class="thread_subject">Subject: Forum is open
    				<span class="thread_number">10-10-2008 00:00</span></div>  
    				<span class="thread_right">#1</span>
    			</div><div class="thread_userstats"><div class="thread_avatar"><img width="110px" src="../images/avatars/teen_jerry.jpg" alt="teen_jerry.jpg's avatar" /></div><div class="thread_username">JerryLouise</div><div class="thread_userrank">Admin</div><div class="thread_usertools"><a href="../mail/compose.php?user=%s">
    					<img src="../images/layout/mail_new.png" alt="mail"  height="14px" hspace="5px"> 
    				</a><a href="../user_service/user_profile.php?&user=%s">
    						<img src="../images/layout/friends.jpg" alt="profile" height="20px"> 
    					</a></div></div><div class="thread_body"><p><img width="200" height="170" vspace="5" hspace="5" border="1" align="top" alt="" src="/images/user_uploads/JerryLouise/image/jeri's-crib.jpg"></p>
    <p>Hi all, the forum is open please use it.</p></div></div><div class="thread_container">	<div class="thread_title">
    				<div class="thread_subject">Subject: Zeb here
    				<span class="thread_number">10-10-2008 00:00</span></div>  
    				<span class="thread_right">#2</span>
    			</div><div class="thread_userstats"><div class="thread_avatar"><img width="110px" src="../images/avatars/avatar_zebab.jpg" alt="avatar_zebab.jpg's avatar" /></div><div class="thread_username">abzeb</div><div class="thread_userrank">Newborn</div><div class="thread_usertools"><a href="../mail/compose.php?user=%s">
    					<img src="../images/layout/mail_new.png" alt="mail"  height="14px" hspace="5px"> 
    				</a><a href="../user_service/user_profile.php?&user=%s">
    						<img src="../images/layout/friends.jpg" alt="profile" height="20px"> 
    					</a></div></div><div class="thread_body"><p>hay i talked to you and i got to say this site is realy the best one iv seen iv looked at your code and i have to say ...wow... i didnt realise who you were intill you loged off but ...man opps girl sowi i jus think this might be the sight for me </p></div></div><div class="thread_container">	<div class="thread_title">
    				<div class="thread_subject">Subject: 
    				<span class="thread_number">10-10-2008 00:00</span></div>  
    				<span class="thread_right">#3</span>
    			</div><div class="thread_userstats"><div class="thread_avatar"><img width="110px" src="../images/avatars/teen_jerry.jpg" alt="teen_jerry.jpg's avatar" /></div><div class="thread_username">JerryLouise</div><div class="thread_userrank">Admin</div><div class="thread_usertools"><a href="../mail/compose.php?user=%s">
    					<img src="../images/layout/mail_new.png" alt="mail"  height="14px" hspace="5px"> 
    				</a><a href="../user_service/user_profile.php?&user=%s">
    						<img src="../images/layout/friends.jpg" alt="profile" height="20px"> 
    					</a></div></div><div class="thread_body"><p>Hey thanks, be sure to give me a buzz sometime.</p></div></div><div class="thread_container">	<div class="thread_title">
    				<div class="thread_subject">Subject: Under Review
    				<span class="thread_number">10-10-2008 00:00</span></div>  
    				<span class="thread_right">#4</span>
    			</div><div class="thread_userstats"><div class="thread_avatar"><img width="110px" src="../images/avatars/teen_jerry.jpg" alt="teen_jerry.jpg's avatar" /></div><div class="thread_username">JerryLouise</div><div class="thread_userrank">Admin</div><div class="thread_usertools"><a href="../mail/compose.php?user=%s">
    					<img src="../images/layout/mail_new.png" alt="mail"  height="14px" hspace="5px"> 
    				</a><a href="../user_service/user_profile.php?&user=%s">
    						<img src="../images/layout/friends.jpg" alt="profile" height="20px"> 
    					</a></div></div><div class="thread_body"><p>All forum posts are under review and its likely i will be deleting most of them to start fresh.</p></div></div>		<!--end of main content div-->
    				</div><!-- End of "content" -->
    		</div><!-- End of "content" -->
    
    		</div><!-- End of "content" -->
    	</div><!-- End of "page_main" -->
    	<div id="footer"><!-- The page footer -->
    	<div class="footer_text"><!-- Contains the footer text -->
    		<ul class="footer_left">
    			<li class="first"><a href="../links/">Links</a></li>
    			<li><a href="../about/">About</a></li>
    			<li><a href="../contact_us/">Contact Us</a></li>
    			<li><a href="../sitemap/">Site Map</a></li>
    			<li><a href="../help/">Help</a></li>
    		</ul>
    		<ul class="footer_right">
    		  <li class="first"><a href="../report/">Report a Issue</a></li>
    		  <li><a href="../request/">Request a Feature</a></li>
    		</ul>
    	</div><!-- End of "footer_text" -->		
    </div><!-- End of "footer" --></div><!-- End of "page_container" -->
    
    	</body>
    </html>
    html generated. i am working on cleaning it up and the errors.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    It's potentially tied to this part,
    Code:
    .thread_userstats {
    	height: 100%;
    /*...*/
    }
    It's hard to tell what that line and "H" are from on the screen shot of the incorrect rendering.
     
  5. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #5
    with that line removed its the same thing

    http://abcomforts.com/forum/forum_topic_view.php?id=34 here is a page link
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Seeing the page helped. I think your best bet is to place a border on .thread_body. Though you'll have to rework some margins, paddings, and borders on some of the other items so it looks and fits right. That would be the most straight forward approach I can think of.

    I wasn't sure if you want those user tool icons to be close to the top (right under Admin) or is you want it resting at the bottom (similar to how Mac Rumors has it).
     
  7. memco macrumors 6502

    Joined:
    May 1, 2008
  8. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #8
  9. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #9
    Yip i want my icons at the bottom with the space above growing to fit. Oh and the height 100% was removed its just in that paste but its out of the achual code now.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    When I was playing around with placing it at the bottom I believe it took using,

    Code:
    .thread_container {
     position: relative;
    ...
    }
    ...
    .thread_usertools {
     position: absolute;
     bottom: 0;
    ...
    }
    I may not be remembering the class names though, but they were exiting ones. The only thing with this solution is that I don't think IE will behave. I'll think about it some more when I have a chance, but this is something to try out in the mean time.
     
  11. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #11
    makes it look like this
     
  12. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #12
    this makes the container large enough but leaves the thread_usertools at the top with everything else when i want them at the bottom.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Looks like you put the CSS in the wrong spot. You put the relative positioning in the .thread_userstats class. Below is what's needed.
    Code:
    .thread_container {
    position: relative; /* new */
    }
    .thread_userstats {
     	position: relative;  /* delete */
    }
    .thread_usertools {
     	position: absolute; /* you have this */
     	bottom: 0; /* you have this */
     	width: 150px; /* new */
    }
    Just see the comments for what to add or delete. These changes will also show where some border styling will need updating, but I'll leave that for you.
     
  14. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #14
    Ok its getting very close now, just a wee problem with it hiding some content.
    Its hiding some text

    updated css
    HTML:
    /* Threads for forum threads and comments */
    
    .thread_container {
    	-moz-border-radius-bottomright: 10px;
    	-webkit-border-bottom-right-radius: 10px;
    	position: relative;
    	margin-top: 5px;
    	border: 1px solid #999;
    	display: block;
    	overflow: hidden;
    }
    .thread_title {
    	display: inline;
    	padding: 5px;
    	border-bottom: 1px solid #999;
    	display: block;
    	overflow: hidden;
    	color: #666;
    	background-color: #e5ffe5;
    	font-size: .8em;
    }
    .thread_subject {
     	float: left;
    }
    .thread_number {
     	float: left;
    	font-size: .6em;
    }
    .thread_right {
     	float: right;
    }
    .thread_inner_container {
    	float:right;
    	width: 760px;
    	overflow: hidden;
    }
    .thread_userstats {
    	border-right: 1px solid #999;
    	font-size: .8em;
    	float: left;
    	width: 150px;
    	background-color: #ffddff;
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    .thread_body {
    	margin: 2px;
    	width: 560px;
    	float: right;
    }
    .thread_avatar {
    	border: 1px solid #999;
    	width: 110px;
    	margin: 5px auto 0px auto;
    }
    .thread_username {
    	text-align: center;
    	margin: 2px auto 0px auto;
    }
    .thread_userrank {
    	color: #888;
    	text-align: center;
    	margin: 0px auto 0px auto;
    }
    .thread_usertools {
    	position: absolute; /* you have this */
     	bottom: 0; /* you have this */
     	width: 148px; /* new */
    	border-right: 1px solid #999;
    	text-align: center;
    	padding: 1px;
    	background-color: #fff;
    	border-top: 1px solid #999;
    	margin: 5px auto 0px auto;
    }
    /* End of Thread styleing */
     
  15. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #15
    fixed it with a little extra margin. now to hope this looks great on firefox, and internet exploder 7
     
  16. memco macrumors 6502

    Joined:
    May 1, 2008
    #16
    It should render just fine. Here's a shot from FF3 to show what it looks like. I can do the FF2 and IE7 for you tomorrow if you'd like to see it.
     

    Attached Files:

  17. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
  18. memco macrumors 6502

    Joined:
    May 1, 2008
    #18
    So, we've hit a snafu-it doesn't render correctly in IE 7. I'm attaching screenshots. The first one is definitely something to fix, but the second might not be so bad (just add img{border:0;} to your css).

    I just played with it a bit further, the footer doesn't align with the rest of the page, and the first post continues down into the second. The page is mostly usable, but there're a few things that'll need to be looked at.

    (BTW FF2 renders the page just fine.)
     

    Attached Files:

  19. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #19
    >.< dang internet exploder
     
  20. memco macrumors 6502

    Joined:
    May 1, 2008
    #20
    Just thought I'd let you know I'll be able to look through this in a day or two to see if I can pin down what's causing these problems, so I'll get back to this thread when I've looked more thoroughly.
     

Share This Page