CSS - Ie Overflow Causing Scrollbars To Shrink Content

I have a layer 'main' that contains two columns - one on the left called 'left', one on the right called 'right'. Both columns are layers themselves.

'main' has a background colour

'left' and 'right' have a fixed size background image which does not repeat.

JavaScript determines the size of the window and then sets the height of these three layers exactly. This is supposed to be a minimum height to ensure the page is filled initially, however I have used the following code (explained later):

Code:

if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myHeight = document.documentElement.clientHeight;
  } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myHeight = document.body.clientHeight;
  }

  
   // main height
   var pageHeight = myHeight;
   document.getElementById("main").style.height = pageHeight+"px";
   
   // content height
   var leftHeight = pageHeight - 233;
   document.getElementById("left").style.height = leftHeight+"px";
   document.getElementById("right").style.height = leftHeight+"px";

Content on 'right' may extend beyond the height of the page and therefore makes the page scroll.

When the content in 'right' expands - it is hoped that the size of 'main' expands so that the background colour of this layer fills the space where the content overflows.

Using the above JavaScript and this HTML - that works as desired in IE7.

Code:

<div id="main" style="position: relative; margin: 0 auto; width: 680px; background: #E1E6EA; text-align: left; padding: 0; z-index: 2">

<div id="left" style="float: left; text-align: center; margin: 0; padding: 0; width: 198px; background: #E1E6EA; background-image: url('images/left.jpg'); background-repeat: no-repeat; z-index: 3">

blah

</div>

<div id="right" style="float: right; text-align: center; margin: 0; padding: 0; width: 482px; background: #E1E6EA; background-image: url('images/right.jpg'); background-repeat: repeat-x; z-index: 3; overflow: inherit">

badly coded extra bit to extend the layer
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy

</div>

</div>

As the content of 'right' expands so does the background behind everything.

HOWEVER - this only works in IE and not the other two test browsers: Safari and Firefox.

To remedy this - I tried minHeight instead of height.
The outcome of that - the background behind 'right' extends (because the background colour continues past the minHeight) but the background behind 'left' is just not shown and the background of 'main' does not extent. Therefore it has a background on the left hand side until the minHeight of 'main' then the left hand side has no background after that point. That's in Firefox and Safari.
With this "solution" in IE - it goes a bit weird but since it doesn't even work right in the other two I ignore that for now.

So - it either works in IE or not at all. Hence why I am currently using the code that at least works in a browser.

Any suggestions to get it working in all?

Dear all,

IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content.

My code:
Code:

<div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;">
<div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative">
<div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div>
</div>
</div>

I found a couple more threads similar to this but none with a solution.

any help most appreciated. Mark

Hi

Could someone tell me why the content is not showing in Netscape 7 please

This is the site http://www.hardingscatering.co.uk/06/index.htm

I have put an overflow property on the container div, so FF can show white as the bground colour.

But when viewed in Netscape the content is not there and on other pages a scroll bar appears.

I always have trouble with this, and would really like to know what I am doing wrong.

Thanks for any help.

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally.


Heres what I have:
Code:

<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);

}
-->
</style>

Like that it will only display half of the gradient if the gradient is longer than 50% of the page.

I want it to stretch or shrink the image so that the whole gradient is displayed.

I tried using the background-size: 100% attribute but it diddnt do anything :-\

Thanks for any help.

I am having a problem with IE. I have an anchor nested inside a list item with display: block applied. Because it is a block-level element (now), I applied a height. In Firefox/Win, it works wonderfully. In IE6/Win, the anchor area shrinks! If I leave it out, Firefox still works, but IE has gaps showing the background color of the body! I am okay with this problem since this page is for a friend, but I would like to know if there is a way to fix this for future reference.

