#parent div { float:right; }
#parent > div { float:right; }
Most importantly:firefox and IE
No. Some browsers don't support CSS at all (lynx for example).
The glib answer aside, among browsers you probably care about, the child selector is not supported in Internet Explorer 6.
See this chart:
#parent > div is supported by ALL browsers EXCEPT IE6.
See Quir}{smode's master compatibility table for answers to all these types of questions.
Click here for the CSS Compatibility table
Related
1.I have the following class in CSS file
.dashboard-area {
width:1200px;
}
I havethe above code / css class wil be included in IE8 browser instead of all browsers. I do not need to give this as separte CSS and makes the thing like. how can I give conditon in CSS code itself to execute in IE browser only.
IE8 css selector
2.border - radius not working in IE8 browser but working in all other higher version of IE.
how can I implemeent "border-radius" to work in all browsers of IE (7,8,9).
Thanks,
You shouldn't do this but you can target IE8 with this:
#media all\0 {
.someSelector {
color: brown;
}
}
Or
.someSelector {
left: -8px\0;
}
IE8 doesn't support border-radius http://caniuse.com/#feat=border-radius but you could use a polyfill like css3pie to achieve it.
Regardless I recommend you to use conditional comments
I am developing a HTML page in which we have a table having <thead> tag used for the header section. Now I want to fixed this header section always on top. Following is the CSS code which I am using:
thead tr {
position:relative;
top: expression(offsetParent.scrollTop);
}
However, this is only working in IE8. It is not working in IE9.
So how can we achieve the same in IE9?
Thanks in advance!!!
The expression function is an old IE-only feature that Microsoft has abandoned and doesn't support anymore in newer IE versions.
You should look into position: fixed instead. (However IE6 doesn't support this, but there are workarounds available, that are easily googled if needed.)
expression is only for oldie IEs, that's why it fails in IE9. To fix a div in a cross-browser way, use this snippets instead:
#div{
position:fixed;
/*The followings are for Oldie IE*/
_position: absolute;
_top: expression(documentElement.scrollTop);
}
I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.
Are there valid hacks in IE6 and 7 for W3C compatibility?
I believe there are W3C incompatibilities when using hacks. For example, using the following CSS code (as suggested under option 2 in this article: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer?cp=1):
.box {
height:200px;
_height:200px;
}
gave me the following error in the W3C CSS validator:
Property _height doesn't exist : 200px 200px
If I'm wrong please advise.
Thank you.
This alternative hack should do it:
/* Both of the following will be used by IE only. */
* html .box{height:200px;} /* IE6 only */
*+html .box{height:200px;} /* IE7 only */
Options 1 and 3 in that article — i.e. HTML conditional comments — are the way to go. They don’t trip up the HTML validator, and they’re explicit — they say “use this code for this version of IE”.
You can use them to apply different stylesheets that only fix Internet Explorer bugs. This keeps your IE bug workarounds separate, so that when, for example, the IE6 countdown reaches zero, you can remove your IE 6-specific CSS without affecting anything else.
I already know: "Don't use css expressions!" My question is not about whether I should be using an expression or if there is an alternative; my question is simply: Can I get a css expression to only be evaluated in versions of IE prior to version 7 without using conditional comments?
I occasionally use an underscore hack to hide a rule from IE7 but IE7 seems to evaluate expressions anyway. For example, _width:700px; is ignored by IE7 but _width:expression('700px'); is still evaluated.
I know that someone will try to tell me to just use a conditional comment to include the rule, but I am looking for a way to do this without placing a single style rule into a separate file.
A note for those of you who still don't want to let it go: I've chosen to use a css expression, but I didn't do so lightly. I understand the implications and I am using an expression that only evaluates once. Stop worrying about my bad decisions and just answer the question already... ;-)
I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).
/* IE6 only */
* html .myClass {
width: 500px;
}
I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.
As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.
You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.ie6 {
display: none;
}
* html .ie6 {
display: expression("block");
}
* html .ie7 {
display: expression("none");
}
</style>
</head>
<body>
<div class="ie6">
This is IE6
</div>
<div class="ie7">
This is Firefox or IE7+
</div>
</body>
</html>
You don't have to use conditional comments to add a new file. You could easily add a conditional comment to add a class to the body tag, as follows:
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gt IE 7]>-->
<body>
<!--<![endif]-->
Then in your CSS you can simply define a different style for IE7 on any element you like:
#content {
width:720px;
}
.ie7 #content {
width:700px;
}
You still load the same stylesheet, but you can style elements based on their browser.
You could even extend this to have differnt styles for IE6, 7 and non-IE browsers.
You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:
.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}
I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.
If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)
#myDiv {
height: 3.0em !important; /* non-ie */
height: 2.6em !ie-only; /* ie7 */
height: 2.4em; /* ie < 7 */
}
This answer may be what you are looking for:
In-line CSS IE hack