Page producing scroll bars unnecessarily

[daviddoria]

On this page:
http://ewh.ieee.org/r1/schenectady/New/

it seems like the gray background object is larger than the screen - i.e. scroll bars appear even though the content is not long enough to warrant them. I have the following properties:

body
{
height: 100%;
}

html
{
height: 100%;
}

Shouldn't it be exactly the right size and therefore not need scrollbars?

Thanks,

David

[teedoff]

You have overflow: scroll on your html tag? Thats whats causing the scroll bar.

[daviddoria]

I don't have that - it is commented:

html
{
height: 100%;
/*overflow: scroll;*/
}

[teedoff]

body
{
height: 100%;
/*overflow: scroll;*/
}

html
{
height: 100%;
overflow: scroll;
}

.lightblue
{
  color:#169fcd;
}

p
{
  margin-top:0;
}

.title1
{
color: #0000BB;
font-size: 25pt; 
}
h2
{
font-size: 20pt; 
}

Thats what I see in your stylesheet.

[daviddoria]

http://ewh.ieee.org/r1/schenectady/New/style.css right? Do you have a recent version?

[Arkinder]

1. The height in your html rule is set to 101%.
2. Your body element is positioned relatively and has a top style of 10%.
3. Your div with a class of whitebox has a margin-top: 10px;
4. You have a paragraph containing your logo. Paragraphs create a new line both before and after the paragraph element.

Regards, Arkinder

[daviddoria]

The height in your html rule is set to 101%.

I've been told that this may be a good idea so that the scrollbar is always displayed no matter how long the content is. However, my question still remains that this page should actually have nothing to scroll (though it still does).

Your body element is positioned relatively and has a top style of 10%.

This is because I want some gray (the html background-color) to show above the blue (the body background-color). Is this not how I would achieve this?

Your div with a class of whitebox has a margin-top: 10px;

This is because I want some blue (the body background-color) to show above the white (the whitebox background-color). Is this not how I would achieve this?

You have a paragraph containing your logo. Paragraphs create a new line both before and after the paragraph element.

Should I make it a div instead? Surely that is not what is causing the page to be about 10% taller than the screen, right?

[MidiMagic]

100% height refers to the content, not the screen size.

[Arkinder]

I've been told that this may be a good idea so that the scrollbar is always displayed no matter how long the content is. However, my question still remains that this page should actually have nothing to scroll (though it still does).

This is an optional display technique which is basically useless. If the content extends past 100% of the browser window a scrollbar will appear on its own. If the inconsistency across pages bothers you, then use it.

This is because I want some gray (the html background-color) to show above the blue (the body background-color). Is this not how I would achieve this?

It pushes the body element and everything in your page, 10% from the top. You should use a division and probably margin instead.

This is because I want some blue (the body background-color) to show above the white (the whitebox background-color). Is this not how I would achieve this?

No, that's fine but in Firefox and Chrome it does nothing (on a Mac)

Should I make it a div instead? Surely that is not what is causing the page to be about 10% taller than the screen, right?

Right, but you do have another element being pushed exactly 10% from the top.

Things to keep in mind~

1. Your footer is absolutely positioned. This removes it from the normal flow of the page. Also, there are better ways of positioning it at the bottom.
2. Every browser has its own default margin and padding. You can "reset" this with a universal rule.

   * {
       margin: 0;
       padding: 0;
   }

   This sets the margin and padding for every element to 0.

3. Make sure that you're familiar with the box model.

If you need better explanations, examples, etc. Feel free to ask.