www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS mystery: vertical gap if padding-top is nonzero???

Hybrid View

  1. #1
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62

    Question CSS mystery: vertical gap if padding-top is nonzero???

    Hi, everyone,

    Once more I have spent an entire day banging my head against the wall trying to work with (or around) the more mysterious properties of CSS. I have now solved my problem (which was the appearance of a mysterious vertical gap) but I have no idea why. The code is as follows:

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
      <title>WTF?</title>
      <style media="screen" type="text/css">
        html {
          overflow-x: hidden;
          padding-right: 10px;
          overflow-y: scroll;
          margin-left: 0px;
          margin-top: 0px;
          margin-bottom: 0px;
          height: 100&#37;;
        }
        body {
          font-family: Arial, Helvetica, sans-serif;
          color: #000033;
          font-size: 10pt;
          background-color: #ffffdd;
          margin-top: 0px;
          margin-left: 0px;
          margin-right: 0px;
          margin-bottom: 50px;
          padding: 0px;
        }
        .layout, .topbar, .menu, .content {
          text-align: left;
          vertical-align: top;
          background-color: transparent;
        }
        .layout {
          width: 984px;
          margin-top: 15px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: auto;
          text-align: center;
          padding: 0px;
          background-color: transparent;
        }
        .topbar {
          width: 100%;
          height: 70px;
          border: 0px;
          margin: 0px;
          padding: 0px;
          background-color: #ccccff;
          font-size: 36pt;
          text-align: center;
        }
        .menuandcontent {
          background-color: #ff9999;
          padding-bottom: 5px;
        }
        .menu {
          width: 170px;
          float: left;
          text-align: center;
          padding-top: 10px;
        }
        .content {
          margin-left: 185px;
          background-color: #cccccc;
          text-align: justify;
          min-height: 365px;
          padding-left: 15px;
          padding-right: 25px;
          padding-top: 10px; 	/* Setting this to 0px creates a gap */
        }
      </style>
    </head>
    <body>
      <div class="layout">
        <div class="topbar">
          Topbar goes here.
        </div>
        <div class="menuandcontent">
          <div class="menu">
            <a href="#">Menu link 1</a><br />
            <a href="#">Menu link 2</a><br />
            <a href="#">Etc...</a><br />
          </div>
          <div class="content">
            <h1>WTF?</h1>
            <p>If the 'padding-top' property for this div is set to 0px, or
               if it is omitted, a vertical gap appears. Why??</p>
            <p>This is not a single-rowser quirk; it behaves similarly in IE
            (8.0.6001.18702), FireFox (3.6.8), Chrome (5.0.375.125) and 
            Safari (3.1.1/525.17).</p>
          </div>
        </div>
      </div>
    </body>
    </html>
    This is a working example, just paste it into a HTML file and point your browser at it.

    Note the line about 2/3 down, where it says:

    Code:
          padding-top: 10px; 	/* Setting this to 0px creates a gap */
    As the comment suggests, setting padding-top here to 0px or removing the line entirely creates a vertical gap ABOVE the <div> that this CSS property is associated with. It just has to be there, and set to a value greater than zero; a value of 1px will make the gap disappear. And I have no idea why. Nor is this a single-browser quirk; I have tested this with the most recent versions of Firefox, IE, Safari and Chrome, and they all display exactly the same behavior.

    What in the world wide web is going on here???

    // Frank

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    This is why you'll see:
    Code:
    * { margin:0; padding:0; }
    at the top of just about every stylesheet you'll see. It resets the default margins/padding on all elements to 0. (Also solves the problem)

    EDIT: I also finally found the culprit. There's a default margin (of 17px 0 17px 0) on the h1 element that, when you zero it out, also solves the problem. Keep in mind, however, that you should always put * { margin:0; padding:0; } as the very first rule in your stylesheet to level the playing field amongst browsers making it easier to code cross-browser CSS.
    Last edited by aj_nsc; 08-12-2010 at 08:46 AM.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Sep 2008
    Posts
    408
    Seconding aj_nsc, the browser reset is used pretty much by everyone. (I add a border:0 as well). There are also more encompassing versions as well.

    http://meyerweb.com/eric/thoughts/20.../reset-styles/
    http://developer.yahoo.com/yui/reset/
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

  4. #4
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62
    Thanks, guys! I've learned something. I had not really used that browser margin reset yet, but I will from now on. I've been struggling with mysterious gaps again today (while offline, out in the sticks where they use carrier pigeons for Internet access) with IE7, which seems to be a bit worse in that respect than all other browsers (duh!) so let's see if it solves that problem as well.

    Again thanks for the reply. It's greatly appreciated!

    // Frank

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles