Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member dalcais1916's Avatar
    Join Date
    Apr 2006
    Posts
    3
    Member #
    13047
    I've a site marked up in XHTML Transitional using CSS.
    The pages on this site will not scroll when the content is obviously flowing off screen (or beyond the edges of the active window as it were).
    This problem occurs in both Internet Explorer and Firefox (using the most current versions of both)
    The clearest example can be seen at the following page:
    http://www.alzfest.org/about.html

    NOTE! If you operate on a higher resolution screen (such as 1280x1024) you may have to shrink your browser window to force this error to occur. But I am expecting many of the visitors of this site to be on smaller screens and as such would like to solve this quirk rather than ignore it.

    I've tried using "overflow: scroll;" in the "grass" ID in the CSS but it has an undesirable affect in Firefox so I removed it.
    Thanks for any help..

    The markup and CSS for this page are shown below:
    Note: CSS is external and linked to the page

    body { margin:0px; }
    #grass { width:100%; height:100%; background:#226CB8 url(../images/bg_summer2.jpg) repeat-x bottom left; position:fixed; }
    #top { margin-top:40px; width:594px; height:16px; background: url(../images/bg_top.gif) no-repeat bottom; position:relative; }
    #content_bg { width:594px; height:100%; background: url(../images/bg_content.jpg) repeat-y bottom; }
    #content { padding-left:40px; padding-right:40px; }
    #nav { width:560px; height:35px; background: url(../images/sky_bg.png) no-repeat bottom; }
    #banner { width:560px; height:114px; background: url(../images/banner.jpg) no-repeat bottom; }
    .txt_reg { text-align:justify; color:#666666; font-family: georgia, times, garamond, serif; font-size:11pt; line-height:20px; text-indent:24pt; margin-top:10px; margin-bottom:10px; }


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <?xml version="1.0" encoding="iso-8859-1"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>AlzFest.org | About Us</title>
    <link rel="stylesheet" type="text/css" href="scripts/styles.css" />
    </head>

    <body>
    <div align="center" id="grass">

    <div id="top"></div>

    <div id="content_bg">
    <div id="nav"><script language="JavaScript" src="scripts/nav.js"></script></div>
    <div id="banner"></div>
    <div id="content">
    <img src="images/head_about.jpg" border="0" />
    <p class="txt_reg"><span>ALZFEST is a family event with music, games, and other activities, all with the goal of sharing information and spreading awareness of Alzheimer's disease. The event is being organized by three friends united by the loss of loved ones earlier this year due to complications from Alzheimer's.</span></p>
    <p class="txt_reg"><span>Today nearly 4.5-million Americans suffer from Alzheimer's disease and this number is expected to grow to more than 14-million by 2050. For many of these people the process that will destroy not just their memories but their lives and their savings as well has already begun.</span></p>
    <p class="txt_reg"><span>The annual cost of Alzheimer's disease is expected to soar to at least $375-billion in the coming years, overwhelming out health care system and bankrupting federal aid programs such as Medicare and Medicaid. With this in mind ALZFEST is raising money to help in the fight against Alzheimer's. The proceeds from the event will be used to support a wide range of Alzheimer's-related programs use by the thousands of families affected by the disease.</span></p>
    </div>
    </div>

    </div>
    </body>
    </html>

  2.  

  3. #2
    Senior Member Arkette's Avatar
    Join Date
    Jan 2006
    Location
    Europe
    Posts
    102
    Member #
    12297
    The page won't scroll, because the actual content (i.e. the text) is all onscreen everything else is <div> background images. Unless you increase the text content to extend those divs then only that part of the image necessary to background the text will be displayed. I hope that's making sense. Try adding some dummy text to the page to see what I mean.
    End of Line.

  4. #3
    Junior Member dalcais1916's Avatar
    Join Date
    Apr 2006
    Posts
    3
    Member #
    13047
    Quote Originally Posted by Arkette
    The page won't scroll, because the actual content (i.e. the text) is all onscreen everything else is <div> background images. Unless you increase the text content to extend those divs then only that part of the image necessary to background the text will be displayed. I hope that's making sense. Try adding some dummy text to the page to see what I mean.
    Adding dummy text does not help.
    I have added a total of 15 paragraphs of dummy text, which is enough to force even the highest resolution screen to scroll, and the page still will not scroll.
    I am at a loss and totally confused.

  5. #4
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    Quote Originally Posted by dalcais1916
    body { margin:0px; }
    #grass { width:100%; height:100%; background:#226CB8 url(../images/bg_summer2.jpg) repeat-x bottom left; position:fixed; }
    #top { margin-top:40px; width:594px; height:16px; background: url(../images/bg_top.gif) no-repeat bottom; position:relative; }
    #content_bg { width:594px; height:100%; background: url(../images/bg_content.jpg) repeat-y bottom; }
    #content { padding-left:40px; padding-right:40px; }
    #nav { width:560px; height:35px; background: url(../images/sky_bg.png) no-repeat bottom; }
    #banner { width:560px; height:114px; background: url(../images/banner.jpg) no-repeat bottom; }
    .txt_reg { text-align:justify; color:#666666; font-family: georgia, times, garamond, serif; font-size:11pt; line-height:20px; text-indent:24pt; margin-top:10px; margin-bottom:10px; }


    body { margin:0px;}
    #grass { padding: 0px; margin:0px; width:100%; height:100%; background:#226CB8 url(../images/bg_summer2.jpg) repeat-x bottom left; position:fixed; overflow: auto;}

    #top { margin-top:40px; width:594px; height:16px; background: url(../images/bg_top.gif) no-repeat bottom; position:relative; }
    #content_bg { width:594px; min-height: 100%; background: url(../images/bg_content.jpg) repeat-y bottom; margin:0px;}
    #content { padding-left:40px; padding-right:40px; margin:0px;}
    #nav { width:560px; height:35px; background: url(../images/sky_bg.png) no-repeat bottom; }
    #banner { width:560px; height:114px; background: url(../images/banner.jpg) no-repeat bottom; }
    .txt_reg { text-align:justify; color:#666666; font-family: georgia, times, garamond, serif; font-size:11pt; line-height:20px; text-indent:24pt; padding-top:10px; margin-bottom:0px; padding-bottom:10px; margin-top:0px;}

    That should do the trick.

  6. #5
    Junior Member dalcais1916's Avatar
    Join Date
    Apr 2006
    Posts
    3
    Member #
    13047
    Quote Originally Posted by Holy Promethium
    body { margin:0px;}
    #grass { padding: 0px; margin:0px; width:100%; height:100%; background:#226CB8 url(../images/bg_summer2.jpg) repeat-x bottom left; position:fixed; overflow: auto;}

    #top { margin-top:40px; width:594px; height:16px; background: url(../images/bg_top.gif) no-repeat bottom; position:relative; }
    #content_bg { width:594px; min-height: 100%; background: url(../images/bg_content.jpg) repeat-y bottom; margin:0px;}
    #content { padding-left:40px; padding-right:40px; margin:0px;}
    #nav { width:560px; height:35px; background: url(../images/sky_bg.png) no-repeat bottom; }
    #banner { width:560px; height:114px; background: url(../images/banner.jpg) no-repeat bottom; }
    .txt_reg { text-align:justify; color:#666666; font-family: georgia, times, garamond, serif; font-size:11pt; line-height:20px; text-indent:24pt; padding-top:10px; margin-bottom:0px; padding-bottom:10px; margin-top:0px;}

    That should do the trick.
    This fixes the scroll problem, however it creates two additional problems in doing so.
    When viewed on 1024x768 screen, the white background image does not go all the way to the bottom of the text (which is very odd). The "overflow: auto" also disables the navigation when viewed in Firefox (which is even More mysterious!).
    So unfortunately I'm back to square one..

  7. #6
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    Quote Originally Posted by dalcais1916
    This fixes the scroll problem, however it creates two additional problems in doing so.
    When viewed on 1024x768 screen, the white background image does not go all the way to the bottom of the text (which is very odd). The "overflow: auto" also disables the navigation when viewed in Firefox (which is even More mysterious!).
    So unfortunately I'm back to square one..
    I discovered that auto problem, but I thought it was just because I wasnt editing the master file...

    weird.

    I was sure i'd solved that background problem though...

    double weird.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com