Chinmay

IE6 color patches on scroll Fixes

Posted on May 4, 2009 by admin

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.

IE6 Auto-width Margins Problem fixed

Posted on May 1, 2009 by admin

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

IE6 Screen Shots

FF3

FF3 Screen Shots

FF3 Screen Shots

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

CSS Browser Selector

Posted on December 22, 2008 by admin

Clever technique to help you on CSS hacks.

CSS Browser Selector is a very small javascript with just one line and less than 1kb which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

EXAMPLE

http://rafael.adm.br/css_browser_selector/

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

Github

http://github.com/rafaelp/css_browser_selector

DOWNLOAD

git clone git://github.com/rafaelp/css_browser_selector.git

USAGE

1. Copy and paste the line above, inside <head> and </head> tag

<script src=”css_browser_selector.js” type=”text/javascript”></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS

Available Browser Codes [browser]:

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Credits

CSS Browser Selector

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