IE6 Fixes | Chinmay Chiranjeeb

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>

… … …

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

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 Auto-width Margins Problem fixed

Many of developers faced the Auto width Margin (margin:0 auto;) problem in IE6 browsers to make the content div center aligned irrespective of browser window.

Here is the solution.

Modify the CSS accordingly:

body {
      margin:50px 0px; padding:0px;
      /* Need to set body margin and padding to get
      consistency between browsers. */
      text-align:center; /* Hack for IE5/Win */
}

#Content {
      width:500px;
      margin:0px auto; /* Right and left margin widths set to "auto" */
      text-align:left; /* Counteract to IE5/Win Hack */
      padding:15px;
      border:1px dashed #333;
      background-color:#eee;
}

Screen Shots:

IE6

IE6 Screen Shots

FF3

FF3 Screen Shots