...

View Full Version : I have a problem with overflow: scroll;



Paithar
10-25-2006, 04:23 PM
Here's the page(s) in question...

http://www.oasisgamingusa.com/testlayout/index_layout4.php

Here's the stylesheet for the page...


/* 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?

Paithar
10-25-2006, 06:59 PM
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.

Paithar
10-25-2006, 07:17 PM
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?

mark87
10-25-2006, 07:25 PM
If you remove the overflow:scroll from the body it fixes it in IE6, but why are you using it anyway?! :confused:

Paithar
10-25-2006, 10:27 PM
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.

_Aerospace_Eng_
10-25-2006, 10:41 PM
Try overflow:auto; instead.

<?austin ?>
10-26-2006, 12:36 AM
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 :D

mark87
10-26-2006, 10:28 AM
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/ :)

_Aerospace_Eng_
10-26-2006, 01:39 PM
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 :D

No overflow:auto; only shows the scrollbars when needed. overflow:scroll; shows them at all times even when not needed.

Paithar
10-31-2006, 04:14 PM
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.

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum