SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Extra Padding caused by DOC Type declaration

    I am trying to include the

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd">

    declaration in a new project I am working on. However, when I do this, it adds about 10 pixels of white space on the right side of the page. I have a div set to run 100% across the page, and it gets stopped about 10px short. When I take the DOCTYPE out, problem goes away. Maddening. Would like to see if anyone else has encountered this. I've tried to eliminate as many possible causes and I keep coming back to this.

    thanks

  2. #2
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    show your
    htlm,css,link to page
    what browser is this happening in?
    have you validated?
    hi!
    welcome to sitepoint

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is your body margin and padding set to 0, as well as the margin for your 100% div?
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to give a link to the page for us to see exactly what's up.

    Although I've got a pretty good idea of what's going on

    -Sam
    Sam Hastings

  5. #5
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It happens in both Netscape and IE, sadly the pages are in development behind our firewall and I am unable to display them to the public. But, here are some snippets of the code I'm using...

    I ususally use this, but now that we are developing in full CSS mode it might be obsolete...

    <BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

    I've also tried doing the body in css with this:

    body
    {position: absolute;
    width:100%;
    top: 0px;
    height: 100%;
    left: 0px;
    margin: 0px;}

    The main body tag was working until I added the XHTML Doc Type and then it goes buh-bye. Thanks for any ideas... Oh and yes it's validated and seems to be fine.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    height: 100%; is probably your issue.

  7. #7
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope, tried taking that out, didn't change. Here is the code for the page I am working on..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org.1999/xhtml">
    <head>
    <title></title>
    <LINK REL=stylesheet HREF="style.css" TYPE="text/css">
    </head>

    <body>

    <!--Header Cell-->
    <div class="topnav"><a class="bold" href="">Home</a> | <a class="bold" href="">Support</a> | <a class="bold" href="">Contact Us</a> | <a class="bold" href="">My Account</a> | <a class="bold" href="">Shopping Cart</a> | <a class="bold" href="">Logout</a></div>

    <div class="logo"><img src="gfx/header_logo.gif" alt="Logo" border="0"></div>
    <div class="whois"><!--#include file="element_searchwhois.asp"--></div>
    <div class="topnavbackground">
    <div class="tabs">
    <a href="" class="selected">afdadfdfa</a>
    <a href="" class="plain">adfadfsfsdf</a>
    <a href="" class="plain">adfasfddfa</a>
    </div>
    </div>
    <div class="submenu">
    <a class="white" href="">Register Domains</a> <a class="white" href="#">Transfer Domains</a> <a class="white" href="#">Domain Catalog</a> <a class="white" href="#">Renew Now</a> <a class="white" href="#">Billing</a>
    </div>
    <!--End Header Cell-->

    <!--Left Nav Cells-->
    <div class="leftnav">
    <div class="boxtitle">Box Title</div>
    <div class="boxcontent"><!--#include file="elements.asp"--></div>
    </div>
    <!--End Left Nav Cells-->

    <div class="content">

    <h2>Introduction</h2>



    <h3>afddfsfdsf</h3>


    </div>

    </body>
    </html>

    and the style section affecting the header...

    div.header
    {background-color: #ffffff;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 0px 0px 0px;}

    div.logo
    {background-color: #ffffff;
    position: absolute;
    left: 17px;
    top: 15px;
    padding: 0px 0px 0px 0px;
    z-index: +1;}

    div.whois
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 28px;
    text-align: right;
    padding: 0px 10px 0px 0px;}

    div.topnav
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    height: 15px;
    text-align: right;
    padding: 2px 10px 2px 0px;
    border-bottom: solid 1px;
    border-color: #ffffff;
    font-size: 90%;}

    div.topnavbackground
    {position: absolute;
    left: 0px;
    top: 54px;
    background-color: #EAE6D7;
    border-top: 1px solid #ccc;
    width: 100%;
    z-index: 2;}

    div.mainnav
    {width: 100%;
    height: 17px;
    z-index: 2;}

    div.tabs
    {padding: 7px 0px 2px 3px;
    white-space: nowrap;}

    div.tabs a.plain:link, div.tabs a.plain:visited
    {background-color: #BAD0E5;
    font-weight:bold;
    font-size: 13px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #999;
    text-decoration: none;
    padding: 2px 10px 4px 10px;}

    div.tabs a.selected
    {background-color: #0B3D92;
    font-weight:bold;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    text-decoration: none;
    color: #ffffff;
    padding: 3px 10px;}

    div.submenu
    {width: 100%;
    background-color: #0B3D92;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
    text-align: left;
    border-bottom: 1px solid;
    border-color: #000000;
    position: absolute;
    left: 0px;
    top: 78px;
    z-index: +2;}

  8. #8
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add to your css:

    html, body {
    margin: 0;
    padding: 0;
    border: none;
    top: 0;
    left: 0;
    }

    That should fix it.

  9. #9
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, sorry, it did not change anything.

    I've also since determined it is not just the XMHTML doc type, it is the DOC type statement in general which, when added, adds the space. Don't know if that helps or not.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see most of your divs have padding set to 0 but no margin. Try setting margin:0 for all divs, see if that changes things...

  11. #11
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, tried that too, no success. I've pared down the code to a minimum and put the stylesheet inline so people can see it all in one place..

    if look at this code, then subtract the DOC type, voila, it works proper. I've gone through div by div and it seems that the problem may also be lying in the <div class="topnavbackground"> div, although I can see nothing that would be causing it to stop short of going 100%. Agh! Thanks for all your responses!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title></title>
    <style TYPE="text/css"><!--/* Global Properties */
    p,li,a,div,h2,h3,td,th,textarea,label {font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#000;}

    html, body {
    margin: 0;
    padding: 0;
    border: none;
    top: 0;
    left: 0;}

    A:Link {color: #003399; text-decoration: none;}
    A:Visited {color: #003399;text-decoration: none;}
    A:Hover {color: #3366CC; text-decoration: underline;}

    /* End Global Properties */

    /* Header Div Library */
    A.white:Link
    {color: #ffffff;
    text-decoration: none;
    padding: 3px 10px 2px 10px;
    border-right: 1px solid #003399;
    border-bottom: 1px solid #003399;}

    A.white:Visited
    {color: #ffffff;
    text-decoration: none;
    padding: 3px 10px 2px 10px;
    border-right: 1px solid #003399;
    border-bottom: 1px solid #003399;}

    A.white:Hover
    {color: #003399;
    text-decoration: none;
    background-color: #ffffff;
    padding: 0px 10px 0px 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;}

    div.logo
    {background-color: #ffffff;
    position: absolute;
    left: 17px;
    top: 15px;
    margin: 0;
    padding: 0px 0px 0px 0px;
    z-index: +1;}

    div.whois
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 28px;
    margin: 0;
    text-align: right;
    padding: 0px 10px 0px 0px;}

    div.topnav
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    height: 15px;
    text-align: right;
    padding: 2px 10px 2px 0px;
    border-bottom: solid 1px;
    border-color: #ffffff;
    font-size: 90%;
    margin: 0;}

    div.topnavbackground
    {position: absolute;
    left: 0px;
    top: 54px;
    background-color: #EAE6D7;
    border-top: 1px solid #ccc;
    width: 100%;
    z-index: 2;
    margin: 0;}

    div.tabs
    {padding: 7px 0px 2px 3px;
    white-space: nowrap;
    margin: 0;}

    div.tabs a.plain:link, div.tabs a.plain:visited
    {background-color: #BAD0E5;
    font-weight:bold;
    font-size: 13px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #999;
    text-decoration: none;
    padding: 2px 10px 4px 10px;
    margin: 0;}

    div.tabs a.selected
    {background-color: #0B3D92;
    font-weight:bold;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    text-decoration: none;
    color: #ffffff;
    padding: 3px 10px;
    margin: 0;}

    --></style>
    </head>

    <body>

    <!--Header Cell-->
    <div class="topnav"><a class="bold" href="">Home</a> | <a class="bold" href="">Support</a> | <a class="bold" href="">Contact Us</a> | <a class="bold" href="">My Account</a> | <a class="bold" href="">Shopping Cart</a> | <a class="bold" href="">Logout</a></div>

    <div class="logo"><img src="gfx/header_logo.gif" alt="Logo" border="0"></div>
    <div class="whois"><form><select name="whois" class="input">
    <option value="1" SELECTED>Availability</option>
    <option value="2">Whois</option>
    </select> <input class="input" type="text" name="whois" value="domain.tld"> <input type="submit" class="buttonsmall" name="submit" value="Go"></form></div>
    <div class="topnavbackground">
    <div class="tabs">
    <a href="" class="selected">Button 1</a>
    <a href="" class="plain">Button 2</a>
    <a href="" class="plain">Button 3</a>
    </div>
    </div>
    <!--End Header Cell-->

    </body>
    </html>

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Just so you know, when you have a proper DOCTYPE, browsers go into "Standards mode" and render your pages according to the W3C specs. So your code below, listed as:
    Code:
    div.whois
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 28px;
    margin: 0;
    text-align: right;
    padding: 0px 10px 0px 0px;}
    Will actually be 100% plus 10 pixels wide because of the extra right padding you've assigned. According to the W3C CSS specs, any padding, borders, or margins applied to an element will ADD to its overall width rather than include itself in the width value. For more information, check out this site: http://www.tantek.com/CSS/Examples/boxmodelhack.html.

    For a fix to your problem, you can just remove the width setting completely in my code sample above, as <div>s default to 100% width anyway.

  13. #13
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, I think that got part of it, I've determined that in the topnav div, if I set the right padding to 10px, it is pushing the following divs over 10px as well, even though they are set to 0 padding. As I understand it, margin adds space outside the div and padding should be adding space inside the div, so I'm not sold on the padding making it 110%...the padding should merely be keeping my text 10px from the edge, while I want the color bar to run 100%...

    see below, I'm wondering if this is actually some Inheritance issue? I've stripped out all un-needed code and just left with these two divs. If you take out the 10px right padding on the topnav div, everything goes to the edge. (like it should), however, by adding 10px right padding to the top nav div, i should be able to keep the text from hitting the edge...also, as to divs defaulting to 100%, I have requirements that the header flow as wide as the browser, so the only way I've been able to do that is force those divs 100%, I can't set it in a fixed position...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title></title>
    <style TYPE="text/css"><!--/* Global Properties */
    p,li,a,div,h2,h3,td,th,textarea,label {font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#000;}

    html, body {
    margin: 0;
    padding: 0;
    border: none;
    top: 0;
    left: 0;}

    A:Link {color: #003399; text-decoration: none;}
    A:Visited {color: #003399;text-decoration: none;}
    A:Hover {color: #3366CC; text-decoration: underline;}

    /* End Global Properties */

    /* Header Div Library */
    A.white:Link
    {color: #ffffff;
    text-decoration: none;
    padding: 3px 10px 2px 10px;
    border-right: 1px solid #003399;
    border-bottom: 1px solid #003399;}

    A.white:Visited
    {color: #ffffff;
    text-decoration: none;
    padding: 3px 10px 2px 10px;
    border-right: 1px solid #003399;
    border-bottom: 1px solid #003399;}

    A.white:Hover
    {color: #003399;
    text-decoration: none;
    background-color: #ffffff;
    padding: 0px 10px 0px 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;}


    div.topnav
    {width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    height: 15px;
    text-align: right;
    padding: 2px 10px 2px 0px;
    border-bottom: solid 1px;
    border-color: #ffffff;
    font-size: 90%;
    margin-right: 0px;}

    div.topnavbackground
    {position: absolute;
    left: 0px;
    top: 54px;
    background-color: #EAE6D7;
    border-top: 1px solid #ccc;
    width: 100%;
    z-index: 2;
    margin: 0;
    padding: 0px;}



    --></style>
    </head>

    <body>

    <!--Header Cell-->
    <div class="topnav"><a class="bold" href="">Home</a> | <a class="bold" href="">Support</a> | <a class="bold" href="">Contact Us</a> | <a class="bold" href="">My Account</a> | <a class="bold" href="">Shopping Cart</a> | <a class="bold" href="">Logout</a></div>

    <div class="topnavbackground">

    </div>
    <!--End Header Cell-->

    </body>
    </html>

  14. #14
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Eagle, ID
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you know what, after looking at it more, you are right (sorry no disrespect earlier), i ran a test and it is indeed pushing it out. As a result, I made the div 95% which brought it out from the edge like I need. Not sure if it's the correct fix, but it works for now! Thanks for your insight!

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ericjacky
    you know what, after looking at it more, you are right (sorry no disrespect earlier), i ran a test and it is indeed pushing it out. As a result, I made the div 95% which brought it out from the edge like I need. Not sure if it's the correct fix, but it works for now! Thanks for your insight!
    No problem

  16. #16
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ericjacky
    As I understand it, margin adds space outside the div and padding should be adding space inside the div, so I'm not sold on the padding making it 110%...the padding should merely be keeping my text 10px from the edge, while I want the color bar to run 100%...

    I know that you've resolved it now, but to explain this - the padding is added inside the border boundary which is placed at a point equal to the stated width + the stated padding of an element - with the stated width being reserved for content. In IE5's broken box-model what you describe above is what happens, but in standards compliant browsers, and IE6 when not in quirks mode, it's as advised by Vinnie


Bookmarks

Posting Permissions

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