Web Analytics Made Easy -
StatCounter Help with spaces after DIV - CodingForum

Announcement

Collapse
No announcement yet.

Help with spaces after DIV

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with spaces after DIV

    Hi, I have some code I have been working on and wondered if someone could help me get rid of the blank space after each DIV so they line up. Thanks

    Code:
    <html>
    <head>
    <title></title>
    
    <meta name="save" content="history" />
    
    <style type="text/css">
    DIV .expando {DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 10pt; RIGHT: 8px; COLOR: #ffffff; FONT-FAMILY: Tahoma; POSITION: absolute; TEXT-DECORATION: underline}
    TABLE {TABLE-LAYOUT: fixed; FONT-SIZE: 100%; WIDTH: 92%}
    .dspcont { display:none; BORDER-RIGHT: #B1BABF 1px solid; BORDER-TOP: #B1BABF 1px solid; PADDING-LEFT: 16px; FONT-SIZE: 8pt;MARGIN-BOTTOM: -1px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; WIDTH: 95%; COLOR: #000000; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; BACKGROUND-COLOR: #f9f9f9}
    td {VERTICAL-ALIGN: TOP; FONT-FAMILY: Tahoma}
    th {VERTICAL-ALIGN: TOP; COLOR: #0072BC; TEXT-ALIGN: left}
    .save{behavior:url(#default#savehistory);}
    a.dsphead0 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #FFFFFF; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 92%; BACKGROUND-COLOR: #0072BC}
    a.dsphead1 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 16px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 92%; BACKGROUND-COLOR: #8DC63F}
    a.dsphead2 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 16px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 92%; BACKGROUND-COLOR: #A5A5A5}
    a.dsphead1 span.dspchar{font-family:monospace;font-weight:normal;}
    .dspcont1{ display:none}
    </style>
    
    
    <script type="text/javascript">
    function dsp(loc){
       if(document.getElementById){
          var foc=loc.firstChild;
          foc=loc.firstChild.innerHTML?
             loc.firstChild:
             loc.firstChild.nextSibling;
          foc.innerHTML=foc.innerHTML=='hide'?'show':'hide';
          foc=loc.parentNode.nextSibling.style?
             loc.parentNode.nextSibling:
             loc.parentNode.nextSibling.nextSibling;
          foc.style.display=foc.style.display=='block'?'none':'block';}}  
    
    if(!document.getElementById)
       document.write('<style type="text/css">\n'+
          '.dspcont{display:block;}\n'+
          '</style>');
    </script>
    
    </head>
    <body>
    <p><b><font face="Arial" size="5">Test<hr size="8" color="#0072BC"></font></b>
    <font face="Arial" size="1"><b>Test Data</b></font><br>
    <font face="Arial" size="1">03/30/2009 18:42:13</font></p>
    
    <div class="save">
    	<h1><a class="dsphead0">Heading 0</a></h1>
    	<h2><a href="javascript:void(0)" class="dsphead1" onclick="dsp(this)">
    	<span class="expando">show</span>Heading 1</a></h2>
    	<div class="dspcont">
    		<TABLE>
    			<tr>
    			<th width='25%'><b>Test:</b></font></th>
    			<td width='75%'>Answer</td>
    			</tr>
    		</TABLE>
          	<h3><a href="javascript:void(0)" class="dsphead2" onclick="dsp(this)">
            <span class="expando">show</span>Heading 2</a></h3>
            <div class="dspcont">
    			<DIV class=tableDetail>     
    				<table>More Data </table> 		
    			</DIV>
    		</div>    
       </div>
    </div>
    
    </body>
    </html>

  • #2
    Try adding
    Code:
    *{margin:0;padding:0;}
    ito your CSS.
    btw, add a DOCTYPE to your document, validate and fix all errors in your markup.
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Thats great thanks but that removes the space from everything, is there any way to get it to do it just after the DIVs ?

      Also I have updated my code as you suggested, sorry im fairly new to this, that site is great, picked up a few errors

      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <head><title>Datacenter Report</title>
      <META http-equiv=Content-Type content='text/html; charset=windows-1252'>
      
      <meta name="save" content="history">
      
      <style type="text/css">
      DIV .expando {DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 10pt; RIGHT: 8px; COLOR: #ffffff; FONT-FAMILY: Tahoma; POSITION: absolute; TEXT-DECORATION: underline}
      TABLE {TABLE-LAYOUT: fixed; FONT-SIZE: 100%; WIDTH: 100%}
      .dspcont { display:none; BORDER-RIGHT: #B1BABF 1px solid; BORDER-TOP: #B1BABF 1px solid; PADDING-LEFT: 16px; FONT-SIZE: 8pt;MARGIN-BOTTOM: -1px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; WIDTH: 100%; COLOR: #000000; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; BACKGROUND-COLOR: #f9f9f9}
      td {VERTICAL-ALIGN: TOP; FONT-FAMILY: Tahoma}
      th {VERTICAL-ALIGN: TOP; COLOR: #0072BC; TEXT-ALIGN: left}
      .save{behavior:url(#default#savehistory);}
      a.dsphead0 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #FFFFFF; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 100%; BACKGROUND-COLOR: #0072BC}
      a.dsphead1 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 16px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 100%; BACKGROUND-COLOR: #8DC63F}
      a.dsphead2 {BORDER-RIGHT: #B1BABF 1px solid; PADDING-RIGHT: 5em; BORDER-TOP: #B1BABF 1px solid; DISPLAY: block; PADDING-LEFT: 16px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN-BOTTOM: -1px; MARGIN-LEFT: 0px; BORDER-LEFT: #B1BABF 1px solid; CURSOR: hand; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 4px; BORDER-BOTTOM: #B1BABF 1px solid; FONT-FAMILY: Tahoma; POSITION: relative; HEIGHT: 2.25em; WIDTH: 100%; BACKGROUND-COLOR: #A5A5A5}
      a.dsphead1 span.dspchar{font-family:monospace;font-weight:normal;}
      .dspcont1{ display:none}
      *{margin:0}
      BODY {margin-left: 4pt} 
      BODY {margin-right: 4pt} 
      BODY {margin-top: 6pt} 
      </style>
      
      
      <script type="text/javascript">
      function dsp(loc){
         if(document.getElementById){
            var foc=loc.firstChild;
            foc=loc.firstChild.innerHTML?
               loc.firstChild:
               loc.firstChild.nextSibling;
            foc.innerHTML=foc.innerHTML=='hide'?'show':'hide';
            foc=loc.parentNode.nextSibling.style?
               loc.parentNode.nextSibling:
               loc.parentNode.nextSibling.nextSibling;
            foc.style.display=foc.style.display=='block'?'none':'block';}}  
      
      if(!document.getElementById)
         document.write('<style type="text/css">\n'+'.dspcont{display:block;}\n'+ '</style>');
      </script>
      
      </head>
      <body>
      <p><b><font face="Arial" size="5">Test</font></b>
      <font face="Arial" size="1"><b>Test Data</b></font><br>
      <font face="Arial" size="1">03/30/2009 18:42:13</font></p>
      
      <div class="save">
      	<h1><a class="dsphead0">Heading 0</a></h1>
      	<h2><a href="javascript:void(0)" class="dsphead1" onclick="dsp(this)">
      	<span class="expando">show</span>Heading 1</a></h2>
      	<div class="dspcont">
      		<TABLE>
      			<tr>
      			<th width='25%'><b>Test:</b></th>
      			<td width='75%'>Answer</td>
      			</tr>
      		</TABLE>
            	<h3><a href="javascript:void(0)" class="dsphead2" onclick="dsp(this)">
              <span class="expando">show</span>Heading 2</a></h3>
              <div class="dspcont">
      			<DIV class=tableDetail>     
      				<table><tr><td>More Data</td></tr></table> 		
      			</DIV>
      		</div>    
         </div>
      </div>
      
      </body>
      </html>

      Comment


      • #4
        is there any way to get it to do it just after the DIVs ?
        May be
        Code:
        div{
        margin:0;padding:0;
        }
        Also I have updated my code as you suggested,
        Your current DOCTYPE is an incomplete one.
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment


        • #5
          Thanks, one last question, my Divs are set to 100% width and in IE that is fine, they take up 100%, in Firefox or Google Chrome they go off the side of the screen a little, any ideas why and how I can fix this ?

          Comment


          • #6
            Post your current(corrected& valid) code.
            Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

            Comment

            Working...
            X