Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unneeded Vertical Scroll

    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:
    http://www.sfu.ca/~jca41/stuph/ny/template.html

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Not sure from where is comes, thought have a try adding
    Code:
    html, body{
    height:100%;
    }
    into your CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:
    Code:
    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 ):

    1. Always use the HTML validator 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:
    Code:
    <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):
    Code:
    <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>
    <div class="menuItem">
      <h2>Cheese Burger <span>6.45</span></h2>
      <h3>melted cheddar cheese</h3>
    </div>
    <div class="menuItem">
      <h2>Mushroom Burger <span>6.45</span></h2>
      <h3>smothered with sauteed muchrooms</h3>
    </div>
    <div class="menuItem">
      <h2>LA Burger <span>6.95</span></h2>
      <h3>crisp bacon, melted melted cheddar and sauteed mushrooms</h3>
    </div>
    <div class="menuItem">
      <h2>Havarti Burger <span>6.95</span></h2>
      <h3 class="menuItemDesc">melted havarti cheese and crisp bacon</h3>
    </div>
    <div class="menuItem">
      <h2>Cajun Chicken Burger <span>6.95</span></h2>
      <h3>fresh grilled chicken breast seasoned in cajun spices</h3>
    </div>
    <div class="menuItem">
      <h2>Chicken Bleu Burger <span>7.95</span></h2>
      <h3>black forest ham and mozzarella</h3>
    </div>
    <div class="menuItem">
      <h2>Chicken Cali Burger <span>7.95</span></h2>
      <h3>crisp bacon and fresh avocado</h3>
    </div>
    <div class="menuItem">
      <h2>Salmon Burger <span>7.95</span></h2>
      <h3>fresh grilled salmon fillet served with tzatziki</h3>
    </div>
    <div class="menuItem">
      <h2>Veggie Burger <span>5.95</span></h2>
      <h3>life stream patty and sprouts</h3>
    </div>
    If you did this, plus added the universal reset above, and then had this for your relevant CSS:
    Code:
    #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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    abduraooft:
    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.
    http://www.search-this.com/2007/01/2...ho-needs-them/


    Rowsdower!
    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=ht...idator%2F1.654
    Website: http://www.sfu.ca/~jca41/stuph/ny2/template.html

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Column 13: Attribute "XMLNS" is not a valid attribute.
    In an HTML doctype, the following attribute is not allowed with <html> tag
    Code:
    xmlns="http://www.w3.org/1999/xhtml"
    And your nesting of <ul>-<li> tags is incorrect, have a look at http://htmldog.com/articles/suckerfish/dropdowns/ to see the proper nesting.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add more content.

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you. I'll read the article.


  •  

    Posting Permissions

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