Chinmay

IE6 color patches on scroll Fixes

I came across the color patches problem on scroll of IE6.
Cause: If we have no or different background color in the parent div and the Current div has different background color.

Example:

HTML CODE

… … …

<div class=”outter-content”>

<div class=”content-home”>

<div class=”banner”>… … …</div>

</div>

</div>

… … …

CSS CODE

.outter-content {
	background: #000;
	clear: both;
	border:#a5b3bb 1px solid;
	border-top:0px;
}

.content-home {
	clear: both;
	padding:0 1px;
	background: #d8eaf0;
	border-bottom:1px solid #a6b4bc;
}

.banner{
	background: url("../images/banner.png") no-repeat left top;
	width:1000px;
	height:436px;
}

Screen Shots:

IE6 Color Patches

IE6 Color Patches

Solution:
Change the background of .outter-content to same as .content-home.

CSS CODE

.outter-content {
	background: #d8eaf0 ;
	clear: both;
	border:#a5b3bb 1px solid;
	border-top:0px;
}
... ...

Screen Shots:

IE6 Color Patches Fixed

IE6 Color Patches Fixed

This entry was posted in CSS Hacks, Tutorials and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>