View Full Version : Unneeded Vertical Scroll

07-08-2009, 11:54 PM
For some reason, the browser's vertical scroll bar allows me to keep scrolling along the page even though there is no content. I am not exactly sure what is happening but I think it is because of my 'position: relative' and 'top'. This also brings me to my next question. When I was positioning my divs, I found that I had to use a lot of negative 'top' values. Could this be creating that extra unnecessary vertical scroll bar? In addition, why must the 'top' values be negative?

Link to website:

07-09-2009, 10:05 AM
Not sure from where is comes, thought have a try adding

html, body{
} into your CSS.

07-09-2009, 03:41 PM
I don't readily see the cause of it either but I can tell you that to use 2 background images for your main page you should apply one background image to the html and the other to the body. You should not create a div just to hold the gradient. Try this instead of what you have:

html {background-image:url(http://www.sfu.ca/~jca41/stuph/ny/images/background.jpg);}
body {position:absolute;width:100%;background-image:url(http://www.sfu.ca/~jca41/stuph/ny/images/backgroundGradiant.jpg);background-repeat:repeat-x;}
Then delete that "backgroundGradiant" <div> completely. You will have to adjust your wrapper's top margin to compensate for the loss of clutter above but the backgrounds should work as desired.

I will give you a few other points of advice to consider before moving on with your page construction (not that anyone asked :D):

1. Always use the HTML validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sfu.ca%2F%7Ejca41%2Fstuph%2Fny%2Ftemplate.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1) during and after development (some liken it to a spellchecker). You currently have 88 errors and 2 warnings. Getting a validly coded page is step 1 to any good cross-browser page layout. You are using a doctype, which is a very good start (though I would recommend either HTML 4.01 strict or XHTML 1.0 strict rather than any transitional doctype). Finish strong with proper HTML markup though. Trying to fix a page anomaly (such as your spacing issue) with invalid code is usually an exercise in futility.

2. Start your very first line of your CSS file with this: * {border:0;margin:0;padding:0;}. It is a "universal reset" and it wipes out browser-dependent default margins, padding, and borders on all element types so all browsers start at the same point.

3. Design and test for FF (or your preferred Mozilla browser) and then hack/adjust things to make IE fall in line. It looks like you might already do this, but just incase you don't this can be a real time saver.

4. Don't use position:absolute; or position:relative; unless you really, really need to. Especially don't use position:relative; with any declaration for top, bottom, left, or right. Your first and most basic layout tools should almost universally be the combined use of height, width, margin, padding, float, and clear (not necessarily all or even most of these at any given time, but one or two or more where appropriate). While I can't find its exact cause, I'd bet your use of positioning is the root of your troubles. (and holy cow, take a look at your page in IE7)

5. Don't use <div> elements as spacers or as a proxies for table cells. Also, in general, you have a lot of extra markup. This is what I mean:

You have:

<h1 id="menuCatagoryName">Gourmet Burgers</h1> <br />
<h1 id="menuCatagoryDesc">served with roasted potatoes and green salad. substitute caesar salad for $1 extra. </h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Classic Burger</h2> <h1 class="menuItemPrice">5.95</h1> <br />
<h1 class="menuItemDesc">lettuce, tomato, sliced onion and our special home-made sauce on a toasted kaiser</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Cheese Burger</h2> <h1 class="menuItemPrice">6.45</h1> <br />
<h1 class="menuItemDesc">melted cheddar cheese</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Mushroom Burger</h2> <h1 class="menuItemPrice">6.45 <br>
<h1 class="menuItemDesc">smothered with sauteed muchrooms</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">LA Burger</h2> <h1 class="menuItemPrice">6.95</h1> <br />
<h1 class="menuItemDesc">crisp bacon, melted melted cheddar and sauteed mushrooms</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Havarti Burger</h2> <h1 class="menuItemPrice">6.95</h1> <br />
<h1 class="menuItemDesc">melted havarti cheese and crisp bacon</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Cajun Chicken Burger</h2> <h1 class="menuItemPrice">6.95</h1> <br />
<h1 class="menuItemDesc">fresh grilled chicken breast seasoned in cajun spices</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Chicken Bleu Burger</h2> <h1 class="menuItemPrice">7.95</h1> <br />
<h1 class="menuItemDesc">black forest ham and mozzarella</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Chicken Cali Burger</h2> <h1 class="menuItemPrice">7.95</h1> <br />
<h1 class="menuItemDesc">crisp bacon and fresh avocado</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Salmon Burger</h2> <h1 class="menuItemPrice">7.95</h1> <br />
<h1 class="menuItemDesc">fresh grilled salmon fillet served with tzatziki</h1>
<div class="menuItemSpace"></div>
<h1 class="menuItemName">Veggie Burger</h2> <h1 class="menuItemPrice">5.95</h1> <br />
<h1 class="menuItemDesc">life stream patty and sprouts</h1>

There is no reason that this could not simply be like so (if you really want to use <div>'s instead of a <ul> list):

<h1 id="menuCatagoryName">Gourmet Burgers</h1>
<h2 id="menuCatagoryDesc">served with roasted potatoes and green salad. substitute caesar salad for $1 extra. </h2>
<div class="menuItem">
<h2>Classic Burger <span>5.95</span></h2>
<h3>lettuce, tomato, sliced onion and our special home-made sauce on a toasted kaiser</h3>
<div class="menuItem">
<h2>Cheese Burger <span>6.45</span></h2>
<h3>melted cheddar cheese</h3>
<div class="menuItem">
<h2>Mushroom Burger <span>6.45</span></h2>
<h3>smothered with sauteed muchrooms</h3>
<div class="menuItem">
<h2>LA Burger <span>6.95</span></h2>
<h3>crisp bacon, melted melted cheddar and sauteed mushrooms</h3>
<div class="menuItem">
<h2>Havarti Burger <span>6.95</span></h2>
<h3 class="menuItemDesc">melted havarti cheese and crisp bacon</h3>
<div class="menuItem">
<h2>Cajun Chicken Burger <span>6.95</span></h2>
<h3>fresh grilled chicken breast seasoned in cajun spices</h3>
<div class="menuItem">
<h2>Chicken Bleu Burger <span>7.95</span></h2>
<h3>black forest ham and mozzarella</h3>
<div class="menuItem">
<h2>Chicken Cali Burger <span>7.95</span></h2>
<h3>crisp bacon and fresh avocado</h3>
<div class="menuItem">
<h2>Salmon Burger <span>7.95</span></h2>
<h3>fresh grilled salmon fillet served with tzatziki</h3>
<div class="menuItem">
<h2>Veggie Burger <span>5.95</span></h2>
<h3>life stream patty and sprouts</h3>

If you did this, plus added the universal reset above, and then had this for your relevant CSS:
#content {float:left;height:506px;width:400px;color:#929292;font-family:Arial,sans-serif;font-size:12px;}
#menuCatagoryName {color:#e5c12e;font-size:14px;text-transform:uppercase;}
#menuCatagoryDesc {display:inline;font-size:12px;font-weight:100;}
.menuItem {margin-top:8px;}
.menuItem h2 {text-transform:uppercase;font-size:12px;}
.menuItem h2 span {color:#e5c12e;margin-left:5px;}
.menuItem h3 {font-size:12px;font-weight:100;}

then your food menu would be all set and much cleaner to code with fewer element/CSS classes to worry about.

07-11-2009, 07:54 AM
Thank you for your simple reply. Those few lines of code works, but only in Firefox... if only the world only used FF eh? Upon further reading, I discovered that the problem was indeed because of how I used my positions. Turns out that moving objects around with position only moves them visually and not physically. In other words, it may appear that the object has moved, but in physical space it has not moved. This caused my large empty vertical space as it appears that nothing is occupying that space, but in reality I have objects there but I have moved them 500 pixels up to create the illusion that they are not there. Here is the short article that I read. It explains it much better.

Thank you for your help. The code you gave me for the menu worked wonders. I also tried to remove the gradient background div but that caused a few errors. I just ignored it, but I know for my next project what needs to be done. I've also gotten rid of all my positions, and am now happy to say that I am just using floats, margins, and padding. I also checked out the HTML Validator and managed to reduce the amount of errors to six. I am quite confused as to why I am getting those errors and how to fix them. I am wondering if you wouldn't mind taking a quick peek at them.

HTML Validator: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sfu.ca%2F~jca41%2Fstuph%2Fny2%2Ftemplate.html&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654
Website: http://www.sfu.ca/~jca41/stuph/ny2/template.html

07-11-2009, 09:14 AM
Column 13: Attribute "XMLNS" is not a valid attribute.
In an HTML doctype, the following attribute is not allowed with <html> tag


And your nesting of <ul>-<li> tags is incorrect, have a look at http://htmldog.com/articles/suckerfish/dropdowns/ to see the proper nesting.

07-12-2009, 01:44 AM
Add more content. :D

07-13-2009, 07:42 AM
Thank you. I'll read the article.