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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post

    I have a problem with overflow: scroll;

    Here's the page(s) in question...

    http://www.oasisgamingusa.com/testla...ex_layout4.php

    Here's the stylesheet for the page...

    Code:
    /* Stylesheet for Oasis Gaming USA website */
    html, body {
    	margin: 0;
      	padding: 0;
      	width: 100%;
    	min-height: 100%;
    	font-size : 100%;	/*Enable font resizing in IE*/
        background-color: #ffffff;
    	color : #000000;
        font-family : Verdana, Arial, sans-serif;
        height: 100%;
        overflow: scroll;
    }
    html>body {
    	font-size: 9pt;
    }
    h1 {
    	font-size: 1.3em;
    }
    h2 {
      	font-size: 1.2em;
    }
    h3 {
      	font-size: 1.1em;
      	font-weight: normal;
      	text-align: center;
      	display: block;
    }
    p {
    	margin : 5px 10px 10px 10px;
    	padding : 5px;
    	display : block;
    }
    a:link, a:active, a:visited {
      	margin: 0;
      	padding: 0;
      	color: #15483a;
      	text-decoration: none;
    }
    a:hover {
      	text-decoration: underline;
      	font-weight: bold;
    }
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: right;
    }
    #menu li {
    	float: left;
    	position: relative;
    	border-left: 1px solid #d2bc2d;
    }
    #menu li ul {
    	display: none;
    	position: absolute;
    	top: 14px;
    	left: -1px;
    }
    #menu li:hover ul, li.over ul {
    	display: block;
    	background-color: #15483a;
    }
    #menu li ul li {
    	border-left: 1px solid #d2bc2d;
    	border-right: 1px solid #d2bc2d;
    	border-bottom: 1px solid #d2bc2d;
    }
    #menu a, #menu a:active, #menu a:visited {
        width: 9em;
    	 padding : 0 .5em;
        color: #d2bc2d;
        text-decoration : none;
    	 font-weight: bold;
    	 font-size: 1em;
    	 display: block;
    	 text-align: left;
    }
    #menu a:hover {
        text-decoration : none;
    	 background-color: #d2bc2d;
    	 color: #15483a;
    }
    #page {
      	margin: 0 auto;
      	padding: 0;
      	width: 800px;
    	min-height: 100%;
      	background-color: #ffffff;
      	position: relative;
    }
    #header {
      	margin: 0 auto;
      	padding: 0;
      	width: 100%;
      	height: 115px;
    }
    #logo {
    	margin: 0;
    	padding: 0;
    	width: 159px;
    	height: 102px;
    	float: left;
    	margin-top: 5px;
    	margin-left: 40px;
    	display: inline;
    	background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
    	position: relative;
    	z-index: 100;
    }
    .right {
      	margin: 0;
      	padding: 0;
      	float: right;
    	position: relative;
    }
    .left {
      	margin: 5px;
      	padding: 0;
      	float: left;
    	position: relative;
    }
    #menu {
    	margin: 90px 0 0 0;
    	padding: 5px;
    	height: 15px;
    	background-color: #15483a;
    	position: absolute;
    	z-index: 1;
    	width: 100%;
    	left: 0;
    }
    #content {
    	margin: 20px 0;
    	padding: 0;
    	width: 640px;
    	min-height: 100%;
    	float: left;
    	border-right: 1px dotted #000000;
    	background-color: #f7f7f7;
    }
    #content2 {
      	margin: 20px 0;
      	padding: 0;
      	width: 100%;
      	min-height: 100%;
    	background-color: #f7f7f7;
    }
    .article {
    	margin: 0 0 10px 0;
    	padding: 0;
    	position: relative;
    	display: block;
    	width: 100%;
    }
    .articleTitle {
      	margin: 0;
      	padding: 0;
      	font-weight: bold;
      	text-align: center;
      	padding: 5px;
      	color: #15483a;
      	overflow: hidden;
    }
    p.articlecontent {
      	margin: 10px;
      	padding: 0 20px;
      	font-size: 1em;
      	text-align: justify;
    }
    hr.titleline {
      	margin: 0 auto;
      	padding: 0;
      	width: 80%;
    }
    img#cabinet {
      	margin: 0;
      	padding: 0;
      	float: left;
      	position: relative;
    }
    #rightside {
    	margin: 20px 0;
    	padding: 0;
    	width: 150px;
    	min-height: 100%;
    	float: right;
    }
    #divNewsCont {
      	position: relative; 
    	width: 100%; 
    	height: 80px; 
    	visibility: hidden;
    	overflow: hidden;
    	background-color: #f7f7f7;
    }
    #divNews { 
      	position: relative;
    }
    .contactform {
      	margin: 0 auto;
      	padding: 10px;
    }
    .rlabel {
      	color: red;
      	font-weight: bold;
    }
    .flabel {
      	font-weight: bold;
    }
    .field {
      	margin: 0;
      	padding: 0;
      	background-color: #e1f9d4;
    }
    #info {
      	position: relative;
      	width: 100%;
      	background-color: #f7f7f7;
    }
    #address {
      	margin: 0;
      	padding: 5px;
      	font-weight: bold;
      	font-size: 7.5pt;
    }
    #pnumbers {
      	margin: 0;
      	padding: 5px;
      	font-size: 7.5pt;
    }
    #footer {
      	width: 100%;
    	height: 26px;
      	margin: 10px 0 0 0;
      	padding: 0;
    	clear: both;
    	font-size: .8em;
    	background-color: #15483a;
    	color: #d2bc2d;
    	position: relative;
    	bottom: 0;
    	left: 0;
    }
    .copyright {
    	margin: 0 0 0 5px;
    	padding: 0;
    	position: relative;
    	top: 5px;
    }
    ul#footnav {
    	margin: -5px 0 0 0;
    	padding: 0;
    	list-style: disc;
    	float: right;
    }
    ul#footnav li {
    	float: left;
    	position: relative;
    	width: 8em;
    }
    ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
        width: 8.5em;
    	 padding : 0 0 0 .5em;
        color: #d2bc2d;
    }
    ul#footnav a:hover {
        text-decoration : none;
    }
    If you look at the page you can see that there are two scrollbars on the right side of the browser window. I know this is a result of me adding overflow: scroll; but I'm not sure how to get rid of just one of those.

    The reason I added this was because my supervisor wanted all the pages to be consistent. Our Products and Markets pages are long enough at the moment that you have scroll but the home page and contact us pages aren't. This results in a slight shifting to the left when you go from the home page to the products page for example and my supervisor wanted that slight left shift to go away. So he suggested adding the scrollbar. Is there an easy solution to this problem?

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok nevermind. I figured out the problem. At the top of my stylesheet I have a set of styles for html and body all grouped together and that's where I put the overflow: scroll; at.

    It turns out that it was adding a scrollbar for both the html part of the document structure and the body part. I added style just for the body element that has the overflow: scroll; and it worked just fine.

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok, I guess this isn't fully fixed yet. It turns out that my supervisor says that the page still renders with two scroll bars in IE6. I don't know since all I have is IE7 installed on my machine.

    It still looks good with only one scroll bar in Firefox but IE6 is having a problem. Does anyone know a fix for this?

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you remove the overflow:scroll from the body it fixes it in IE6, but why are you using it anyway?!

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well, I'm using it because without it, when you go from like the home page, which doesn't have enough content to make it scroll automatically, to like the products page, where it does have enough content to scroll automatically, the whole format shifts to the left slightly.

    Although I don't mind the shifting because I just don't really notice it, my supervisor for this project does mind it. He thinks it breaks the flow or something so he told me to put it in.

    Have any ideas on how I can turn it off for IE browsers? This same thing happens in IE7 as well. I haven't tried Opera yet.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try overflow:auto; instead.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Registered User
    Join Date
    Oct 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but i think that is the problem, he doesn't like the way that the overflow: auto; only scrolls when there is enough content. when there isn't enough it shifts the the left because there is no scroll bar that takes up space. but what you could do is use padding and margins to overcome this, i play around with it i really dont know how you would do it

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah I see why you want to use it too but gee your supervisor seems a bit picky!

    Well, FF has it's own property to show scrollbars all the time regardless of whether there is content to scroll (like IE6 does; I don't know about IE7).

    You could try using overflow:-moz-scrollbars-vertical;

    Actually, I've also just come across http://myweb.msoe.edu/~larsonc/tutorials/ffscrollfix/

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by <?austin ?> View Post
    but i think that is the problem, he doesn't like the way that the overflow: auto; only scrolls when there is enough content. when there isn't enough it shifts the the left because there is no scroll bar that takes up space. but what you could do is use padding and margins to overcome this, i play around with it i really dont know how you would do it
    No overflow:auto; only shows the scrollbars when needed. overflow:scroll; shows them at all times even when not needed.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hey, sorry I haven't got back on this but I've not been feeling well the past few days. Anyway, the link that mark87 posted provided me with a good fix. I really appreciate it. Thanks to all who provided info on this.



  •  

    Posting Permissions

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