SitePoint Sponsor

User Tag List

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

    Need help Fixing User Comments...

    Sorry, but I think this is gonna be a l--o--n--g one?!

    So I could use help in two areas here...

    1.) Fix the background behind the User Comments so it always extends the same height as the User Summary area to left

    Currently...
    Attachment 60039


    Desired...
    Attachment 60040


    2.) Cleaning up my HTML and CSS because I'm sure they could be streamlined. (Be nice!!!!!)


    Here is my current HTML with one sample Comment included...
    HTML Code:
    <!-- ********************************-->
    <!-- Attempt to Display Comments.		*-->
    <!-- ********************************-->
    <div id="boxComments">
    	<h3>What Do You Think?</h3>
    
    	<ul>
    		<li>
    			<a id="addCommentButton" class="button" href="http://local.debbie/articles/add_comment.php">Add a Comment</a>
    		</li>
    	</ul>
    
    	<div class='commentWrapper'>
    
    		<div class='commentBody'>
    
    			<div class='userInfo'>
    				<a href='/account/profile.php?user=DoubleDee'>
    					<strong>DoubleDee</strong>
    					<img id='onlineStatus' src='/images/Light_Green_10.png' width='10' alt='Member Online' /><br />
    					<img class='noborder' src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='100'
    																alt='Member Photo'
    																title='Picture: Debbie sitting outside in the garden.' />
    				</a>
    				<dl>
    					<dt>Joined:</dt>
    					<dd>May 2012</dd>
    					<dt>Location:</dt>
    					<dd>Phoenix, AZ</dd>
    					<dt>Posts:</dt>
    					<dd>3</dd>
    				</dl>
    			</div>
    
    			<div class='userPost'>
    				<span class='commentDate'>Posted on: 2012-02-28 11:00pm</span>
    				<span class='commentNo'>#4</span>
    				<p>Update: Sorry to bother with this, I found the answer with a little minor digging. But, if anyone else was wondering the same, I think I'll explain.
    				<br />
    				<br />
    				The &lt;textarea&gt; tag is different than the &lt;input&gt; tag in that where you would normally put data to display in an &lt;input&gt; field under the 'value' attribute, the &lt;textarea&gt; tag stores the same information not in a 'value' attribute, but in between the opening and closing tags: eg. &lt;textarea&gt; value info goes here &lt;/textarea&gt;.
    				<br />
    				<br />
    				Hope that helps someone, sometime...</p>
    			</div>
    
    		</div>
    
    		<div class='commentFooter'>
    			<img src='/images/Flag_Red_20x22.png' width='15' alt='Flag Comment' />
    		</div>
    
    	</div>
    
    </div><!-- End of COMMENTS SECTION -->


    And here are my Styles...
    Code CSS:
    /*******************/
    /* COMMENTS Styles */
    /*******************/
    #boxComments{
    	max-width: 640px;
    	margin: 0 auto;
    	margin: 40px auto;
    	padding: 0 20px 60px 20px;
    	border: 1px solid #333;
    }
     
    /* Still do not understand this! */
    #boxComments:after{					/* Contain floats without overflow. */
    	content: "";
    	clear: both;
    	display: block;
    	height: 0;
    	font-size: 0;
    }
     
    #boxComments h3,
    #boxAddComment h3{
    	height: 20px;
    	margin: 0px -20px 10px -20px;
    	padding: 0.4em 10px 0.2em 10px;
    	text-align: left;
    	line-height: 1.4em;
    	font-size: 1em;
    	font-weight: bold;
    	color: #FFF;
    	background-color: #333;
    }
     
    /* Row of Buttons. */
    #boxComments ul{
    	margin: 0 0 0 20px;
    	padding: 0;
    }
     
    #boxComments ul li{
    	float: left;
    	margin: 5px 5px 0 0;
    	padding: 0;
    }
     
     
    #boxComments .commentWrapper{
    	width: 100%;
    	min-width: 498px;
    	float: left;
    	margin: 20px 0;
    }
     
    #boxComments .commentBody{
    	width: 100%;
    	float: left;
    	border-top: 1px solid #333;
    }
     
    #boxComments .userInfo{
    	float: left;
    	width: 160px;
    	padding: 10px 0px 0 0;
    	font-size: 0.9em;
    	text-align: center;
    }
     
    #boxComments .userInfo a{
    	padding: 0 0.7em 0 0;
    	color: #0071D8;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
     
    #boxComments .userInfo dl{
    	margin: 0;
    	padding: 10px 0 0 0;
    }
     
    #boxComments .userInfo dt{
    	float: left;
    	width: 4.5em;
    	text-align: right;
    }
     
    #boxComments .userInfo dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }
     
    #boxComments .userPost{
    	margin: 0 0 0 160px;
    /*	float: left;			/**/
    /*	width: 440px;				/**/
    /* FIX THIS */
    /*	max-width: 430px;	/**/
    /*	min-width: 288px;		/**/
    	padding: 10px 20px 20px 20px;
    	font-size: 0.9em;
    }
     
    #boxComments .commentDate{
    	display: inline-block;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentNo{
    	display: inline-block;
    	float: right;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentFooter{
    	float: left;	/**/
    /*	width: 620px;	/**/
    /*	min-width: 498px;	/**/
    	width: 100%;
    	margin: 0 0px;
    	padding: 3px 0px 2px 0;
    	background-color: #FAFAFA;
    }


    I think if I can get help writing better HTML and CSS, a lot of my other problems with this part of my website will fix themselves, including:

    - Issue with Background
    - Broken Fluid Design
    - Problem moving Flag over to the right.

    Thanks,


    Debbie

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    269 Post(s)
    Tagged
    5 Thread(s)
    We discussed these issues at some length a while back, and gave you a number of ways of approaching this. That thread is here.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    We discussed these issues at some length a while back, and gave you a number of ways of approaching this. That thread is here.
    Apparently it didn't help...


    Debbie

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I just started re-reading that *dead* thread from 3 months ago, and what I was asking help for is not what I am asking help for here.

    Seems like now would be a good time to start over and address my current questions with my current code...

    Thanks,


    Debbie

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

    Assuming you aren't going to have any floats in your comment section (see the link that Technobear pointed to and read my post in that thread for the explanation about the why and wherefore) then you can easily extend the user comments column by adding an element at the bottom of that column and setting it to clear:both.

    This will ensure that it always clears the left column no matter what height it is.

    Assuming IE6/7 support is not required then you can do this without extra mark up like so.

    Code:
    .userPost{background:red}
    .userPost:after{
    	content:" ";
    	display:block;
    	clear:both;	
    }
    If ie6/7 support is required then add an empty element at the bottom of the user posts column and set it to clear:both. As the result is only cosmetic I would tend to ignore IE6/7 here and maybe just add the extra element with a script if really needed.

    Code:
    .userPost{background:red}
    .userPost:after,.after{
    	content:" ";
    	display:block;
    	clear:both;	
    }
    #boxComments{zoom:1.0}
    .userPost {
    	zoom:expression(
    		runtimeStyle.zoom=0,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);
    }
    .userPost p{zoom:1.0}

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    Assuming you aren't going to have any floats in your comment section then you can easily extend the user comments column by adding an element at the bottom of that column and setting it to clear:both.

    This will ensure that it always clears the left column no matter what height it is.
    That fixed that problem.

    Thank you!!

    You always make things look so easy, Paul!! (And sarcasm free too.)




    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    At the bottom of each Comment, I would like to nudge over the Red Flag.

    I tried adding some Left padding here, but that not only gives the Red Flag some breathing room on the left, but it pushes the Footer to the right and it spills over.

    See screen-shot...
    Attachment 60057


    Here are my styles again...
    Code CSS:
    #boxComments .commentFooter{
    	float: left;	/**/
    	width: 100%;
    	margin: 0 0px;
    	padding: 3px 0px 2px 20px;
    	background-color: #FAFAFA;		/**/
    }

    I think I've got some other design issues brewing with how I did my Comments section, but I'm sorta over my head here.

    Thanks,


    Debbie

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Paul,

    At the bottom of each Comment, I would like to nudge over the Red Flag.

    I tried adding some Left padding here, but that not only gives the Red Flag some breathing room on the left, but it pushes the Footer to the right and it spills over.

    See screen-shot...
    Attachment 60057


    Here are my styles again...
    Code CSS:
    #boxComments .commentFooter{
    	float: left;	/**/
    	width: 100%;
    	margin: 0 0px;
    	padding: 3px 0px 2px 20px;
    	background-color: #FAFAFA;		/**/
    }
    Hi Debbie,

    The problem lies here:

    Code:
    width: 100%;
    padding: 3px 0px 2px 20px;
    100% + 20px makes the element 20px too large to fit.

    If this is a fixed pixel with then reduce the width by 20px.

    If its a fluid width then does it need to be floated? If not remove then just width and remove the float.

    If it needs to be floated then remove the 20px left padding and move the image instead.

    Code:
    .commentFooter img{margin-left:20px}

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    The problem lies here:

    Code:
    width: 100%;
    padding: 3px 0px 2px 20px;
    100% + 20px makes the element 20px too large to fit.
    Yeah, I knew that.


    If this is a fixed pixel with then reduce the width by 20px.

    If its a fluid width then does it need to be floated? If not remove then just width and remove the float.
    Well, the reason used a Float is because if I remove the Float from the Footer, this happens...
    Attachment 60059

    (That is, the background color of my Footer appears to take over the entire color of the Comment Area, and shades the "User Summary" a dark grey, when it was originally white like in my earlier screen-shots.)


    This is where it gets frustrating now that my website is more developed and complicated. Fix one thing and break another?!


    In my original post, I tried my best to grab all of the relevant HTML and CSS for this conversation. Since I'm not quite ready to put this up on the Internet, I'm trying to be as detailed as possible so you can more easily help out.

    And I think all of this ties in to my original Question #2, which was "How do I clean up my HTML (e.g. Need Floats?) so my design is simple and fluid?"


    If it needs to be floated then remove the 20px left padding and move the image instead.

    Code:
    .commentFooter img{margin-left:20px}
    I have no loyalty to Floats, other than the issue I am showing in my screen-shot above.

    Suggestions?

    Thanks,


    Debbie

    P.S. I wish I was back home and had my SitePoint book on HTML and CSS handy so I could re-read up on all of this stuff?!

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

    Floats are removed from the flow so when you place an element beneath a float then the element is placed as though the float is not there and then the foreground content is moved out of the way to make way for the float. That's the reason that the background will appear to slide under the floats when in fact its the other way around and the floats push the foreground content down.

    All you need to do is to add clear:both to the footer element and then it will start under the float.

    Just keep saying to yourself "floats are removed from the flow". Then you will realise that background, borders and margins care nothing about the float and act as if the float wasn't there and slide up to their containing block. Clearing floats and containing floats is something you need to get to grips with and understand fully or you will keep making the same mistakes.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    Floats are removed from the flow so when you place an element beneath a float then the element is placed as though the float is not there and then the foreground content is moved out of the way to make way for the float. That's the reason that the background will appear to slide under the floats when in fact its the other way around and the floats push the foreground content down.

    All you need to do is to add clear:both to the footer element and then it will start under the float.

    Just keep saying to yourself "floats are removed from the flow". Then you will realise that background, borders and margins care nothing about the float and act as if the float wasn't there and slide up to their containing block. Clearing floats and containing floats is something you need to get to grips with and understand fully or you will keep making the same mistakes.
    Paul, thanks for the response.

    A few things...

    1.) I think I have a pretty good grasp of Floats when you have a page of Text and something like a Floated Image. (My SitePoint book did a good job of describing that.)

    And your comments are a good re-inforcer.

    However, maybe I don't have as good of a grasp how Floats work around Other Floats and Other Text in more complex layout?!


    2.) Where I'm a little confused about your comments above, because I think the code in my original post was trickier than what you just described.

    Here is my markup again...
    HTML Code:
    	<div class='commentWrapper'>
    
    		<div class='commentBody'>
    
    			<div class='userInfo'>
    				<a href='/account/profile.php?user=DoubleDee'>
    					<strong>DoubleDee</strong>
    					<img id='onlineStatus' src='/images/Light_Green_10.png' width='10' alt='Member Online' /><br />
    					<img class='noborder' src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='100'
    																alt='Member Photo'
    																title='Picture: Debbie sitting outside in the garden.' />
    				</a>
    				<dl>
    					<dt>Joined:</dt>
    					<dd>May 2012</dd>
    					<dt>Location:</dt>
    					<dd>Phoenix, AZ</dd>
    					<dt>Posts:</dt>
    					<dd>3</dd>
    				</dl>
    			</div>
    
    			<div class='userPost'>
    				<span class='commentDate'>Posted on: 2012-02-28 11:00pm</span>
    				<span class='commentNo'>#4</span>
    				<p>Update: Sorry to bother with this, I found the answer with a little minor digging. But, if anyone else was wondering the same, I think I'll explain.
    				<br />
    				<br />
    				The &lt;textarea&gt; tag is different than the &lt;input&gt; tag in that where you would normally put data to display in an &lt;input&gt; field under the 'value' attribute, the &lt;textarea&gt; tag stores the same information not in a 'value' attribute, but in between the opening and closing tags: eg. &lt;textarea&gt; value info goes here &lt;/textarea&gt;.
    				<br />
    				<br />
    				Hope that helps someone, sometime...</p>
    			</div>
    
    		</div>
    
    		<div class='commentFooter'>
    			<img src='/images/Flag_Red_20x22.png' width='15' alt='Flag Comment' />
    		</div>
    
    	</div>

    In that code...

    On the outside, .commentWrapper is a Float
    Inside .commentWrapper, .commentBody is also a Float
    Inside .commentBody, .userInfo is a Float
    Inside .commentBody, .userPost is not a Float
    Inside .commentWrapper, .commentFooter is not a Float


    I understand that regular code ignores the Floats, but why did the background color of .commentFooter take over the background of .userInfo - which is a Float - when .userPost comes before it, and is not a Float?!

    Following the logic I thought you described, the background color of .userPost should have pushed to the left underneath .userInfo and become the visible background color instead of .commentFooter doing that.


    3.) Related to #2, what purpose does this code serve...

    Code CSS:
    #boxComments .userPost{
    	margin: 0 0 0 160px;
    	padding: 10px 20px 20px 20px;
    	font-size: 0.9em;
    }
     
    /* ADDED: 2012-06-13 */
    #boxComments .userPost:after{
    	content: " ";
    	display: block;
    	clear: both;
    }

    When I comment that second block out, I don't see any change in FireBug.

    But if I remove this code...
    Code CSS:
    #boxComments .commentFooter{
    	clear: both;
    	width: 100%;
    	margin: 0 0px;
    	padding: 0;
    	background-color: #EFEDFF;
    }

    ...then the absence of the clear: both in .commentFooter makes the Footer background fill in behind .userInfo.


    Hope I'm not confusing the heck out of you?!


    4.) I'm not sure why I chose to make .commentWrapper, .commentBody, and .userInfo Floats, but I did.

    What would make the most sense?


    FWIW, all of the Article Comments are conatined inside of #boxComments which has a max-width: 640px; which mirrors what the Article has above it for styles.


    I guess I wanted .commentWrapper to have a Minimum Width - which is does - but it can grow, since I wanted a Min-Max Fluid Design.

    .userInfo should be a Fixed Width.

    .userPost should be Fluid.


    Hope I haven't confused things too much?!

    Thanks,


    Debbie

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post


    I understand that regular code ignores the Floats, but why did the background color of .commentFooter take over the background of .userInfo - which is a Float - when .userPost comes before it, and is not a Float?!
    I'll say it again "Floats are removed from the flow". However they do influence the flow of the page by displacing foreground content away from them.

    If you have a float as the first element on the page and then you follow that with a static element then the containing block for the static element is the top of the viewport. It doesn't matter that there is a float above the static element because floats are removed from the flow. Therefore the background, borders and margins on the static element will stretch up until they hit the containing block which in this case will be the top of the viewport (the body element).

    If you try applying a top margin to the static elemenet you will see that it has no effect unless you give it a top margin greater than the height of the float above it. Once the margin is big enough to hit the containing block it will push the static element downwards.

    Imagine that the float is not there and wherever that static element starts is where the top of the containing block is. So when you insert a float before the static element the position of the static element doesn't really change . The background starts at the same position it would have been had the float not been there. The foreground content is pushed out of the way but the background remains where it would have been had the float not been present.

    When you add clear:both to the static element then it says "Ok I need to start after the float" and this its positioned is changed (although margin-top on the cleared element will still slide under the float). That's why you need to use bottom margins on the float and not top margins on the static element that follows a float.

    Following the logic I thought you described, the background color of .userPost should have pushed to the left underneath .userInfo and become the visible background color instead of .commentFooter doing that.
    The background would have stretched under userInfo had you not given userPost a 160px left margin. userPost starts 160px from the left. This is the distance to the containing block and as mentioned earlier slides under the float because floats are removed from the flow. the 160px is not the distance to the float is the distance through the float to the edge of the containing block. Its the same as the top margin effect I mentioned earlier.

    If you remove the 160px left margin the background colour will stretch into the userInfo div but the your text would start at the side of userinfo but then wrap underneath rather than staying in neat block to the side.

    3.) Related to #2, what purpose does this code serve...

    Code CSS:
    #boxComments .userPost{
    	margin: 0 0 0 160px;
    	padding: 10px 20px 20px 20px;
    	font-size: 0.9em;
    }
     
    /* ADDED: 2012-06-13 */
    #boxComments .userPost:after{
    	content: " ";
    	display: block;
    	clear: both;
    }

    When I comment that second block out, I don't see any change in FireBug.
    userPost creates a block to the side of the float that is 160px away from the edge which is enough room for the floated userinfo to fit in place. This gives you your two column effect.

    This code:

    Code:
    #boxComments .userPost:after{
    	content: " ";
    	display: block;
    	clear: both;
    }
    The above code puts a pseudo element at the end of userPost and sets it to clear:both. As userInfo is floated then this new element will have to always clear the bottom of userInfo and effectively drags the background down to match the height of UserInfo. No matter how tall userInfo gets the cleared element will have to keep track thus effectively giving you two equal columns.

    If userPost is taller than userInfo then it is no matter and the cleared element isn't doing anything as its already past the float. Its only when userPost is shorter than userInfo that the cleared element will jump down and clear the float thus dragging userPosts background with it.


    But if I remove this code...
    Code CSS:
    #boxComments .commentFooter{
    	clear: both;
    	width: 100%;
    	margin: 0 0px;
    	padding: 0;
    	background-color: #EFEDFF;
    }

    ...then the absence of the clear: both in .commentFooter makes the Footer background fill in behind .userInfo.
    Yes that's explained above.


    4.) I'm not sure why I chose to make .commentWrapper, .commentBody, and .userInfo Floats, but I did.

    What would make the most sense?
    When you use a float you should have a reason for doing so.

    If you don't want content to wrap or you don't want horizontal blocks then don't use a float. Only use a float when you need to have things wrap or blocks side by side otherwise use a normal static element and then you don;t need to worry about widths etc as static element fill the hroizontal space automatically and don;t shring to fit like floats.

    Some people float the parent in order to contain the floated children and that's ok as long as you don't end up floating everything as that makes layouts a bit fragile unless you are careful and cover every eventuality. There are other methods to contain floats without using a floated parent (overflow:hidden or the :after method already discussed.)

    Whew time for a break

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As always, Paul, AWESOME response!!


    Quote Originally Posted by Paul O'B View Post
    The background would have stretched under userInfo had you not given userPost a 160px left margin.
    Okay, I missed that subtle point!!


    This code:

    Code:
    #boxComments .userPost:after{
    	content: " ";
    	display: block;
    	clear: both;
    }
    The above code puts a pseudo element at the end of userPost and sets it to clear:both. As userInfo is floated then this new element will have to always clear the bottom of userInfo and effectively drags the background down to match the height of UserInfo. No matter how tall userInfo gets the cleared element will have to keep track thus effectively giving you two equal columns.

    If userPost is taller than userInfo then it is no matter and the cleared element isn't doing anything as its already past the float. Its only when userPost is shorter than userInfo that the cleared element will jump down and clear the float thus dragging userPosts background with it.
    Got it. Very helpful explanation!!


    When you use a float you should have a reason for doing so.

    If you don't want content to wrap or you don't want horizontal blocks then don't use a float. Only use a float when you need to have things wrap or blocks side by side otherwise use a normal static element and then you don;t need to worry about widths etc as static element fill the hroizontal space automatically and don;t shring to fit like floats.

    Some people float the parent in order to contain the floated children and that's ok as long as you don't end up floating everything as that makes layouts a bit fragile unless you are careful and cover every eventuality. There are other methods to contain floats without using a floated parent (overflow:hidden or the :after method already discussed.)
    Still a little rusty here...

    To me, I probably used Floats around all of my different DIVs, because when you use a Float, it seems like it slides things up against each other nicely.

    I commented out all of the DIV's in my code, and it broke my Comments section as seen below...

    Attachment 60075


    If you have time and care to show me if there is a way to be "FLOAT-less" which will work the same or better, then I'm all ears. Otherwise, what I had seemed to work okay for now. (And I can provide more code if we do that!)


    Whew time for a break
    Yes, I think you've earned a small breather!

    Thank you for all of your help and patience. You are a true CSS angel!! (And sorry if I used to know more of this stuff and forgot, but I don't have access to my SitePoint books which are back home, and my brain has been taken over with PHP these days, making me a little foggy on some of these HTML/CSS issues!)

    Thanks,


    Debbie

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    I commented out all of the DIV's in my code, and it broke my Comments section as seen below...

    Attachment 60075
    Hi Debbie,

    I'd need to see the css and html you were left with to see what has gone wrong with the above.

    If you have it working with floats then there's not much point in changing now.

    I would have done something (very roughly) like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    /*******************/
    /* COMMENTS Styles */
    /*******************/
    #boxComments {
    	max-width: 640px;
    	margin: 0 auto;
    	margin: 40px auto;
    	padding: 0 20px 60px 20px;
    	border: 1px solid #333;
    	background:#f2f2f2;
    }
    #boxComments:after, .commentWrapper:after, .commentBody:after, .userPost:after {					/* Contain floats without overflow. */
    	content: ".";
    	clear: both;
    	display: block;
    	height: 0;
    	font-size: 0;
    	visibility:hidden;
    }
    #boxComments h3, #boxAddComment h3 {
    	height: 20px;
    	margin: 0px -20px 10px -20px;
    	padding: 0.4em 10px 0.2em 10px;
    	text-align: left;
    	line-height: 1.4em;
    	font-size: 1em;
    	font-weight: bold;
    	color: #FFF;
    	background-color: #333;
    }
    /* Row of Buttons. */
    #boxComments ul {
    	margin: 0 0 0 20px;
    	padding: 0;
    	list-style:none;
    }
    #boxComments ul li {
    	margin: 5px 5px 0 0;
    	padding: 0;
    }
    .commentWrapper {
    	width: 100%;
    	min-width: 498px;
    	margin: 10px 0;
    	clear:both;
    	background:#eee;
    }
    .commentBody {
    	width: 100%;
    	border-top: 1px solid #333;
    }
    .userInfo {
    	float: left;
    	width: 160px;
    	padding: 10px 0px 0 0;
    	font-size: 0.9em;
    	text-align: center;
    }
    .userInfo a {
    	padding: 0 0.7em 0 0;
    	color: #0071D8;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
    .userInfo dl {
    	margin: 0;
    	padding: 10px 0 0 0;
    }
    .userInfo dt {
    	display:inline-block;
    	width: 4.4em;
    	text-align: right;
    	vertical-align:top;
    	margin:0 0 5px;
    	padding:0 .1em 0 0;
    }
    .userInfo dd {
    	margin: 0 5px 0 .1em;
    	text-align: left;
    	display:inline-block;
    	width:5.5em;
    	vertical-align:top;
    }
    .userPost {
    	margin: 0 0 0 160px;
    	padding: 10px 20px 20px 20px;
    	font-size: 0.9em;
    	zoom:1.0;
    	background:#ccc;
    }
    .commentDate {
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
    .commentNo {
    	float: right;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
    .commentFooter {
    	clear:both;
    	margin: 0 0px;
    	padding: 3px 0px 2px 15px;
    	background-color: #FAFAFA;
    	zoom:1.0;
    }
    .userPost h4 {
    	margin:0;
    	font-weight:normal;
    	font-size:100%
    }
    /* ie6/7 styles */
    #boxComments, .userPost, .userPost p, .userPost h4 { zoom:1.0 }
    .after {
    	content:" ";
    	display:block;
    	clear:both;
    }
    .userPost { zoom:expression( runtimeStyle.zoom=0, insertAdjacentHTML('beforeEnd', '<span class="after"></span>') );
    }
    .userPost span { zoom:1.0 }
    * html .userInfo dt { display:inline }/* ie6 inline-block fix */
    *+html .userInfo dt { display:inline }/* ie7 inline-block fix */
    * html .userInfo dd { display:inline }/* ie6 inline-block fix */
    *+html .userInfo dd { display:inline }/* ie7 inline-block fix */
    </style>
    </head>
    
    <body>
    <!-- ********************************--> 
    <!-- Attempt to Display Comments.		*--> 
    <!-- ********************************-->
    <div id="boxComments">
    		<h3>What Do You Think?</h3>
    		<ul>
    				<li> <a id="addCommentButton" class="button" href="http://local.debbie/articles/add_comment.php">Add a Comment</a> </li>
    		</ul>
    		<div class='commentWrapper'>
    				<div class='commentBody'>
    						<div class='userInfo'>
    								<p><a href='/account/profile.php?user=DoubleDee'> <strong>DoubleDee</strong> <img id='onlineStatus' src='/images/Light_Green_10.png' width='10' alt='Member Online' /><br />
    										<img class='noborder' src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='100'
    																alt='Member Photo'
    																title='Picture: Debbie sitting outside in the garden.' /> </a></p>
    								<dl>
    										<dt>Joined:</dt>
    										<dd>May 2012</dd>
    										<dt>Location:</dt>
    										<dd>Phoenix, AZ</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Heading:</dt>
    										<dd>A definition that can wrap to two or three lines</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd></dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    										<dt>Posts:</dt>
    										<dd>3</dd>
    								</dl>
    						</div>
    						<div class='userPost'>
    								<h4><span class='commentNo'>#4</span> <span class='commentDate'>Posted on: 2012-02-28 11:00pm</span> </h4>
    								<p>Update: Sorry to bother with this, I found the answer with a little minor digging. But, if anyone else was wondering the same, I think I'll explain. <br />
    										<br />
    										The &lt;textarea&gt; tag is different than the &lt;input&gt; tag in that where you would normally put data to display in an &lt;input&gt; field under the 'value' attribute, the &lt;textarea&gt; tag stores the same information not in a 'value' attribute, but in between the opening and closing tags: eg. &lt;textarea&gt; value info goes here &lt;/textarea&gt;. <br />
    										<br />
    										Hope that helps someone, sometime...</p>
    						</div>
    				</div>
    				<div class='commentFooter'> <img src='/images/Flag_Red_20x22.png' width='15' alt='Flag Comment' /> </div>
    		</div>
    </div>
    <!-- End of COMMENTS SECTION -->
    </body>
    </html>

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    I'd need to see the css and html you were left with to see what has gone wrong with the above.

    If you have it working with floats then there's not much point in changing now.
    Yeah, I think things are "good enough" for now.

    When Release #3 comes around, I will likely re-do all of my HTML and CSS as it has admittedly become a little unwieldy in places?! But for now, I think things look excellent, and they seem to be working well enough - on the backend - to go live with Release #2.

    Thanks for the help, and sorry I didn't get back to you sooner.


    Debbie


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
  •