Posts Tagged ‘css hack’
Min-Height Hack in IE
Posted on: November 13, 2009
- In: CSS
- Leave a Comment
As we all know that min-height doesn’t work in IE 6. Say for example if your site doesn’t have much content then you web page will end up till the content is there. So if you want to set some minimum height so that the page looks good. If you set some exact height for the webpage it will lead to a problem when the content is more. So to avoid this issue, there is a solution for this min-height works with mozilla, opera, chrome, safari,IE 7, IE 8 but doesn’t work with IE 6.
So to make it work with IE 6 we need to hack it. Below is the solution for such an issue
Ex:
<div id=”container”>
Some content goes here…..
</div>
<style type=”text/css” >
#container{
min-height:300px;
}
</style>
The above code works only with mozilla, safari, chrome, opera, IE7 & 8.
Solution for IE 6:
#container{
min-height:300px;
height:auto !important; //IE hack
height:300px;
}
Thats it, so simple solution no CSS 3 required, no external javascript required. Check it out.
Cross Browser CSS Hacks and Tools
Posted on: August 19, 2009
Well as a designer or a developer we are responsible for developing a cross browser product. Most commonly used browsers are
1. Mozilla
2. Internet Explorer
3. Safari
4. Google Chrome
5. Opera
6. Netscape
CSS Hacks:
I always hesitate to share this with anybody, as few days back my colleague came with some cross browser compatibility issue. So I gave her some solution to sort it out. But later I saw that every where she has used the same concept to make it working. That is not gonna work if you tend to use a lot of hacks with the css as according to W3C it wont make your css valid.
Even then these are some tips for CSS hacks
1. For IE
<!–[if IE ]>
<link href=”iecss.css” rel=”stylesheet” type=”text/css”>
<![endif]–>
2. IE 6 Hack:
*html{
width:200px;
}
3. IE 7 Hack:
_html{
width:200px;
}
4. IE 6 !important Hack:
.classname{
width:200px !important; // IE 6 will skip this line
width:220px; // IE 6 will take this width
}
Cross Browsing Tools
These are some of the cross browsing tools that are very useful for checking compatibility
1. IE Tester.
2. Browser Shots.
3. Browser Camp.
What is CSS Hack?
Posted on: December 23, 2008
- In: CSS
- Leave a Comment
CSS hack the name itself says hiding something from someone, that is hiding CSS Rules from specific Web Browser.
Some example of CSS hack..
.container{
font-family: Verdana,Arial;
font-size:11px;
padding-top:5px;
}
If you are using the above container class and you want there shouldn’t be any padding-top in IE then the following code would do for you..
.container{
font-family: Verdana,Arial;
font-size:11px;
padding-top:5px;
*padding-top:5px; //hides from IE
}
The * indicates the browser to hide that attribute and you get the result.
Mywebdunia's Blog 