ansaurus

Question

Why does my CSS (apparantly) force a scrollbar to appear regardless of content size?

Answer 1

+2 A:

Taking the height 100% off the body windows.css fixes the problem on Firefox, that may give you a place to start looking.

David Waters 2009-04-20 12:26:26

This is true, but that's the weird thing: the height 100% is there the entire time, even on other pages, and only this one page seems to put stuff down below the bottom mark. I'm trying to figure out if margins are the cause? I'm almost ruling out a bug in rendering since all browsers seem to behave the same with it...

Nicholas Flynt 2009-04-20 18:49:04

Answer 2

+1 A:

Rather than try to make sense of the stylesheet jumble and html, I much prefer using Firefox with the Firebug plugin installed. Firebug allows you to Inspect page elements and it shows you which styles were applied to that element. You can also dynamically change styles to see how it affects the layout.

kbosak 2009-04-20 12:30:32

Firebug doesn't work in FF3 unfortunately, the "Web developer toolbar" offers much much better inspection tools than firebug anyway.

Sam152 2009-04-20 12:37:34

Firebug *does* work with FF3. I use Firebug AND the WebDev toolbar together - they both have different benefits.

Peter Boughton 2009-04-20 12:48:23

Chrome's element inspection facilities kicks the **** out of firebug. Not to start a flamewar or anything.

Will 2009-04-20 13:25:50

Answer 3

A:

Your code is a classic example of 'divitis', and is far more complicated than it needs to be: with everything a div and using too many classes - this makes it harder to debug (even with Firebug/WDT) when problems like this arise.

Sometimes, just simplifying a page is enough to make odd quirky behaviour go away, so this is always the first thing I recommend. Here is a (very quick) example of some better code.
It may not be a perfect fit for what you want, but is a better base to start from than using divs for everything.

<!DOCTYPE html>
<html>
<head>
    <title>Objectives</title>

    <style type="text/css">
     * {margin:0;border-width:0;padding:0;}

     html
     {
      background: black;
      color:#DEDEDE;
      font: 14px Trebuchet MS bold;
     }

     .tier
     {
      width: 90%;
      margin: 20px auto 25px;
      padding: 0.5em;

      background: #404040;
      border-radius: 9px;
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
     }

     .tier .picker
     {
      background: none;
      float: left; clear: left;
     }

     .tier h2
     {
      font-size: 2em;
      padding-left: 54px;
      margin: 0.1em 0;
     }

     .tier ul
     {
      list-style: none;
     }

     .tier ul li
     {
      margin-bottom: 5px;
     }

     .tier ul li .checkbox
     {
      width: 32px;
      height: 32px;
      margin: 0 8px;

      float: left; clear: left;
     }

     .tier ul li p
     {
      float: none; clear: right;
      margin-left: 48px;
     }

     .tier ul li p.reward
     {
      font-size: 0.7em;

      width: 200px;
      border-top: solid 2px black;
      margin-top: 4px;
     }

     .tier ul li p.reward .title
     {
      margin-left: 2em;
     }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
     $j = jQuery.noConflict();

     $j(document).ready(init);

     function init()
     {
      $j('.picker').toggle
      (
       function()
       {
        $j(this).siblings('ul').hide();
        $j(this).children('img').attr('src','images/show_me_hidden.png').attr('alt','>');
       }
      ,
       function()
       {
        $j(this).siblings('ul').show();
        $j(this).children('img').attr('src','images/show_me_shown.png').attr('alt','v');
       }
      );
     }

    </script>
</head>
<body>
    <h1>Objectives</h1>


    <div class="tier">

     <button type="button" class="picker">
      <img src="images/show_me_shown.png" alt="v" />
     </button>

     <h2>Tier 1</h2>
     <ul>
      <li>
       <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
       <p class="objective">Choose a Nova and devote your clan to that Nova.</p>
       <p class="reward">+5 Treasure</p>
      </li>
      <li>
       <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
       <p class="objective">Win an attack with a mage that has an item equipped.</p>
       <p class="reward">+10 Treasure</p>
      </li>
      <li>
       <img class="checkbox" src="images/checkbox.png" alt=" " title="Uncompleted" />
       <p class="objective">Steal at least 2 treasure from another player in a single attack.</p>
       <p class="reward">+10 Treasure</p>
      </li>
     </ul>
    </div>

    <div class="tier">

     <button type="button" class="picker">
      <img src="images/show_me_shown.png" alt="v" />
     </button>

     <h2>Tier 2</h2>
     <ul>
      <li>
       <img class="checkbox" src="images/checkbox_checked.png" alt="*" title="Completed" />
       <p class="objective">Be in first place after 3 days, or attack someone who has joined the Light Team.</p>
       <p class="reward">+10 Treasure <span class="title">Title Awarded: Recruit</span></p>
      </li>
     </ul>
    </div>

</body>
</html>

Peter Boughton 2009-04-20 13:24:05

Ooh... I hadn't thought about using an ul, but I suppose it does make a lot more sense there. I'll see what I can do that way.

Nicholas Flynt 2009-04-20 15:36:21

Indeed, it's easy to miss when lists can be useful. Although once you start using lists more, it's also easy to overuse/misuse them. As with most things, it's a case of getting the right balance. :)

Peter Boughton 2009-04-20 15:46:48

Answer 4

A:

I think I've figured it out, although it still doesn't make any sense. The .tier class, which encompases individual groups of tiers (and is the only direct descendant of body) has a margin-top of 20px. Removing this also removes the ghost space at the bottom of the page, making the scrollbar die. However, it also pushes my tiers past the top of the page, so I compensated for this using a spacer. I don't like it, but it was the only way I could get it to work and look like I wanted it to.

I can't explain why margin-top was producing the extra space on the bottom of the container area, body in this case. Perhaps it's a rendering bug? Strange that it would be a bug in all implementations. If anyone could shed some insight on why this particular fix works, it would be most helpful.

Nicholas Flynt 2009-04-21 16:19:21

ansaurus

tags:

views:

answers:

Why does my CSS (apparantly) force a scrollbar to appear regardless of content size?

related questions