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

Announcement

Collapse
No announcement yet.

Help with spaces after DIV

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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>
    Tags: None
  • #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

            Previous template Next
            Working...
            X