CSS Hacks - Writing Browser specific CSS codes

Why are CSS Hacks needed ?

CSS are widely used now a days but the main problem with CSS is lack of Browser support. CSS Hacks are needed to display your website properly and exactly how you ant it to be. Many browsers display different elements differently. You can fix them up through CSS Hacks for different browsers.

What are CSS Hacks ?

CSS (Cascading Style Sheets) are used in a website for styling different html elements. CSS are used widely and are a essential part of a website today. If you don't know CSS you can consult any CSS tutorial available anywhere. But while using CSS and testing your website in different browsers, you may had seen that your website looks different in some browsers. Many browsers may break your elements display styles, making your website looking ugly and unusable. You can use different CSS hacks for different browsers to show up your website exactly how you want it to be.

Every designers know after designing any website, the most of the time they have to give is on cross-browser testing and debugging. Making a website not makes all the sense of showing it to the world. but preparing it for the whole world is matter of challenge these days. Lots of browsers and Operating Systems have came into being. The most problematic browser so far is Microsoft Internet Explorer. Making your CSS Website compatible with Microsoft IE (Internet Explorer) has been the most irritative task for a designer. I am also a Designer ans know its issues very well.

Here are some hacks for Internet Explorer:

To show some code only to IE use the // Hack.
margin: 20px;
//margin: 10px;
The second line of the code will only be processed by IE and not by Firefox or Opera or Netscape. So by this way you will have margin of 10px in IE and 20px in all other browsers.

To hide something from IE use the child selector command. IE don't understand this child selector command. A child selector command is a command through which we select the child element of a parent html element, as simple as html>body means we are selecting the body element which is the child of the html element.
#wrapper {margin: 10px;}
html>body #wrapper {margin: 20px;}
IE can't understand the second line and ignores it and uses the 1st line. all other browsers understands this and uses the second line.

Detecting IE 5

IE 5 has a typical problem in its box model i.e. when you define padding, border and margin of an element, IE 5 calculates it within the element's width and thus incorporates a smaller size element than other browsers. Here is a solution to detect IE 5.
#wrapper {padding: 2px; border: 1px; width: 56px; voice-family: "\"}\"";
voice-family:inherit; width: 50px;}
Here IE 5 will detect only the 1st part and will present an element with 4px of padding in both side and 2px of border on both side making it 50px wide from 56px. All other browsers will by default present a 50px wide element from the second line.

Hiding anything from IE on the MAC Operating System

To something from IE on the Mac OS, wrap it within a set of starts and dashes.
/* This will hide from IE on Mac \*/
#wrapper {margin: 10px;}
#content {margin: 20px;}
/* End hide */

Detecting Netscape Browser

Individual element hacking for Netscape has been very much non essential for designers since its market share has been below 1%, and now AOL has stopped development and active support on this browser. Read this article to know more about that. So you can hide a total CSS from Netscape and show it another CSS. Use @import to call a CSS file to hide it from Netscape. Enclose these codes in Script tag of CSS.
@import url(style.css);

Writing Opera specific CSS Hacks

There is no exact CSS hack for Opera. For Opera so you have to implement another procedure. Thats is you just include another CSS file for Opera. Detect Opera at the header of your site, just before including your CSS file. Enclose these codes in Script tag of JavaScript.

if (navigator.userAgent.indexOf(’Opera’) != -1) {
document.write(””);
}
else {
document.write(””);
}

So from now you will never face any cross-browser Design problems. All problems you can solve out through these browser specific CSS hacks. it you still face any problem report me, I will try to solve it out.