2008-05-12
For one of the websites that I've been coding, I have a basic 3 div layout that gets aligned as 3 rows using CSS. Basically, it looks like this:

<div id="navigation">a bunch of links go here</div>
<div id="content">lorum ipsum ........ lots of text goes here</div>
<div id="footer">copyright blah blah blah</div>

By using absolute positioning in my CSS, the navigation always stays at the top of the page, the footer always stays at the bottom of the page and the content fills the area between the navigation and the footer, and the content will scroll if it needs to.

Everything works as it should in Firefox, Safari, Opera, and various web browsers based on Gecko or Webkit. Do you notice anything missing from the list? Yea, that would be Internet Explorer. Specifically IE7.

When the content div had enough content to require scrolling, the div wouldn't scroll with the scrollwheel when using IE7. Actually, sometimes the content would scroll a bit when using the scrollwheel.....hmmmmmm.... AH-HA!

The div would scroll a bit when the cursor was over something in the div, be it text or an image, but there was no scrolling when the cursor was on an empty area. All I needed to do was fill the background of the div with somthing so that the cursor would have something to be hovering over even when there was nothing on the page.

Adding the following line to the content style fixed the problem:
background-color:#FFFFFF;

Yea that's right, I filled the background of the div with a color and everything was honky-dorey. Booyah!
Comments
2008-09-15 Anonymous:
Thanks!! We had noticed the same problem but just thought it was an IE quirk that we would have to live with!
2009-09-24 Relieved Coder:
Option 2 (that worked for me): create a transparent gif of some size (mine was 800x800) and set your div background in the style declarations to this gif.

<!--[if IE 7]>
<style type="text/css">
#badevildiv {background-image:url('images/ietrans.gif'); }
</style>
<![endif]-->
Name:
not required
Email:
not required (will not be displayed)
Website:
not required (will link your name to your site)
Comment:
required
Please do not post HTML code or bbcode unless you want it to show up as code in your post. (or if you are a blog spammer, in which case, you probably aren't reading this anyway).
Prove you are human by solving a math problem! I'm sorry, but due to an increase of blog spam, I've had to implement a CAPTCHA.
Problem:
8 minus 0
Answer:
required
  • Tags:
subscribe
 
2019
2016
2015
2014
2013
2012
2011
2010
December
November
October
September
August
July
June
May
April
March
February
January
2009
December
November
October
September
August
July
June
May
April
March
February
January
2008