PDA

View Full Version : MainContainer div has a weird scroll



BarrMan
Jan 31st, 2010, 07:36 PM
Hey,

When surfing my site from a low resolution laptop I discovered a weird scroll over my div.

I looked around a bit and I found out what's causing the problem, it's either: overflow:auto or position:relative.

However, I can't take down these code pieces since I'm using them for specific reasons: make an always on bottom footer and have a repeating background-image for faux columns.

My laptop's computer resolution is 1024x600 and I'm working with Firefox on windows XP.
On my regular computer it works just fine.

Here's the site URL: http://www.ted.co.il/he/article/ביטוחי-בריאות-קבוצתיים/11.html

My general site build:


<div id="MainContainer">
<div id="RightContent">
</div>
<div id="MiddleContent">
</div>
<div id="LeftContent">
</div>
</div>


And the General CSS:

div#MainContainer
{
font-size:100%;
font-family:Arial;
width: 748px;
text-align:center;
clear:both;
background-image:url(../images/maincontainerbackground.jpg);
background-repeat:repeat;
background-attachment:scroll;
min-height:100%;
position:relative;
overflow:auto;
margin:0 auto -31px;
}
body
{
padding:0;
margin:0;
text-align:center;
width:100%;
height:100%;
}
div#RightContent
{
background-color:#3b4853;
height:100%;
width:8px;
/* min-height:617px;*/
float:right;
}
div#MiddleContent
{
float:right;
height:100%;
width:166px;
background-color:#3b4853;
}
div#LeftContent
{
float:left;
background-color: #FFF7F0;
height:100%;
width: 544px;
}

Also, on this laptop my MainContainer div isn't big enough the whole LeftContent div goes down whereas the MainContainer div and all it's other elements have the proper width. (Tested with FireBug).

Any help would be appreciated.

Excavator
Jan 31st, 2010, 08:44 PM
Hello BarrMan,
When the browser window gets narrower than the 748px width of your #MainContainer there will be a horizontal scroll on the browser.
If you're seeing a horizontal scroll on the bottom of #MainContainer, it's most likely your box model (http://www.w3.org/TR/CSS2/box.html) is off.

The best way to fix that is to go through and verify the widths on everything in your site. Make sure all elements fit in their containers - keeping in mind that the box model states that margin/padding/border all count when figuring widths.

You could also clear your floats with a method other than overflow:auto;, although the error in your box model would bother you forever.

BarrMan
Feb 1st, 2010, 08:18 PM
Thanks a lot for your reply.

I did check everything you said and found some elements that didn't fit in their containers but it didn't help at all and the problem still occurs.

What should I do?

Thanks again.

Excavator
Feb 1st, 2010, 08:28 PM
The only scrollbar I'm seeing is the one on that short right column. I've looked at your site in FF3.6, IE8 and IE7.
That scrollbar on the right column is on the right side in FF and on the left side in IE8 because that browser moves the scrollbar over when you set your text to read from right to left.

I don't see an x-scrollbar at all... http://www.ted.co.il/he/article/ביטוחי-בריאות-קבוצתיים/11.html

IE8 also doubles up on your header image and I'm not sure why... IE7 gets it right.

When in doubt, start fixing errors - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ted.co.il%2Fhe%2Farticle%2F%25D7%2591%25D7%2599%25D7%2598%25D7%2595%25D7%2597%2 5D7%2599-%25D7%2591%25D7%25A8%25D7%2599%25D7%2590%25D7%2595%25D7%25AA-%25D7%25A7%25D7%2591%25D7%2595%25D7%25A6%25D7%25AA%25D7%2599%25D7%2599%25D7%259D%2F11.html

BarrMan
Feb 1st, 2010, 09:47 PM
Thanks a lot for you reply.

I also see that everything's fine on my computer, but when I look at it over my laptop (resolution: 1024:600) it somehow generates a weird scroll-y over the MainContainer which can only be fixed by getting rid of overflow:auto or position:relative;

And there's more, when I switched to google chrome on the same laptop, I got the results I wanted, that's really weird. I used the same FF versions and the only thing different was the resolutions.

Why is that?

Thanks a lot again.

BarrMan
Feb 3rd, 2010, 06:05 PM
Anyone knows?

jenius
Feb 3rd, 2010, 06:17 PM
no scrollbar here either, and I'm on a mac laptop. Your navigation on the right has a y-scroll though, which you should definitely get rid of, it looks quite tacky