Help with spaces after DIV

Virtu-Al

04-01-2009, 02:30 PM

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

<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>

abduraooft

04-01-2009, 02:35 PM

Try adding *{margin:0;padding:0;} ito your CSS.
btw, add a DOCTYPE to your document (http://www.alistapart.com/articles/doctype), validate and fix all errors (http://validator.w3.org/#validate_by_input) in your markup.

Virtu-Al

04-01-2009, 02:59 PM

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 :)

<!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>

abduraooft

04-01-2009, 04:07 PM

is there any way to get it to do it just after the DIVs ?
May be
div{
margin:0;padding:0;
}
Also I have updated my code as you suggested, Your current DOCTYPE is an incomplete one.

Virtu-Al

04-01-2009, 05:29 PM

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 ?

abduraooft

04-02-2009, 08:02 AM

Post your current(corrected& valid) code.