CSS Hack Cross Browser | 2008-01-03

Technology Blog » Web Development

There are many CSS hacks exists. The term of CSS hack is writing some codes that can only be recongize by specific browsers to fix the layout prolbems. For example, when we make a webpage done in IE, we found out there is some attributes in CSS doesn't works in Firefox, the CSS hack is encourage to apply......


Browser Specific CSS Hack 

See the first one is for IE6 (Means IE6 will use this one)

Second one is for IE7

Last one is for Firefox

that's the trick, put it in your HTML <Head> enjoy! 

<!--written by andy www.pcinvent.com:browser detecter-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="./templates/index/css/template_css_ie6.css" />
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="./templates/index/css/template_css.css" />
<![if !IE]>
<link rel="stylesheet" type="text/css" href="./templates/index/css/template_css_ff.css" />


Inline CSS File Hack

if there is a left margin that has to be 5px in Firefox/Opera,

6px for IE6 & 7px for IE7

I will do: (See my comment here for details)

margin-left: 5px; /* Left margin for all browsers, mainly Opera, Firefox, etc. */
.margin-left: 7px; /* Left margin of 7px that can be readable by both IE6 & IE7, now other still think it’s 5 while IE6 & IE7 think it’s 7 */
_margin-left: 6px; /* Only IE6 reads this and changes the value to 6px */