NOTE: This is an older article that targets IE6 and IE7. IE8 now supports many of the properties and property values listed below.
In a previous article I described 10 useful, cross-browser, CSS properties that might often be forgotten, but can really come in handy in specific situations where a solution is needed.
But not all CSS property names are that friendly. In this post, I’ll describe 10 properties that can be quite useful but have little or no support in Internet Explorer.
1. Outline
Often during the debugging of a CSS issue, I’ll put borders on specific elements to see exactly what’s going and help determine the source of the problem. This usually helps, as it gives me a more specific visual of the layout, which otherwise may be hidden. But if block-level elements with specific widths and heights are at fault, adding a 1 pixel border around any of those elements will affect the layout, making the bordered elements 2 pixels wider/taller.
The outline property is the perfect replacement, because it outlines an object without affecting the document flow. But Internet Explorer versions 6 and 7 do not support the outline property, so it cannot be used to debug issues that are specific to those browsers.
2. Inherit (value)
There are many instances in CSS development where you can avoid quite a few keystrokes by overriding specific styles set on a particular element by telling that element to “inherit” the styles of its parent for any given property.
This is easily accomplished by giving a property the value of inherit. This could come in handy, for example, when overriding the background property, which will often have quite a bit of text in it (a color value, a url pointer, position, etc). So, instead of having to rewrite those values, you may just want the element in question to have the same background as its parent. A value of inherit will accomplish this, potentially saving some keystrokes.
Unfortunately, the value inherit is not supported in IE6 and IE7 except when used for the direction and visibility properties.
3. Empty-Cells
This property only applies to table elements, or elements that have their display property set to table-cell. If you’re populating a table dynamically, there could be an instance where a particular table cell has no content and you may not want the borders, background color, or background image on the empty cell to be visible.
Use empty-cells: hide, and this will resolve this problem for any table where this could potentially occur, hiding the empty cells.
Internet Explorer does not support use of the empty-cells property.
4. Caption-Side
On the subject of table properties, this property is used to declare what side of a table a table’s caption is displayed on. It accepts values of top, bottom, left, and right. Internet Exporer does not support the use of this property, so the table’s caption will always appear at the top in versions 6 and 7 of that browser.
5. Counter-Increment / Counter-Reset
Ordered lists are very handy, because they save you the trouble of manually entering incrementing numbers on lists of items, and they allow you to change the order of the items without having to change the numbers.
CSS includes the counter-increment and counter-reset properties, which allow you to apply automatically generated incrementing numbers to virtually any set of HTML elements, similar to how ordered lists produce generated numbers.
Here is an example:
h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}
The above CSS will add an automatically incrementing number before all <h2> tags on the page, allowing you to have the same flexibility on your <h2> tags as you would on the <li> elements inside of an ordered list.
But IE6, IE7 and even Safari (up to version 3) do not support the use of these properties.
6. Min-Height
Sometimes, the design or layout structure of a site requires that the content area be a specific height, at the least, otherwise the intended visual effect is lost. This can be due to a gradient background, a unique drop shadow, or possibly a lighting effect done in Photoshop. But sometimes content on one or two pages is small, and the page doesn’t expand as required.
This is where the min-height property comes in handy, because it tells the browser to render a particular block-level element to a minimum height, regardless of actual content. Then, if the content is larger than the minimum height, the element will expand accordingly.
The only caution with min-height is that it has no support in IE6. We all know IE6 is (slowly!) on the way out, but a client may still require that their site be operational in that browser version.
Happily, IE6 renders the height value the same way that other browsers render “min-height”, so all you need is an IE6-only hack or separate stylesheet that applies a specified height to the element, and the problem is solved.
IE6 also ignores min-width, max-height and max-width, but no easy workarounds are available.
7. :hover
Technically, :hover is a pseudo-class, but is worth mentioning because of its limited support in IE6. The :hover pseudo-class allows you to apply different styles to elements when the mouse is moved over them. This can be quite useful, avoiding the need (in some instances) to use JavaScript or CSS Sprites for rollover effects.
But if the site you’re developing requires full support in IE6, then you will want to avoid using hover on anything except an <a> tag that has an href attribute.
8. Display
Display is usually used when setting one of three values: block, inline, and none. Thanks to Internet Explorer, other useful values for the display property are rarely used. Those values include inline-block, table, inline-table, and table-cell — each of which could come in handy to resolve specific layout issues.
So, although IE does support the three basic values for display, it provides little or no support for the others.
9. Clip
This is an interesting CSS property that could come in handy in a specific situation, possibly in conjunction with dynamically generated content, which can be unpredictable. Basically, this property allows you to specify invisible areas on a particular element. The syntax looks like this:
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px, 300px, 200px, 100px);
position: absolute;
}
Clipping can only be used on an absolutely positioned element, and can only use the rectangle shape. The dimensions provided inside the parentheses create the “visible” area, making everything inside the element that falls outside those dimensions invisible, or “clipped”.
Technically, the clip property is supported by IE, but only when you use comma-less syntax for the dimensions, like this:
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px 300px 200px 100px);
position: absolute;
}
The above CSS will work across most browsers, but will not qualify as valid CSS, as the syntax without commas is deprecated.
10. :focus
This is another pseudo-class that deserves mention on this list due to the fact that it is fully supported in every browser except Internet Explorer. The :focus pseudo-class allows you to declare specific styles to apply dynamically to a page element when that element receives keyboard focus. This can be useful on a form, as you can add a border to an input element when it is selected, or “focused” by the user.
The following code will add a red border to an input element that is given keyboard focus:
input:focus {
border: solid 1px #f00;
}
That’s it for this list, I hope you enjoyed it. I certainly learned a lot while researching this information, so I hope it helped you as well.
list-style-image for lists – forget about using that in IE6 or 7.
Although it seems to be okay on IE8
I wasn’t aware of the counter-increment property, which makes sense is quite handy in some situations, for example, writing articles.
I think more and more we web designers should just face the fact that some users will not have the same improved experience when using certain browsers, and explain to our clients as best as we can why not.
In some cases, when it affects the experience to a greater extent, we have to deal with the fact that it has to work cross-browser, but for other cases, like the counter-increment property, I wouldn’t think it’s a show-stopper.
Thanks for the list!
WRT #6. min-width in IE6
If you need to set a min-width on body for IE6, (perhaps if you were using a liquid layout, and wanted to prevent the site collapsing at narrow widths) using an CSS expression does the trick:
body {width:expression((d = document.documentElement) && (d.clientWidth < 960 ? “960px” : “auto”))}
You’d probably want serve that via a conditional IE6 style sheet, but seems to work quite well as a min-width replacement.
Just ten? What are you, publishing this article in installments?
Just kidding, good information here. Thanks, good job.
Thanks for the interesting article. I use the :hover and :focus pseudo-classes quite often in my designs because I work almost entirely in Firefox (but what designer doesn’t, right?), and it’s definitely frustrating that IE doesn’t render them properly. Another one that really bugs me is how IE doesn’t support the border-radius properties if you wanted to specify rounded corners in your CSS. Naturally, they work fine in Firefox.
@Addicott Web:
Thanks for your comment. I believe “border-radius” is CSS3, and is only available as a proprietary property in CSS2. I did not include proprietary stuff on this list, and didn’t factor in CSS3, which I probably should have mentioned. :o)
Thanks!
@AndyW list-style-image works fine for me in ie7, don’t know about ie6 though. Don’t care either.
Not having :last-child is annoying too, especially since they support :first-child.
thank you ..
agree!! can’t understand why some people still using ie
useful post. thanks
I agree with @Kyle. Not having the last-child pseudo class is SO annoying.
While IE8 (and FF and Chrome and Safari) renders them correctly, IE6 and IE7 completely ignore display: table and display: table-cell — which is a shame, because assigning these to divs allows the creation of valid scaling columns (no more need for the faux columns technique)
#6 Min Height
This might be of interest to folks
http://www.dustindiaz.com/min-height-fast-hack/
Useful article – thanks for sharing
Cheers for the article, was good to see in one place all the pitfalls of certain styles when you need to support IE6/7. Thankfully there are fewer and fewer people browsing on IE6 and it seems to be almost at the point where you can forgo supporting it. Soon… soon… haha
Re: #7 – Remember that even this does not work in IE 6:
a:hover span {…}
(You need something on a:hover as well – and then only certain properties.)
Re: # 10 – :active in IE 6 works like :focus… more or less.
Great article; I wish I’d seen it years ago when I was first starting to design and was having issues with IE. Being a Mac user, it’s a bit harder to troubleshoot, but I finally found a pretty decent plugin for Firefox that was recently released in order to help troubleshoot these problems. (can link if you’d like, but I don’t want to appear spammy).
The other issue I’ve had with IE is its refusal to respect the transparency on PNGs (though UnitPNG or whatever the jQuery one is that works really well that I prefer), as well as min-width, which is essentially the same as min-height except it’s a bit trickier to work around.
A problem I’ve encountered recently with table captions is that i can’t seem to apply positioning to it. For example, to hide things on my site, I usually use:
caption {
position: absolute;
left: -1000px;
top: -1000px;
}
All other browsers make the caption disappear, but not IE7. Anyone know a solution to this?
stupid Internet Explorer.
it’s kinda sad that it is designers and developers (myself included) who have provided support for IE6 browser compatibility are the ones that are sustaining the browser (and coding practices) that they hate. Collectively designers could kill IE6 faster if they stopped developing for it. And furthermore cut off access unless the user meets specific browser standards.
you are jsut trying to remind me of things that upset me aren’t you? (hehe)
Great article… always good to have a reference to remind me what I should be able to do but can’t because of our lovely friend IE6 – the distant cousin that no one likes.
Thanks mate.
nice article.. but i Hate IE.. get out this from our web design world… gurrrrrrrr
I found out that min-height/ outline, etc, work for IE 8, only if you provide a doctype i.e. the document is NOT in quirks mode
I agree with @Kyle. Not having the last-child pseudo class is SO annoying.
agree!! can’t understand why some people still using ie
wery good site..
I stumbled across this article and it’s pretty good. Fortunately, at this point in time, support for IE6 and IE7 can be dropped completely. The ridiculousness of these two browsers makes that a necessity for good design. IE8 has it’s share of issues, but it at least supports the most basic CSS. One thing that some some people should note is that IE8 for windows XP is not the same as what came with Windows 7. There are actually about 6 different versions of IE8. There is a patch release that fixes some of the bugs in the Windows XP version. Otherwise, certain websites won’t function correctly. I’m currently testing my sites with the non-patched Windows XP version for maximum compatibility and have completely dropped support for IE6 and IE7. I’m probably going to have a message come up when those browsers detected.
Official support for IE 6 and 7 may have dropped completely, but we still have to support IE7 due to slow-to-upgrade clients.
So here’s another old-IE fix: When you use “display: inline” on a block element like “div” tags, it gets treated as though you had specified “inline-block”