Blank Space at bottom of page
Last Post 02/04/2011 11:37 AM by Joseph Craig. 10 Replies.
Author Messages
Web Services
Nuke Master
Nuke Master
Posts:322


--
02/25/2010 9:18 AM
    I have a template for a dotnetnuke skin and I am getting extra blank space at the bottom of my page and I cannot seem to get rid of it. When I just run the html and css, it views fine, but when I upload to a skin I get an extra space at the bottom.

     If you want to see the problem you can go here http://temp.sentinelhealthcare.org/...aling.aspx and scroll to the bottom.

     I have tried various forms of height and padding tags and can't seem to fix it

    Does anyone have any thoughts?

    Here is my CSS body{ text-align: center; width: 100%; margin: 0; padding: 0; background-image: url(images/background_03.jpg); background-repeat: repeat-y; } #header{ background-image: url(images/background_01.jpg); height: 238px; width: 100%; vertical-align: top; } #headerContainer{ text-align: center; margin-left: auto; margin-right: auto; width: 886px; } #logo{ background-image: url(images/block_02.png); width: 201px; height: 124px; float: left; margin-top: 10px; } #headerBlock{ background-image: url(images/block_03.png); width: 495px; height: 89px; float: right; margin-top: 30px; } #menu{ background-image: url(images/block_01.png); width: 886px; height: 54px; margin-top: 30px; float: left; } #content{ background-image: url(images/background_02.jpg); width: 100%; background-repeat: no-repeat; text-align: center; } #providers{ background-image: url(images/block_04.png); float: left; width: 256px; height: 157px; margin-bottom: 15px; } #events{ background-image: url(images/block_06.png); float: left; width: 256px; height: 157px; margin-bottom: 15px; } #programs{ background-image: url(images/block_08.png); background-repeat: no-repeat; float: left; width: 256px; height: 425px; margin-bottom: 15px; } #footer{ background-image: url(images/background_04.jpg); height: 230px; width: 100%; text-align: center; } #footerContainer{ text-align: left; padding-left: 20px; width: 866px; margin-left: auto; margin-right: auto; } #footerContent{ float: left; margin-top: 50px; } #footerLogo{ float: right; margin-top: 110px; padding-right: 20px; } .contentText{ padding-left: 20px; margin-top: 5px; float: left; width: 590px; text-align: left; padding-right: 20px; vertical-align: text-top; } .contentBubble{ vertical-align: top; } .newsText{ text-align: left; margin-left: 105px; margin-top: 5px; } .textBubble{ margin-top: 45px; margin-left: 15px; }

     And here is my HTML
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/25/2010 8:01 PM
    Have you fixed this? I see a wheat field with a logo at the bottom. Please tell me what you'd like to see.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    02/26/2010 11:00 AM
    hello,

    If you need to post code, it is best to attach it as a zip file to your forum post.

    Another thing you may want to look at is when viewing your skin on a screen of 1680x1050 there is a large white space on the right hand side.
    You may be able to fix this by using a larger image for your background, or making sure the image can repeat, but you would need to test this.

    It will also be worth specifying a background colour as well as a background image, so if the background images become disabled a colour will be displayed instead.
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Web Services
    Nuke Master
    Nuke Master
    Posts:322


    --
    02/26/2010 2:38 PM
    So I fixed this in FF and Chrome by adding
    form{
    margin: 0;
    }

    to my css page. However, IE Still doesn't look right. Do you have any ideas why IE won't take the margin correctly? Thanks for the suggestion on the background color. I have a wide screen monitor and it doesn't do that on mine so I will add that.
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    03/02/2010 11:00 AM
    If you are trying to center the main design in the skin, have a look at the code in this skin:
    Andreas 01

    Especially look at the code for the body and wrap tags, they make use of:

    body {
    margin:0 auto;
    padding:0;
    font:76% Verdana,Tahoma,Arial,sans-serif;
    background:#f4f4f4 url(img/bg.gif) top center repeat-y;
    color:#404040;
    }

    #wrap {
    background:#ffffff;
    color:#404040;
    margin:0 auto;
    width:760px;
    }

    to center the skin correctly and it should work in all browsers
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Joels
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    02/03/2011 4:06 PM
    I have the same problem. I have upgraded 4.9.5 to 5.4.4 and thought everything was fine until I noticed the white bar at the bottom of all my pages(about 10-15 pixels high and all the way across. I added
    form{
    margin-bottom:0;
    padding-bottom:0;
    }
    body{
    margin-bottom:0;
    padding-bottom:0;
    }
    to my default.css and it fixed it for FireFox but not IE8. Does anyone know how to fix this for IE8?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/03/2011 4:09 PM
    Is there a URL for the site?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joels
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    02/03/2011 5:41 PM
    Thanks for replying!
    It was one of my local test sites but, I just updated the live site with the new css entry @ http://www.missionwise.org Oddly enough I have an older upgrade 5.2.x at http://www.chef.org which I haven't added the style for 0 margin and the team page actually goes to the bottom. I'm trying to determine what the difference is. I made the skins a while ago..
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/03/2011 5:52 PM
    Looking at www.chef.org, the white bar is present on the home page in IE, Firefox and Chrome.

    For the team page the white bar is present in Firefox and Chrome, but not in IE.

    Your site appears to be running in Quirks mode, not XHTML mode. 

    The first thing that I would do is convert your skins to XHTML mode.  This will make them more "predictable" and also have better cross-browser behavior.  Then, you can deal with cross-browser problems better.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joels
    Nuke Newbie
    Nuke Newbie
    Posts:3


    --
    02/04/2011 10:58 AM
    Thanks, Again.! For now, I added the background color to body in my default.css to hide the white at the bottom. It appears to me now to be a scroll bar issue that'll I'll have to look into later. The verticle scrollbar displays even when it's not needed.
    When I get to  it how/what's the best way to convert the skins to xhtml? (do I manually by adding the tag at the top of each skin or is there a converter or DNN checkbox to check or something like that?)
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/04/2011 11:37 AM
    It's best to add a doctype file.  See these:
    With DotNetNuke 5, you can specifiy a default doctype on the Host Settings page, but it's better to do this in the skin with the doctype file.




    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---