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!
<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!
<!--[if IE 7]>
<style type="text/css">
#badevildiv {background-image:url('images/ietrans.gif'); }
</style>
<![endif]-->