CSS:
Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>Choose a Page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 /* <![CDATA[ */
 
 body {
 font-family: arial, helvetica, verdana, geneva, sans-serif;
 font-size: 11.5pt;
 margin: 0;
 padding: 0;
 color: #fff;
 background-color: #000;
 }
 
 h1, h3 {
 text-align: center;
 }
 
 h2, #pgdesc, #img{
 text-align: center;
 margin: 0;
 padding: 0;
 }
 
 ul {
 margin: 0 0.5% 0;
 width: 25%;
 float: left;
 height: 100%;
 padding: 0;
 border: 4px solid #009;
 border-top: 1px solid #009;
 list-style-type: none;
 list-style-position: outside;
 }
 
 li {
 background-color: #039;
 width: 94%;
 padding: 3%;
 margin: 0;
 border-top: 4px solid #009;
 }
 
 li a {
 background-color: #099;
 height: 1%;
 margin: 0;
 padding: 0 0 0 4%;
 display: block;
 font-weight: bold;
 }
 
 a {
 text-decoration: none;
 }
 
 a:link {
 color: #009;
 }
 
 a:link:hover {
 color: #00f;
 background-color: #0ff;
 }
 
 #active {
 background-color: #f0f;
 }
 
 /* ]]> */
 </style>
 </head>
 <body>
 <h1>Directions</h1>
 <ul>
   <li><a href="index.html" title="E.T. Phone Home">Home</a></li>
   <li><a id="active">Directions</a></li>
   <li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
   <li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
   <li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
   <li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
   <li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
   <li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
   <li><a href="32x.html" title="View 32X games">32X</a></li>
   <li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
 </ul>
 <h2>Select a page</h2>
 <div id="pgdesc">Select a console/handheld and then a letter of the alphabet to see the list of games for that letter.</div>
 <h3>Note: This page does not host ANY emulators. If you came here looking for an emulation site, you will not find anything.</h3>
 <div id="img">
   <img id="atari" src="atari2600.jpg" alt="Atari 2600">
 </div>
 </body>
 </html>
 

Thank you to all who try to help!

Hi,

Before I was using this code for scrollbars for various Style Sheets on FORUMS:
Code:

.body
{
scrollbar-3dlight-color: #ffff00;
scrollbar-base-color: #0000ff;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #ff0000;
}

Now I've started to work on WEBSITES and this doesn't work with 'em. So. My question is, how can I get a scrollbar effect, I heard it has something to do with div/layer, but I dunno. Can someone plz explain.

JamesRP.

Hi, I'm having two different issues in Firefox 3 which occur only when pages have a scrollbar.


1) Whenever a page has enough content to be scrollable, the width of the scrollbar throws off the centering of the page. For some reason FF3 treats background image centering differently than centering a div using margin: auto;. This creates a minor 1px difference in centering, but there are image rollovers within the div structure which are meant to align perfectly with the background image and look awful otherwise.

2) I have a footer with a link to the website's site map. When pages have no scrollbar, the link to the site map does not work (no cursor change, hover effects, or page change). The same link works perfectly however on a page that does have a scrollbar (and actually, if you go to a page that doesnt have a scrollbar and then make the browser windows smaller in order to force scrolling, the link works fine).


The website I'm working on is: http://sespaintball.com

I have a page set up with a div overflow set to auto. Works great, until I add a flash file.

In firefox etc get no problems, but msie 6 adds a horizontal scrollbar, which seems to scroll just a few pixels.

Can anyone help? URL is: http://fostersdev.allit-services.com/test.html

Is it possible? The classic Windows bar is so boring....

Hi,

I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is:

Code:

#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}

For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated.

Thanks,
Ralph

Hi,

I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is:

Code:

#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}

For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated.

Thanks,
Ralph

I am working on a site with some simple CSS, and working with Firefox as a testing browser for the first time.

The site layout has the main content in a 640px DIV that is centered in the browser. I had been driven crazy by what I thought was a bug in my coding, where certain pages would "shift" several pixels to the left. The problem only occurred in FF, not IE6.

It wasn't until several possibilities were exhausted that I realized the problem was the scrollbars in FF. The CSS has the following:


Code:

div {position:relative;margin:auto;width:640px;background-color:orange;text-align:center;clear:both}

Because the margin is set to AUTO, it is centered within 100% of the browser window. When there is no vertical scrollbar, there's no problem. But when that vert scrollbar appears it takes up real estate in the FF window, pushing the centered DIV to the left.

Is there a solution for this? I know most of the world uses IE, but I use FF and my sincere hope is that the rest of the world follows.

Hi all,

I'm working on a "toolbar" in a site, which users can populate with links and notices as they desire. Since it's possible that they'll put so much into the bar that it wont fit on the screen, I want to make it scroll horizontally - but without scrollbars.

I'm hoping to have an area to the left and right of the toolbar that they can mouseover to scroll it in that direction.

Here's a pictu


I'm not having much luck getting it working, despite trying a few things google turned up...

Apparently I can get rid of the scrollbars by having a div with overflow:auto inside one with overflow:hidden... (link)
The same site also shows how to only a horizontal scrollbar... (link)

I experimented a bit with white-space:nowrap to get the content to stay all on one line, which seems to work in FF (stays on one line inside the horizontally scrolling div) but not IE (stays on one line but stretches the div size)...

Any ideas?