Line Spacing

Discussion in 'HTML & Website Design' started by Inersha, Jun 18, 2008.

  1. #1
    I have just had a new site coded, and the line spacing when I hit return (enter) seems to be working differently than normal.

    Normally, when you hit return you get a gap that is equal the size of the gap between this paragraph and the last. However, instead I am just getting a space as if I have used a
    <br/>
    Code (markup):
    tag.

    Obviously to combat this I can just hit return again, but then this will leave me with a number of
    <p>&nbsp;</p>
    Code (markup):
    in the code.

    Can anyone suggest what the problem might be?

    Any help would be much appreciated.

    Here is an example page and the css used on the site:

    http://www.rouletteplanet.com/online-roulette-tips.php

    /*latest update 2008.06.11*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{ margin:0;padding:0;}
    table{ border-collapse:collapse;border-spacing:0;}
    fieldset,img{ border:0;}
    ol,ul,li{ list-style:none; list-style-position:outside;}
    a img{ border:0;}
    .clear{ clear:both;}
    
    a:link, a:visited{ color:#f02600; text-decoration:none;}
    a:hover{ color:#f02600; text-decoration:underline;}
    
    
    body{ font-size:62.5%; font-family:Arial, Helvetica, sans-serif;}
    
    #wrapper{ width:789px; margin:0 auto;}
    
    /*header*/
    #header{ width:789px; margin-top:8px;}
      .logo{ width:789px; overflow:hidden; height:105px; background:url(../images/head_bg.jpg) bottom right no-repeat;}
      .logo .top{ float:left; width:210px; height:70px; color:#000; position:relative; display:inline; margin:10px 0 0 5px;
      			overflow:hidden; font-size:1.6em; text-align:center;}
      .logo .top span{ position:absolute; left:0; top:0; width:210px; height:70px; overflow:hidden;
      				 background:url(../images/logo.gif) no-repeat;}  
      .logo .top_link{ float:right; width:550px; display:inline; margin:0px 10px 0 0;}
      .logo .top_link a:link,
      .logo .top_link a:visited{ float:right; color:#5d6060; font-size:1.2em; font-weight:bold;
      							 padding:3px 10px 2px 20px; text-decoration:none;}
      .logo .top_link a#link_about{ background:url(../images/ico_about.gif) left center no-repeat;}
      .logo .top_link a#link_contact{ background:url(../images/ico_contact.gif) left center no-repeat; padding:3px 6px 2px 20px;}
      .logo .top_link a#link_advertise{ background:url(../images/ico_advertise.gif) 2px center no-repeat;}
      .logo .top_link a:hover{ color:#767979;}
      
      .nav{ width:789px; background:#20b4e2 url(../images/nav_bottom.gif) bottom left no-repeat;}
      .nav ul{ width:769px; background:url(../images/nav_top.gif) top left no-repeat; overflow:hidden; padding:0 10px;}
      .nav ul li{ float:left; line-height:240%; display:inline; margin-left:3px; font-size:1.4em;}
      .nav ul li a:link,
      .nav ul li a:visited{ color:#fff; text-decoration:none; padding:0 24px;}
      .nav ul li.on a,
      .nav ul li a:hover{ color:#000; text-decoration:none;}
    
    /*content_wrapper*/
    #content_wrapper{ width:789px; overflow:hidden; padding-bottom:20px;}
    
     .main_content{ float:right; width:606px; display:inline;}
     	.main_box{ background:url(../images/content_middle.gif) repeat-y; margin-top:10px;}
    	.main_box_inside{ background:url(../images/content_bottom.gif) bottom no-repeat}
    	.main_box h1{ background:#d2d2d2 url(../images/content_title_bottom.gif) bottom left no-repeat; font-size:1.6em; color:#555;}
    	.main_box h1 strong{ display:block; line-height:240%; text-indent:16px; font-weight:normal;
    						 background:url(../images/content_title_top.gif) top left no-repeat;}
    	.main_box h1 strong span{ color:#ff0000;}
    	.main_box h2{ background:#d2d2d2 url(../images/content_title_bottom.gif) bottom left no-repeat; font-size:1.6em; color:#555;}
    	.main_box h2 strong{ display:block; line-height:240%; text-indent:16px; font-weight:normal;
    						 background:url(../images/content_title_top.gif) top left no-repeat;}
    	.main_box h2 strong span{ color:#ff0000;}
    	.main_box .box_content{ width:584px; margin:0 1px; padding:15px 10px 20px 10px; overflow:hidden;
    						    background:url(../images/content_gradient.gif) top repeat-x;font-size:1.3em; line-height:135%;}
    	.main_box .box_content .txt_area{ float:left; width:100%; }
    	.main_box .box_content .txt_area em{ font-weight:bold;}
    	.main_box .box_content .img_area{ width:208px; margin-top:20px; float:left;}
    	.main_box .box_content a.click_more:link,
    	.main_box .box_content a.click_more:visited{ float:left; color:#f02600; font-size:1.1em;
    												 font-weight:bold; margin-top:10px; display:inline;}
    												 
    	.main_box .box_content_top10{ width:604px; margin:0 1px; padding-bottom:1px; position:relative;
    								  background:url(../images/content_gradient.gif) top repeat-x;}
    	.main_box .box_content_top10 .top10_corner{ position:absolute; width:7px; height:7px;
    												background:url(../images/top10_corner.gif); bottom:0; right:0;}
    	.main_box .box_content_top10 table{ width:100%; font-size:1.35em; font-weight:normal; padding-bottom:6px;
    										color:#1d1d1d; text-align:center; line-height:280%;
    										background:url(../images/top10_bg.gif) 37px repeat-y;}
    	.box_content_top10 table b{color:#fc421e; font-size:1.3em; font-weight:bold;}
    	.box_content_top10 table strong{color:#fc421e;}
    	.box_content_top10 table .rate{ float:left; width:120px; margin-top:10px; height:15px; background:#e7e7e7; overflow:hidden;}
    	.box_content_top10 table .rate span{ float:left; display:block; width:0; height:15px; line-height:15px;
    										 background:url(../images/rate_right.gif) right no-repeat;}
    	.box_content_top10 table .rate span em{ display:block; height:15px; line-height:15px;
    											background:url(../images/rate_left.gif) left no-repeat;}
    	.box_content_top10 table .rate_num{ float:left; width:28px;}
    	.box_content_top10 table .btn_review{ display:block; width:104px; height:27px; margin:0 auto;
    											  text-indent:-9999px; background:url(../images/btn_review.gif) no-repeat;}
    	.box_content_top10 table .btn_play{ display:block; width:104px; height:27px; margin:0 auto;
    											  text-indent:-9999px; background:url(../images/btn_play.gif) no-repeat;}
    	
    	.two_box_holder{ width:100%; overflow:hidden;}
    	  
    	.short_main_box{ float:left; width:298px; background:url(../images/content_short_middle.gif) repeat-y; margin-top:10px;}
    	.short_main_box .main_box_inside{ background:url(../images/content_short_bottom.gif) bottom no-repeat}
    	.short_main_box h2{ background:#d2d2d2 url(../images/content_title_short_bottom.gif) bottom left no-repeat;
    						font-size:1.6em; color:#555;}
    	.short_main_box h2 strong{ display:block; line-height:240%; text-indent:16px;
    						 background:url(../images/content_title_short_top.gif) top left no-repeat;}
    	.short_main_box .box_content{ width:276px; margin:0 1px; padding:15px 10px 20px 10px; overflow:hidden;
    						    background:url(../images/content_gradient.gif) top repeat-x;}
    	.article_box{ float:right;}
    	
    	.blue_box{ clear:both; margin-top:11px; background:url(../images/content_blue_middle.gif) repeat-y;}
    	.blue_box .main_box_inside{ background:url(../images/content_blue_bottom.gif) bottom no-repeat}
    	.blue_box h2{ background:#20b4e2 url(../images/content_title_blue_bottom.gif) bottom left no-repeat;
    						font-size:1.6em; color:#000;}
    	.blue_box h2 strong{ display:block; line-height:240%; text-indent:16px;
    						 background:url(../images/content_title_blue_top.gif) top left no-repeat;}
    	.blue_box h2 strong b{ font-weight:bold;}
    	.blue_box .box_content .txt_area{ width:420px;}
    	.blue_box .box_content .img_area{ width:125px;}
    	.blue_box .box_content {padding-bottom:10px;}
    					 
     .sidebar{ float:left; display:inline; width:174px;}
    
     	.sidebar_box{ background:url(../images/sidebar_middle.gif) repeat-y; margin-top:10px;}
    	.sidebar_box h2{ background:#20b4e2 url(../images/sidebar_title_bottom.gif) bottom left no-repeat;
    					 font-size:1.5em;}
    	.sidebar_box h2 strong{ display:block; line-height:240%; text-indent:16px; font-weight:normal;
    							background:url(../images/sidebar_title_top.gif) top left no-repeat;}
    
    	.sidebar_box h2 strong span{ font-weight:bold;}
    	.sidebar_box ul{ background:url(../images/sidebar_bottom.gif) bottom left no-repeat; padding-bottom:6px;}
    	.sidebar_box ul li{ line-height:240%;}
    	.sidebar_box ul li.alt{ background:#fff url(../images/sidebar_li_bg.gif) repeat-y;
    							border:1px #b2b2b2 dashed; border-left:0; border-right:0;}
    	.sidebar_box ul li a:link{ color:#535353; font-weight:bold; font-size:1.2em; text-decoration:none; padding-left:16px;}
    	.sidebar_box ul li a:visited{ color:#292828; font-weight:bold; font-size:1.2em; text-decoration:none; padding-left:16px;}
    	.sidebar_box ul li a:hover{ color:#828282; text-decoration:none;}
    
     	.sidebar_orange_box{ background:url(../images/sidebar_middle.gif) repeat-y; margin-top:10px;}
    	.sidebar_orange_box h2{ background:#20b4e2 url(../images/sidebar_title_bottom_orange.gif) bottom left no-repeat;
    					 font-size:1.5em;}
    	.sidebar_orange_box h2 strong{ display:block; line-height:240%; text-indent:16px; font-weight:normal;
    							background:url(../images/sidebar_title_top_orange.gif) top left no-repeat;}
    
    	.sidebar_orange_box h2 strong span{ font-weight:bold;}
    	.sidebar_orange_box ul{ background:url(../images/sidebar_bottom.gif) bottom left no-repeat; padding-bottom:6px;}
    	.sidebar_orange_box ul li{ line-height:240%;}
    	.sidebar_orange_box ul li.alt{ background:#fff url(../images/sidebar_li_bg.gif) repeat-y;
    							border:1px #b2b2b2 dashed; border-left:0; border-right:0;}
    	.sidebar_orange_box ul li a:link{ color:#535353; font-weight:bold; font-size:1.2em; text-decoration:none; padding-left:16px;}
    	.sidebar_orange_box ul li a:visited{ color:#292828; font-weight:bold; font-size:1.2em; text-decoration:none; padding-left:16px;}
    	.sidebar_orange_box ul li a:hover{ color:#828282; text-decoration:none;}
    	
    	.sidebar .ads_border{ display:block; border:1px #9ad4e6 solid; margin:5px 0;}
    	
    	.newsletter_txt{ padding:5px 5px 5px 5px;}
    
    /*footer*/
    #footer{ width:789px; overflow:hidden; border:1px #15a4d0 solid; border-bottom:7px #28b6e2 solid; font-size:1.1em;
    		 line-height:240%; background:#72cfef url(../images/footer_bg.gif) top repeat-x;}
    #footer p{ padding-left:8px; color:#007093;}
    #footer p a:link,
    #footer p a:visited{ font-weight:bold; color:#007093; padding:0 3px; text-decoration:none;}
    #footer p a:hover{ color:#0c89b0; text-decoration:underline;}
    #footer .copyright{ float:right; display:inline; margin-right:4px;}
    
    
    Code (markup):

     
    Inersha, Jun 18, 2008 IP
  2. webmindz24

    webmindz24 Peon

    Messages:
    311
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try using (Shift+Enter) instead of hitting Enter.. or in code if you can remove <p>&nbsp;</p> after every </p> and before evrey <p> as showing in your source code: <p><strong>Set yourself limits</strong></p>
    <p>&nbsp;</p>
    <p>
     
    webmindz24, Jun 18, 2008 IP
  3. Inersha

    Inersha Active Member

    Messages:
    182
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Thanks for your input, but it's not quite the point I was putting across.

    I actually want there to be a line space when I hit Enter, but whenever I hit Enter it is only moving to the next line, and not putting any space in between paragraphs.

    If I were to take out the <p>&nbsp;</p> then all the content would be pushed up together, which shouldn't be the case. I just want to use the <p> tags and have proper line spacing, but for some reason it is not working like that at the moment and the <p> tags seem to be acting like <br/> tags.
     
    Inersha, Jun 18, 2008 IP
  4. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #4
    But <p>&nbsp;</p> will act like <br/>, or am I missing something here:confused:

    If want space between paragraphs then use CSS.

    For the #body p or wherever put margin-top: 20px and then you will have a space without either <p>&nbsp;</p> or <br/>
     
    Divisive Cottonwood, Jun 18, 2008 IP
  5. Inersha

    Inersha Active Member

    Messages:
    182
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Okay thankyou, just figured out the solution too.

    Thanks for your help.
     
    Inersha, Jun 18, 2008 IP