Written by me@grafxflow
11 Aug, 2010
0
1,512
Just a nice little work around I found out about for ie6 and CSS integration and helps get around CSS validation.
Here is the scenario, I have a button in png format but I have also created a gif version for ie6.
At first the CSS used the underscore (_) solution. Simply put, major browsers other than ie6 and below respect the first line and show the Button.png, but ie6 would see the second and use the Button.gif. Problem is it does not pass CSS validation.
DivContainer {
background-image:url("Button.png");
_background-image:url("Button.gif");
}So to sort this out use the !important as follows and delete the underscore. This works exactly the same as above and passes CSS validation.
DivContainer {
background-image:url("Button.png") !important;
background-image:url("Button.gif");
}Just updated this post to show that there is another trick in CSS target both IE6 and IE7 and that is using the asterisk (*) key.
DivContainer {
width: 146px;
*width: 150px; /* For IE7 and IE 6 */
}Another way to target IE9 or below
DivContainer {
width: 146px;
width: 150px\9; /* For IE7 and IE 6 USING \9 */
}
I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!
Follow
11 Jul, 2023
21 Jun, 2023
Views: 166,339
Views: 40,317
Views: 37,063
Views: 33,610
