I am using the micro clearfix hack on a website I am developing. It works fine but I have one question about it; that I was hoping someone could clear up for me.
On the above webpage, the clearfix hack contains:
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Obviously just adding that to my css triggers a warning because of the *. How exactly do I include the above rule to trigger hasLayout? Do I simply remove the *? Or is there a way to include an if IE 6/7 within a stylesheet itself?
I wasn't exactly clear on if I should remove the * or just paste the code as is.
Thanks in advance.
Or is there a way to include an if IE 6/7 within a stylesheet itself?
Use the IE6/7 media query:
#media, { .cf { zoom: 1 } }
References
Sitepoint CSS Reference: #media
Related
What does the star do? What is it called? For me it is some kind of wild card. What is it called so I can read about it?
#div {
*zoom: 1; /*this ... *
zoom : 1;
display: inline;
*display: inline; /*... and this, whats the difference? *
}
I know what this means (all elements):
* {
..css code
}
In simple words, its the key to target css on different IE browser versions. It can also be called as an CSS Hack.
#div {
*zoom: 1; /*Only works on IE7 and below*/
zoom : 1;
display: inline;
*display: inline; /*Only works on IE7 and below*/
}
Means this CSS works only on IE7 and below. It's kind of a hack we can use to apply CSS on IE7 and below.
Here is how to target IE6, IE7, and IE8 Uniquely
#div{
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
CLICK HERE if you want learn more about browser specific CSS.
star-property hack The IE family ignore the *, however, and apply the property without it.This hack is used in order to deliver style rules only to Internet Explorer 7 (and lower). It relies on a wrong DOM implementation that affects Explorer since 1997. According to the specifications, the actual root element of any well-formed (X)HTML document is the html element. Instead, Explorer 7 (and lower) considers the html element as wrapped in another unknown element.
*property: value
Although Internet Explorer 7 corrected its behavior when a property
name is prefixed with an underscore or a hyphen, other
non-alphanumeric character prefixes are treated as they were in IE6.
Therefore, if you add a non-alphanumeric character such as an asterisk
(*) immediately before a property name, the property will be applied
in IE and not in other browsers. Unlike with the hyphen and underscore
method, the CSS specification makes no reservations for the asterisk
as a prefix, so use of this hack could result in unexpected behavior
as the CSS specifications evolve.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
In your context it seems to be the star hack. It does that property only applies in some versions of IE, depends of its use.
You could retrieve more info here.
What does the * in css? -> Selects all the elements after specified elements for eg. div.red *{color: red;} will result all color red after its class red even if you define the other color inside div.red hence you know * means ALL
See This Fiddle
* zoom: 1; -> here you have placed * at first, so this would hack IE only that is this type of style works only in IE and other browsers neglect this.
* it is called asterisk in simple language and in coding language this is called Universal Selector
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
*:first-child+html .clearfix{zoom:1px;}
What does this do? It was turning everything into 1px in Internet Explorer 7. This was in my WordPress theme's style.css (designed by ElegantTheme). What is it suppose to do? I think it's a bug in Internet Explorer that's causing it to render incorrectly.
That gives layout to all .clearfix elements in IE7 using the non-standard zoom property, so that layouts fall together properly where IE7 otherwise wouldn't make them.
The *:first-child + html selector, or simply * + html, exploits IE7's delusion that there's some element that comes before html. It is a hack.
I think the declaration should have read zoom: 1; instead of zoom: 1px;.
I just ran into what seems like absurd behavior to me. If IE8 doesn't understand part of a rule it ignores the entire thing:
input[type=radio]:checked,
input.checked {
/* Some CSS */
}
I already have IE8 specific JS adding the .checked class, but because it doesn't understand :checked, it ignores the entire thing, so I'm forced to now have several rules:
input[type=radio]:checked{
/* Some CSS */
}
input.checked {
/* The exact same CSS */
}
So my question -- does anyone know of a way to get IE8 and below to ignore the :checked instead of throwing out the entire rule?
Very basic example: http://jsfiddle.net/8UT56/
You can use a library like http://selectivizr.com/ to give IE newer selectors.
I know how to target IE, but that's only in HTML (which means I need to create another CSS file for IE bugs). Is their anyway, how I can implement the fixes in the same CSS file. This mean I target IE with CSS code?
You can do with these hacks
For example:
selector {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
There is no equivalent to conditional comments/code in CSS. The only thing you could do there are the old CSS hacks -- that people struggled with before conditional comments became known.
You can make CSS hacks work, for a bit, but it's not a smart or robust approach.
Recommended approach:
Always start with a CSS reset. Here's a good one: http://meyerweb.com/eric/tools/css/reset/reset.css
If at all possible, get your boss or client to realize that IE6 support is not cost-effective.
Design HTML and CSS with an eye for IE bugs, as much as possible. EG, float-problems, height and margin problems, etc.
For those few things that still need different CSS in IE, putting them in a conditionally-included, separate CSS file really is the simplest, most robust approach. The bonus is it doesn't penalize decent browsers one bit.
In your CSS code, precede your selectors with something that only IE will recognize. Examples of selecting <div> elements in IE6 and IE7:
IE6 only: * html div
IE7 only *:first-child+html div
A comprehensive list can be found here: http://paulirish.com/2009/browser-specific-css-hacks/