Padding Issues with list in DIV

Hey, everyone. I have a page which uses JavaScript to toggle the display property of a DIV.

Within these DIVs I have lists, which I have used the list-style-image property to add an image in the place of the bullets. I have a heading above the invisible DIVs that toggles their display property.

My problem is as follows: When the display of these DIVs is set to none, all is well. The headings line up nicely and function properly. The problem occurs when I toggle the DIVs visibility and the lists are displayed.

The white space surrounding the lists is enormous; I have attempted to compensate for this using the margin property set to negative values, but I get inconsistent results between IE and NS (IE looks great, but NS sucks the top list element into the heading) I think it might have something to do with the fact I use line breaks between the headings.

Do DIV tags add their own line breaks? If so, what would be the best solution to add line breaks between the headings so that they don't add useless space to the displayed DIVs?

Any help is appreciated! :)
japangreg

By default, a div's margin and padding is zero. That is not the case for headers. Maybe setting an explicite margin and padding for the headers would help?

The headings are in SPAN tags (sorry I should have said that before) so I don't think that's the issue (when the DIVs are hidden all the headings fit perfectly)

Here's the code I'm using:

// to change the display of the DIVs
function toggle_folder(id){
var folderx = "folder" + id;
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
document.getElementById(folderx).src="closed.gif";
}else{
document.getElementById(id).style.display = "block";
document.getElementById(folderx).src="open.gif";
}
}

// to draw out the DIVs
function build_div(){
var month_array = new Array();
month_array = ['nov','oct', 'sep', 'aug', 'jul', 'jun', 'may', 'apr', 'mar', 'feb', 'jan'];
for (i=0; i<month_array.length; i++){
document.getElementById(month_array[i]).style.display = "none";
document.getElementById(month_array[i]).style.margin = "-10 0 -10 0";
}

// the DIVs
<br><span class="heading" onClick="toggle_folder('nov')">
<img id="foldernov" border=0 align="bottom" src="closed.gif">November</span>
<div id="nov"><ul>
<li><a href="november_file.html">Nov.</a></ul>
</div>
<br><span class="heading" onClick="toggle_folder('oct')">
<img id="folderoct" border=0 align="bottom" src="closed.gif">October</span>
<div id="oct"><ul>
<li><a href="october_file.html">Oct.</a></ul>
</div>

There are 11 of them now (folders for each month).

If anything looks strange, let me know.

Thanks!
japangreg

It's the list, I guess;

ul {
margin:0px;
padding:0px;
}

I was fighting a similar problem recently, I put negative margins in place to close the gap between the heading (which I can't control on the web page in question) and the content but what worked for IE was wrong for Netscape 6. I finally figured out that the <form></form> tags which were in the header of the page were adding extra whitespace to the page and added a style to give the form a 0px margin which solved the problem for both browsers.

You might want to see if you have the same sort of problem.

Hey, MCookie, Roy. Thanks for the replies.

I've tried setting the UL padding and margin to 0 and other numbers, but that doesn't seem to affect the white space present at the end of the list.

There is a BR tag after the closing DIV tag, which is what I think is causing the problem; the closing UL tag gets written when I display the DIV, which adds a space, then the BR adds an additional space.

~~~~~~~~~~~~~~~~~~~~

Sorry, just tested something while I was writing this reply and it worked. I had tried to set all margins and padding around the UL to 0; I just set the bottom to 0 and it worked!

Thanks again guys! :thumbsup:
japangreg