Does anyone know why the following CSS code is not working on IE8, and yet it's working on EVERY OTHER browser?
table.wrap tr:first-child td, table.wrap tr:last-child td { height:20px; }
table.wrap td:first-child, table.wrap td:last-child { width: 20px; }
I understand that IE8 does not support CSS3 features. But I don't think I'm using CSS3 here.
I sincerely appreciate your help.
Thank you so much!
See Quirksmode.org for a full compatibility chart of all CSS features across all the various browsers.
As you'll see from the link above, IE8 does not support the last-child feature.
It does support first-child, but since you've put them together in the same selector, it will throw the whole thing away because it doesn't recognise the last-child part.
Also note note that Quirksmode first-child as being buggy in IE8, so even though it is supported, you may want to be careful about using it.
To solve the problem, you might want to try an IE hack to get it to support extra CSS features.
One that looks quite good is Selectivizr. You might also want to look into Dean Edwards' ie7.js / ie8.js / ie9.js. Both of these aim to patch missing features into older versions of IE. They're not perfect, but they may resolve the problem for you.
Hope that helps.
IE isn't compatible: http://reference.sitepoint.com/css/pseudoclass-lastchild
I believe last-child is a part of css3 and not supported by IE8.
Related
My skin has the following CSS:
dl.definition dd:last-child {
margin-bottom: 0;
}
/* IE class */
dl.definition dd.last-child {
margin-bottom: 0;
}
Is it possible to combine these into one even though the second is just for IE ?
Thanks everyone for the answers but I am not sure anyone really said if I could just do this:
dl.definition dd:last-child,
dl.definition dd.last-child {
margin-bottom: 0;
}
Your hoped-for solution won't work:
dl.definition dd:last-child,
dl.definition dd.last-child {
margin-bottom: 0;
}
The reason this won't work is because as far as old versions of IE are concerned, dd:last-child is an invalid selector, and thus it will throw away the whole block. It doesn't matter that it also contains a valid selector; the whole thing is thrown away because of the invalid one.
A few options on how to improve things, and save yourself the hassle of duplicated code all over the place...
Upgrde IE. There are javascript libraries available such as Selectivizr or ie7.js/ie8.js/ie9.js which patch IE to make it support more CSS selectors. :last-child is included in pretty much all these libraries.
Downgrade your CSS. You're already writing the .last-child class into your code to support old IE versions, so just use that for everything and forget about using the :last-child selector. Then you only need one selector for all browsers.
Graceful degradation. Drop the IE-specific code, and just allow Old IE users to see a slightly broken page. As long as it doesn't affect usability, it may not be a big deal. You may not have that many old IE users (and the numbers will continue to fall), and those people who are still using old IE are used to seeing sites that are slightly broken (or worse) these days.
Re-arrange your layout to use :first-child instead of :last-child. :first-child has much better support (it goes back to IE7, though there are bugs with it in old IEs).
Use a CSS compiler like SASS or Less, so you can write your CSS in a more logical and structured form, before converting it to real CSS code when you deploy it to the site.
Hopefully one of those solutions will work for you. My suggestion would be the Selectivizr library, but any of the above should provide a workable solution for you.
In the HTML add
<!--[if IE]>
<style>
dl.definition dd.last-child {
margin-bottom: 0;
}
</style>
<![endif]-->
Not an exact answer to your question but a workaround for IE6 & IE7 can be found here which tells that you can use properties in single css file.
This gives again a more sophisticated solution.
And again you can use multiple properties in single css file and browsers will ignore it if it does not understand it. Cheers to growing smartness of browsers. :-)
Conditional comments for IE. You can specify verion of IE, for that you want to select CSS
While reading the CSS code of Twitter bootstrap, I noticed that some elements have a CSS rules with a * at the beginning. For example:
.row-fluid {
width: 100%;
*zoom: 1;
}
Why is this technique being used?
Ignore posts about * being an "everything" selector, as it is, but that isn't what it is in this case.
Putting * before an attribute allows you to target ie7 and below. This is an old hack that shouldn't really be used as you can target ie7 and below in better ways.
Quick explanation of how to target older IE versions. If you read to the bottom you will see he explains that it is better to use conditional comments than hacks, as they are after all, hacks.
The asterisk is a hack for IE6 and IE7.
see: http://paulirish.com/2009/browser-specific-css-hacks/
In this case, I think is a hack for ie6/7
Does anyone know which browsers/version support them?
Is it safe to use them, or should I resort to PHP / javascript to generate first/last classes?
:first-child and :last-child, along with complimentary compatibility chart.
:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).
:last-child is supported by IE9+ only.
Both of them are supported well by the good browsers.
"Can I use..." should be your go to resource for these types of questions. Here's are the compatibility tables:
first-child - http://caniuse.com/#feat=css-sel2
last-child - http://caniuse.com/#feat=css-sel3
Here's a nice table illustrating different browser support.
Is there any Inheritance problem with <table>, tr th td tbody thead tfoot also like form elements?
In IE 6+ and FF 3+ with Strict doctype.
Tables also have inheritance turned off in some browsers. You may
notice that in some browsers, your
tables’ text will be larger, clunkier
and not so pretty. This is also due to
inheritance. Many browsers give tables
their own style.
It's mentioned here http://www.komodomedia.com/blog/2006/10/css-trickery-part-5-inheritance/
For which browsers author is talking about, it's not mentioned
I tested on FF 3.6 and IE7 but unable to find is there any issue.
I just wanted to be sure before adding this in my CSS reset. Do i really need this?
table {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
I found a reason here http://meyerweb.com/eric/articles/webrev/199903.html
And it's problem only in
Internet Explorer 4.x for Windows, or
Navigator 4.x on any platform.
here also http://archive.webstandards.org/css/winie/#Inheritance_breakdown_within_tables
I've found some references to bugs or issues in IE's interpretation of CSS, but the information seems rather scattered. I'd like to have a pointer to a comprehensive overview, if such an overview exists.
edit: it's already something that Microsoft is willing to list IE's CSS problems (thanks mouviciel->sanchothefat), but they're not going to offer workarounds, obviously. So workarounds would be nice too.
Thanks
Check out Quirks Mode. It is a great resource for CSS compatibility across browsers.
I find the best policy to avoid pain is to follow these rules:
Build in a more-compliant and developer-friendly browser like firefox first, test thoroughly in IE (and safari/chrome(webkit) and opera) later
Use a strict doctype- avoid quirks mode, since quirks are by definition not standard
Use a reset style sheet
Use a javascript framework like jQuery or Prototype - they can hide some javascript and DOM incompatibilities.
Use good semantic layout- it's more likely to degrade nicely for a mis-behaving browser
Accept that it won't be perfect and don't sweat the really small variances
Follow those rules I don't have as many problems in the first place.
Me, I use the "Internet Explorer Exposed". Very in-depth resource.
I find myself constantly referring to this page:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
You may find some answers by consulting this SO question.
For dropdownlists:
<select>
<option value="1">1</option>
...
<option value="N">N</option>
</select>
CSS border styles do not work:
If you'll try:
select
{
border: solid 1px #0000ff;
}
nothing will happen.
Also a submit button will expand its width proportionally to the button text, until you give it the style:
input[type="submit"]
{
overflow:visible;
}
As well as many other funny things. :)
I swear by PositionIsEverything.
They maintain a list of bugs/oddities in most browsers. Check out their exhaustive list of Internet Explorer bugs, I hope you find it comprehensive enough.
quirksmode has already been posted, but I'll add On having layout, which explains one of the principles underlying many of IE's oddities.