Chinmay Chiranjeeb » CSS Hacks http://www.chiranjeeb.com a UI Developer. Thu, 19 Jan 2012 21:56:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE6 color patches on scroll Fixes http://www.chiranjeeb.com/ie6-color-patches-on-scroll-fixes/ http://www.chiranjeeb.com/ie6-color-patches-on-scroll-fixes/#comments Mon, 04 May 2009 17:19:01 +0000 admin http://www.chiranjeeb.com/?p=198 Continue reading →]]> 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

]]> http://www.chiranjeeb.com/ie6-color-patches-on-scroll-fixes/feed/ 0 IE6 Auto-width Margins Problem fixed http://www.chiranjeeb.com/ie6-auto-width-margins/ http://www.chiranjeeb.com/ie6-auto-width-margins/#comments Fri, 01 May 2009 18:57:11 +0000 admin http://www.chiranjeeb.com/?p=182 Continue reading →]]> 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

]]> http://www.chiranjeeb.com/ie6-auto-width-margins/feed/ 0 CSS Browser Selector http://www.chiranjeeb.com/css-browser-selector/ http://www.chiranjeeb.com/css-browser-selector/#comments Mon, 22 Dec 2008 12:02:25 +0000 admin http://www.chiranjeeb.com/?p=59 Continue reading →]]> 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

]]> http://www.chiranjeeb.com/css-browser-selector/feed/ 0