ie6 double float margin bug

Webdevelopers gets irritated when they give a margin value to a block, suddenly only in ie6 they can see the value gets doubled. For example: if you give margin-left:10px, ie6 will take the value as 20px. Thank god they have fix this issue in ie7. This is because, when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won't show the doubled margin.

The simple way to handle this issue is to put display inline fix. By placing this will not affect any other browsers.

For Example:
.fltt{
float:left;
width:300px;
margin:5px 5px 0px 10px;
display:inline;
}

Read more...

Png fix for ie6 using css

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.

Read more...

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

Read more...