Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    // 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
    Last edited by japangreg; 11-04-2002 at 05:21 PM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's the list, I guess;

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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    japangreg


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •