Before we get into the issues that plagued the sites in our study, let’s quickly take a look at one that didn’t. “Why bother?” you might say. Well, if your site’s breaking in IE7, then this is the first problem you should attempt to rule out.
Put simply, if you’re using JavaScript or server-side logic to serve different styles to different browsers, you need to make sure that you’re not inadvertently excluding IE7.
How might you be excluding IE7? Well, perhaps you’ve written a script that applies one set of styles when your pages are viewed in IE6 and another set of styles when they’re viewed in all preceding versions of IE. This would have worked nicely in the past, but now that IE7 has arrived it will cause you problems. Why? Because while you’ve specified what would happen in IE6 and earlier, you’ve forgotten to specify what would happen in later versions of IE - later versions like IE7.
If you find that this is the cause of your IE7 problems, the short-term solution is simply to extend your script to target IE7 with a new set of styles. In the long term however, you might want to take a look at an alternative solution.
Browser detection is notoriously problematic: using JavaScript to sniff the browser will only work when JavaScript is enabled in users’ browsers, while parsing the User-Agent String (via JavaScript or server-side code) can prove to be even more unreliable due to “User agent spoofing“. In short, browser detection is not a very robust solution.
The only reliable method of detecting IE going forwards involves the use of conditional comments. This is the only method that Microsoft guarantees that it will support over the long-term. Conditional comments have been available since IE5 and, despite being proprietary, are valid forms of HTML/XHTML markup - other browsers simply ignore them since the syntax of these statements is based on regular HTML comments.
The disadvantage of using conditional comments is that they clutter up your HTML files and require you to keep multiple stylesheets (rather than a single centralised resource). Wouldn’t it have been better to have made conditional comments part of CSS and not HTML, Microsoft?
Examples
MSDN has more information about conditional comments here.
I have nothing to declare except my XML-ness
Having sorted out any IE-detection-related issues, the next thing to check is the first line of markup on your problem pages. The first line on both the Alliance and Leicester and Lastminute.com homepage - two of the most badly broken homepages found during our study - read as follows:
For the uninitiated, this statement is an XML declaration (not to be confused with an “XML prolog” which is the combined total of an XML declaration and a DOCTYPE declaration); its purpose being to tell the browser which version of XML your XHTML pages complies with and (optionally) to specify the type of character encoding you’re using.
The W3C says the following about XML declarations:
“An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents…”
So you don’t have to use them, but they’d like you to. And as a result of this “strong encouragement”, many well-meaning would-be standardistas have added them to their pages with the commendable aim of achieving the highest possible levels of compliance.
Unfortunately, several older browsers can’t handle XML declarations. In fact, they have a nasty effect on them. As Jeffrey Zeldman puts it in Designing With Web Standards, “after imbibing the XML element, they stagger and stumble and soil themselves, bringing shame to their families and eventually losing their place in society”. Some crash as a result, others display nothing. IE6 does something a little more subtle: it ignores your DOCTYPE.
As you know, browsers use the DOCTYPE to toggle between rigorous standards-compliance mode (called strict mode in IE) and fault-tolerant, backwards-compatible quirks mode (so called because it mimics the quirks of various old incompliant browsers that most old websites were designed for). In most modern browsers, a valid XHTML DOCTYPE (complete with full URI) results in pages being rendered in standards-compliant mode, treating your XHTML and CSS content in accordance with the relevant W3C specifications. And IE6 is no exception. Unless you stick an XML declaration in front of it.
In IE6 the DOCTYPE must be the first line in your XHTML file. If it isn’t, your request for standards/strict mode will be ignored and quirks mode will be used instead (Opera 7 does the same). This means that you get IE’s original (read: erroneous) interpretation of the box model and a number of other “features” that don’t align with the W3C specs.
In IE7 however, this bug has been fixed. IE7 therefore doesn’t care whether your DOCTYPE declaration is preceded by an XML declaration or not - either way, it gives you strict mode… and therein lies a problem. If your page starts with an XML declaration you’ll get quirks mode in IE6 and strict mode in IE7. You can verify this yourself by typing the following line of JavaScript into the URL bar of both browsers after your web page has loaded.
javascript:alert(document.compatMode);
In IE6, you’ll see a dialog box displaying the word “BackCompat”, meaning that it is in quirks mode. While, in IE7, you’ll see “CSS1Compat”, meaning that it’s in standards-compliant strict mode. This discrepancy explains the inconsistencies you’re seeing in the two browsers’ displaying of your pages.
How do you fix these inconsistencies? I’d recommend removing your XML declarations, so that your pages render in strict mode in both IE7 and IE6 - and then reworking your styles, so that your pages look identical in both browsers.
“Remove my XML declarations? Is that legit?” Yes. Firstly, they’re optional - see the quote from the W3C above - so omitting them isn’t a crime. Secondly, unless you’re part of a very small minority of developers, you probably aren’t serving your pages as XML anyway. Check the head of your document - do you see markup like this?
If you do, guess what, you’re serving HTML, not XHTML (actually, you’re serving HTML compatible XHTML1.0, but let’s not get picky), regardless of what your DOCTYPE says.
You’re only serving true XHTML if you see application/xhtml xml in place of text/html in your version of the above. And this isn’t recommended for most purposes (at least, it isn’t recommended for now) as application/xhtml xml isn’t supported by the majority of browsers. (IE, for example, will ask you if you want to save these types of documents, rather than displaying them as web pages).
Furthermore, newer browsers may opt to validate your markup if you include an XML declaration and specify a Content-Type of application/xhtml xml. This could be disastrous if parts of your pages are inserted dynamically from a content management system. As you won’t have control over the content in the CMS, you won’t know whether it’s 100 per cent XML-valid or not. And if it’s not 100 per cent XML-valid, the newer browsers will likely choose not to display it. (Let’s face it, in the real world you can bet your life it won’t be XML-valid - the combination of CMS and business user doesn’t often produce solid markup!).
If you’re serving your XHTML as text/html however, you can at least rely on browsers displaying your content as you intend (although if you’re going to stick with dishing up text/html, you may be better off slashing the X off XHTML and switching back to plain ol’ HTML - but that’s a discussion for another day).
“But wait!” I hear you say, “I can’t get rid of my XML declarations because I need to specify a character encoding!” Don’t panic. You can still get rid of the XML declarations, just update the Content-Type element in the head of your documents instead. For example, if you want to specify an UTF-8 encoding to keep your international user-base happy, simply insert:
Thinking outside of the (old) box model
If you’ve addressed the previous issues, and you’re sure that your pages are being displayed in strict mode in both IE6 and IE7, your problems might stem from IE7’s updated handling of the CSS box model.
The update is best explained by example. Imagine that you’ve created a box with a width and height of 100px. Now imagine that the content you’ve placed within it is wider and taller than 100px. What should happen? Well, in IE6, the box will automatically stretch to fit around the content (or at least it will as long as the box keeps its default overflow value of visible). This sounds like a good idea, because it looks messy when content bleeds across a box’s borders. However, this isn’t the behaviour prescribed by the W3C’s CSS2.1 specification (and with good reason).
The CSS2.1 spec says that the width and height that you specified for the box should be honoured at all costs if the box’s overflow property is set to visible (its default setting). If the content within the box is wider and/or taller - causing “overspill” - well shucks, you should have created a bigger box then, shouldn’t you?
Why does the spec recommend such behaviour? Well, automatically expanding boxes have a knock-on effect on the other elements placed around them. So if your 100px-wide box suddenly becomes bigger it will displace the elements around it. The result: a fractured page layout.
In ensuring that heights and widths are honoured where specified, developers are given complete control over their page layouts. If you want a box that’s 100px wide, state that in your stylesheet and you’ve got it. If you want one that expands and contracts in accordance with the size of its contents, leave its width set to auto and overflow set to visible and it’s yours. For even more flexibility, you can use min and max settings.
The release of IE7 sees IE’s box model updated to adhere to the CSS2.1 specification - thereby creating inconsistency between IE6 and IE7 in strict mode. So, if you’re finding that your content is bursting out from its containing box, this could be the problem. (It certainly played a part in breaking BHP Billiton and Teletext Holidays‘ homepages in IE7).
Filtering out the filters
A number of the hacks and filters used to target IE no longer work in IE7. These workarounds took advantage of various bugs and unimplemented parts of the CSS2.1 specification to either hide styles from IE while having other browsers apply them; or to apply styles in IE while hiding them from other browsers. Here are the ones that are affected:
The star html filter (aka The Tan hack)
The star html filter is used to apply CSS rules in IE, while hiding them from other browsers. It is most commonly used to address the aforementioned box model problems in IE5, IE5.5 and IE6 (Mac and Windows versions).
During our study, we found that sites like Woolworths, UpMyStreet.com and Lastminute.com were using this filter (as part of the Holly hack) to address the Peekaboo bug in IE6. British Energyand O2 also used it to address layout inconsistencies.
The filter works by exploiting a bug in the way that the older versions of IE interpret the “star” - or “universal selector” as it’s officially known. The CSS2.1 spec says that the universal selector should match all descendant elements in the document tree (think of it as a wildcard). Combining the star with html to make * html is the equivalent of saying p html, body html or div html (or indeed [any other html element] html). This is clearly illegal as html is always the root element in a document and as such can never be the child of any other element.
Most browsers recognise * html as illegal syntax and ignore it (along with its accompanying declaration block to boot). IE5, IE5.5 and IE6 however, ignore the star but parse all that follows, therefore considering * html the equivalent of html.
This bug has now been fixed, meaning that IE7 will ignore star html filtering in accordance with the CSS2.1 specification.
Examples
The following declarations are parsed in older versions of IE, but ignored in IE7.
* html {
...
}
* html body {
...
}
* * body {
/*This is also ignored in IE7 because the body element can never be a grandchild of the root element*/
...
}
An example from British Energy
* html #main {
height: 98%
}
The underscore filter
Like the star html filter, the underscore filter is also used to apply rules in IE while hiding them from other browsers. Unlike the star html filter, however, it only works in Windows versions of IE (not Mac) making it a little less flexible.
During our study, we found that Lastminute.com made use of this filter to address layout issues, as did Opodo.
The filter works by exploiting a bug in the way that older versions of IE interpret the underscore character. The CSS2.1 specification reserves underscores (and dashes) for vendor-specific extensions (aka “custom properties”). Thus, rules like _myprop: foo should be ignored by browsers, unless they implement their own proprietary _myprop property.
Most modern browsers follow this guideline. Older versions of IE, however, ignore the underscore but read the text that follows. Thus, they treat statements like _myprop: foo as the equivalent of myprop: foo (no underscore) and try to apply it as a style. As a result, developers could prefix any standard CSS rule - for example, width: 300px - with an underscore to make older versions of IE apply it, while keeping it hidden from all other browsers.
This bug has now been fixed, meaning that IE7 treats properties prefixed with an underscore as vendor-specific extensions per the CSS2.1 standard. As a result, the browser no longer attempts to apply statements like _width: 300px as CSS rules. (However, they still appear in the object model and can be queried via scripts.)
Examples
_height will override the preceding height rule in older versions of IE, but will be ignored in IE7
An example from lastminute.com Unlike the star html and underscore filters, this filter is used to hide rules from IE while having other browsers apply them. It only works in strict mode however (not quirks mode). During our study, we found that Lastminute.com made extensive use of this filter to correct font size and layout issues. Opodo also used this filter to display form elements correctly in IE6. The filter works by exploiting a bug in the way that older versions of IE interpret CSS comments. When these browsers encounter a comment - i.e. /**/ - placed after a rule’s property name, they choke and skip the value that appears thereafter, proceeding directly to the next line of code. This bug has now been fixed, so in IE7 these rules are parsed in full and applied. The following height rule is ignored by older versions of IE, but applied in IE7 An example from lastminute.com The child selector filter is used to hide rules from IE while having other browsers apply them. During our study, we found that O2 and BP made extensive use of this filter to deal with box model inconsistencies. Child selectors - e.g. Support for child selectors has been added in IE7, so these rules are now parsed and applied per the standard. The following height rule is ignored by older versions of IE, but applied in IE7 An example from BP Like the child selector filter, the adjacent selector filter is used to hide rules from IE while having other browsers apply them. During our study, we found that Lastminute.com made use of this filter to align table data. Adjacent selectors are similar to child selectors. However, while child selectors are used to match the children of an element, adjacent selectors are used to match siblings. Thus, the adjacent selector Support for adjacent selectors has been added in IE7, so these rules are now parsed and applied per the standard. The following height rule is ignored by older versions of IE, but applied in IE7 An example from lastminute.com - used to align text to the right in all table cells in a row except for the first. This hack takes the aforementioned adjacent selector filter and gives it a twist, by adding in the It usually appears in the form of Since the Despite being part of the CSS2.1 specification, older versions of IE don’t support the first-child pseudo-class or adjacent selectors and ignore them wherever they are found. Support for both the first-child pseudo-class and adjacent selectors has been added in IE7 however, so these rules are now parsed and applied per the standard. The following rule used to hide the height property from Internet Explorer. In IE7 this declaration will be applied. Note: we found no examples of the first child and adjacent selector filter during our study. Purists will recommend that you remove the need to use these types of filters by restricting your designs to only the CSS features that work consistently across all browsers. This is fine in theory. However, in practice, clients’ demands often mean that we need to use CSS features that don’t work consistently across all browsers and then fudge them to make them appear as though they do. So when filters like the above stop working, we need to find something to replace them with. The only reliable replacement for filters that target versions of IE are - yes, you’ve guessed it - Microsoft’s proprietary conditional comments. We’ve discussed them before so I won’t blather on about them again; save to say that here’s how they can be used to supply IE7 with one set of styles, while supplying older versions of IE with another - thereby performing the same function as outdated hacks that don’t work any more. The results of our study suggest that around 12.7 million websites are in need of a little TLC because of IE7. Maybe even more. However, this article has hopefully shown that the most common problems are easy to diagnose and not too difficult to fix. As always, we welcome your thoughts on the subject. Ian Hickson has more on the dangers of serving XHTML documents as text/html. Fadtastic has more on HTML vs. XHTML.
#promo {
min-height: 300px;
height: auto;
_height: 300px;
...
}
#homepage_search_category ul li.first {
_top: -2px !important; /*underscore hack fix for IE/Win :( */
}
The comment after property filter
Examples
.myclass {
height/**/: 300px;
...
}
td, th {
font-size:80% !important;
font-size/**/:100% !important;
font-size/**/:80%
}
td, th {
font-size:80% !important;
font-size/**/:100% !important;
...
}
The child selector filter
html > body - are used to apply styles to elements that are direct children of other elements. However, despite being part of the CSS2.1 specification, they aren’t supported in older versions of IE and are therefore ignored.Examples
html > body {
height: 300px;
...
}
html > body .effLoginContainer{
padding: 5px 10px 7px 10px;
background-color: #E7F7E7;
}
The adjacent selector filter
tr tr matches any table row that follows another table row and results in styles being applied to every row in a table other than the first. However, despite being part of the CSS2.1 specification, they aren’t supported in older versions of IE and are therefore ignored.Examples
head body {
height: 300px;
...
}
table.priceDestination tbody td td {
text-align: right
}
The first child and adjacent selector filter (aka The Owen hack)
:first-child pseudo-class. Like the adjacent selector filter it is used to hide rules from IE while having other browsers apply them.head:first-child body, which means “select the body element if the body and head elements are siblings AND the head element is the first child of its parent element.” body and head elements are always siblings, the first part of this statement is true. And since the head element is always the first child of html (its parent element) the second part of the statement is also true.Examples
head:first-child body {
height: 300px;
...
}
The solution?
Final thoughts
Like this article? Digg it!Notes
“You’re only serving true XHTML if you see application/xhtml+xml in place of text/html in your version of the above.”
I don’t think that’s correct - specifying application/xhtml+xml in your element doesn’t affect how the document is sent in the first place. It needs to be dealt with on the server, not in the markup…
IE7ï¼Œä½ å‡†å¤‡å¥½äº†æ²¡ï¼Ÿ…
您å¯ä»¥æŠŠæœ¬ç¯‡å½“åšæ˜¯ã€Šä¸Žè‡è™«ä¸ºå‹â€”—æµè§ˆå™¨è¡¥æ•‘办法，è‡è™«ä»¥åŠè§£å†³æ–¹æ¡ˆ 》三 ç³» 列的第四系列。
其实，对于专èŒäºŽwebæ ‡å‡†çš„äººæ¥è¯´ï¼Œæˆ‘们在IE7 Beta1的时候就准备好了，XD。ä¸ä¿¡å¯ä»¥çœ‹çœ‹é’ˆ……
How does it handle an open italics tag (’round the underscore filter)?
I ask because I care.
Great article, dealing with the very same issues that I also face every day. Hopefully ’sigh’ the standards apply in future. However this article helped me to revise my skills.
I’ve used on a few sites to get arround the text selection bug which occurs in IE when stuff is floated. So, if I get it right, this will break webpages in IE7 ?!
The following line was stripped from my comment above:
[?xml version=”1.0″ encoding=”iso-8859-1″?]
@paul: I think you’re probably right there. Thanks for the pointer.
@MacStansbury: I’ve passed on your comment to the Vitamin dev team. Good spot ;-)
@tonza: Cheers mate!
@Percept: There’s a good chance you’ll see problems - but it’s worth testing in both browsers to be sure before you go making edits. Either way, the problem is that if your page starts with an XML declaration (like that in your second comment) you’ll get quirks mode in IE6 and strict mode in IE7. That means that one set of rendering rules is applied in IE6 and another in IE7, which probably won’t be too sustainable in the long term. Sorry to be the bearer of bad news.
Some sad irony:
“Furthermore, newer browsers may opt to validate your markup if you include an XML declaration and specify a Content-Type of application/xhtml+xml. This could be disastrous if parts of your pages are inserted dynamically from a content management system. As you won’t have control over the content in the CMS, you won’t know whether it’s 100 per cent XML-valid or not.”
If you scroll down to the bottom of this page, you’ll see these two links:
Valid XHTML & CSS
This page fails both checks, because it isn’t proper XML.
Furthermore, this page is being served as “text/html”, with a matching “text/html” meta tag, but the doctype identifies it as “XHTML 1.0 Strict”. This article also identifies that as a bad idea, because proper xhtml should only be served as xml, which isn’t supported in IE.
I know that the author has no control over how Vitamin serves its pages, but what hope do most web developers have if a site like this can get it wrong (while falsely claiming to be valid)?
Anyone know how to get IE6 back after installing IE7
@Robin: You should be able to roll back to IE6 via Add/Remove Programs (see IEblog).
theres a standalone version of IE7 at, so you can have older versions of IE running from the same machine.
http://tredosoft.com/IE7_standalone
Roman, if you have a old version of IE7 installed you can remove it by following these instructions
http://www.acmetutorials.com/hate-ie7-find-out-how-to-remove-it
If you installed the stable release, trying doing a machine restore.
1. Start > Program Files > Accessories > System Tool
2. Than use System restore.
I know I’m going to use Mozilla now, I can’t stand IE7, it’s and it’s monopoly of the toolbar area
I learned some stuff here - thats gotta be a good sign.
thanks for the best written article on addressing IE7 issues i have seen yet.
Thanks for raising the bar Vitamin!
In IE6, I see a dialog box displaying the word “CSS1Compatâ€, but in IE7 and Firefox2 is “BackCompatâ€, Why?
Soory,I looked wrong!
Thanks Vitamin!
Fine article, worth checking.
But I don’t agree on
[if gt IE 6]- you’re shooting in your foot again. What about IE8, which will come in 2008? In article you spent time explaining why[if lte IE 6]isn’t sufficient enough, and now you’re including IE7, IE8, IE9… I’d like to know if you’re sure that IE8 will have the same CSS bugs as IE7 please.I will use
[if IE 7],[if IE 8]and so for. Eventually, when I see that IE7 inherits bad CSS behaviour from its predecessor, I’ll think about[if lte IE 7].Why bother?
If MS can’t be bothered to use standards why should we increase our work load to continue the bad practice. I had hoped that alot of the issues (bugs) in previous versions of IE were going to be fixed in IE7, but I pointed it at http://www.webstandards.org/action/acid2/ and was very disapointed.
If we write standards compliant websites and the brwoser breaks it won’t it encourage users to find a deacent breowser?
Hi Simon - thanks for the effort with the article - nice read. As for IE7 specific filtering you can use an @import from a common.css to an IE7.css file which has rules prepended with “*:first-child+html”.
We added this to our usual filtering methods (inspired by D Shea) and have used it on our latest projects. See Im A Celebrity to see it in action.
Stuart Johnston :)
Nice article, Simon !
I am excited to see some new IE7 hack … =O)
I agree with Riddle, one should use conditional commentaries in the sense of the downwards compatibility, not upwards. No one knows what bugs future software version may bring, and thus fixing only stuff from the elder versions, we are probably evading a lot of errors and extra work in the future.
Ok, few points:
1) as it was mentioned before “content-type” in meta element has no
effect on how document will be treated. Browsers choose html/xml parser depending on server headers, not meta information.
2) You can omit XML declaration only if your encoding is UTF-8 or UTF-16 (http://www.w3.org/TR/xhtml1/#C_1)
What about the hack to target IE7 using the period i.e.
.height: 700px;
It’s maybe not the most elegant of solutions but it works.
[…] Over at Vitamin, Simon Griffin explains not only how to ensure a CSS-driven design accommodates the new Internet Explorer 7, but also a lot about conditional comments, JavaScript browser sniffers, XML declarations and DOCTYPEs. […]
@Crispy Crunch: Thanks for your kind words.
@forestgan: Glad you sorted out the problem :-)
@Riddle, @Niko: I probably chose a bad example to illustrate conditional comments there - targeting future versions of IE isn’t a particularly good idea.
@Simon: I think we’d all hoped that IE7 would pass the ACID2 test. But for one reason or another it hasn’t happened. Unfortunately, ignoring IE users just isn’t a practical option for the majority of us. (Our clients would flip out if we told them that most of their users would see broken versions of their websites).
@Stuart, @Tom: Thanks for the tips - I’ll take a look :-)
@Rimantas: Thanks for the pointers! Per the second of the two, it sounds like abandoning XHTML in favour of plain old HTML might be a worth investigating if you need to use an ISO-8859-1 charset (and want to achieve strict mode in IE6 and 7).
[…] Microsoft IE 7 ile birlikte bir çok sorununu giderdi bu konu hakkında ayrıntılı bir makalesi Link […]
Thanks for your awesome article Simon.
I’ve got some further unexplained issues in some of the sites I’ve built, but this article has helped me understand a few new differences with IE7
Cheers,
Brendan
[…] Wake up and smell the IE7!: “Put simply, if you’re using JavaScript or server-side logic to serve different styles to different browsers, you need to make sure that you’re not inadvertently excluding IE7.” […]
I handle IE a different way, I use a little PHP to send any IE users to /edited/
@wyatt; thanks for adding a note that that site isn’t safe for work.. yuk.
Besides, recognizing the fact that some people use a fake browser agent to be able to browse backwards sites,do you really want to treat them the same?
I think its childish and dangerous, if you want to be funny just send them to getfirefox.com
Tom Quinn — IMO, it matters not if your rockin’ dot hack is inelegant, you just saved my layout! Anyway nothing is as inelegant as that voice-family thing, long as it works is what’s important. Thanks much!
[…] Vitamin Features » Wake up and smell the IE7! (tags: Resources:Browsers:IE) […]
Just as an FYI…I got the “forced download” of IE7 this past weekend, and it doesn’t force the installation on the user, it just downloads the installation file, pops up a window which gives you the option to install or not, and lets you know you can uninstall it and go back to IE6 if you so desire.
I installed it, and it was not earth shattering in any way…good or bad. Which means I will just continue to use Firefox 99% of the time. :)
[…] For more information about outdated hacks/IE 7 issues, read this article: http://www.thinkvitamin.com/features/design/wake-up-and-smell-the-ie7 […]
[…] Wake up and smell the IE7! […]
hi.i have no comment. just want a help in a css with browsers with examples if possible
sorry if my comment its not wath u want guys but i need help ….
thx regards baghera
Great article Simon - more like this please :-)
[…] Vitamin’s latest article looks at the specific problems introduced by IE7 and provides detailed explanations of how to fix them. Continue Reading […]
Please, one question:
Why should I serve a XHTML 1.0 strict document as “application/xhtml+xml” and a in front of my DocType?
The answer is, that at present not all browsers really support XHTML 1.0 and without IE 5.x/6/7 are not switching to QuirksMode.
Next question: Why should I use XHTML 1.1 and “application/xhtml+xml”?
The answer is only the Ruby-Annotation is really new. Does I need that? No.
Then, often I ask me, why many people talking bad about IE. It’s the most used browser and the most possible platform for persons with disabilities (many Screen Reader need IE and Windows).
What do Microsoft? They make a new IE 7 and he will work with sites that use the W3C Recommendations. Microsoft told this all Web Designers, remove your CC’s and CSS-Hacks this year.
Many people only see the bugs from IE 7, then they are happy if a new one is found. But did they change their sites to the W3C Recommendations? No.
Take a look on http://www.aadmm.de (available in german and english) to see what IE 7 will do on a site that use W3C Web Standards and the WCAG 1.0. No is used, no CC’s are use, not QuirksMode for IE is required. See how the new IE 7 will work with PNG transparency, MathML, SVG, XML and XSLT.
Is he really bad or is the only problem that a Web Designer will have a cool design and need CSS-Hacks to do that? Is it really a browser problem? I don’t think so. I think if Web Designers will make a site for all people and all browsers, so IE will also work.
[…] Wake up and smell the IE7! […]
good article. Used the underscore hack myself :(
you should know that your article cannot be digged!
As far as I’m concerned, I’ve got an accessible standards-compliant site.
In one part of the site I’ve got a bottom background which either stays at the bottom of the screen if there’s not much content, or stays at the bottom of the page when scrolling is required. It works fine without quirks mode in all the other major browsers.
Now IE7 is here it writes the bottom in a fixed position determined by the screen, regardless of what else is on the page.
The only way I can stop IE7 misinterpreting a negative margin command is to force it into quirks mode.
Thank you Microsoft so much.
http://www.acupuncture.org.uk/ie7/default.asp
[…] Uno de los dolores de cabeza inherentes a CSS es que no todos los navegadores lo leen igual. Y la llegada de IE7 es una migraña más: los nuevos selectores soportados por IE7 y “Wake up and smell the IE7!”. […]
Excellent article!
However, I am having a problem in IE7, which is different from the common problems outlined in the article. On our site, we have some controls which accepts user inputs. In IE7, after typing in something and tab out to next input-box, a surprising problem happens - the focus’s gone: in the broswer, no matther where you move your mouse cursor to, the bowser is not accepting any focus…more over, if you move mouse focus outside the browser, i.e. click on anywhere out the ie window, and go back to the browser, the problem’s gone! Weird enough!
BTW, everything works fine in IE6. Any idea? Thx!
The main issue here is that the Internet still needs to become standards compliant to become a serious commercial marketplace. Businesses cannot continue to spend huge sums on prettying up web sites to look good on multiple browsers. The purpose of a corporate website is to market and sell products/services at reasonable cost. As anyMBA will tell you, every industry in the last 200 years has required adherence to marketplace standards before it yielded the returns its inventors promised. In this case we are talking about a $trillion dollar industry that has just got to get its act together soon or it will be overtaken by one that yields better returns. If the major corporations in this survey relied on Internet standards for the majority of their business, standards WOULD be applied - and these standards would probably be controlled by the banks - not by W3C or MS. I have a 50000 page website that can only survive if this nonsense is fixed quickly so I hope the webmaster community and those spending big money on the Internet can come together swiftly and put and end to inconsistency and useless expenditure - I would persoanlly go for a legislative framework!
I can write a review of it with three letters: S, U, X
[…] IE 7 The impact of IE 7 on web design and development […]
The only reliable method of detecting IE going forwards involves the use of conditional comments. This is the only method that Microsoft guarantees that it will support over the long-term.
how to play poker …
Will how to play poker…
fulltilt poker …
The fulltilt poker…
Very good work! congratulation for this article! BYE dsl
[…] Original post by contact@thinkvitamin.com (Carson Systems Ltd) […]
Nice article, Simon !
I am excited to see some new IE7 hack … =O)
I agree with Riddle, one should use conditional commentaries in the sense of the downwards compatibility, not upwards. No one knows what bugs future software version may bring, and thus fixing only stuff from the elder versions, we are probably evading a lot of errors and extra work in the future.
In short, browser detection is not a very robust solution.
Browser detection seems to be still notoriously problematic.
Great and excellent article t’s realy helpful. Thanks again.
Wow. Very impressive.
Very good article, thanks a lot for putting all this together
[…] Wake up and smell the IE7! CSS - Hacks para explorer 7 (tags: CSS) […]
adult chat network…
Vitamin Features » Wake up and smell the IE7!…
Verry good site, verry good articles.
Gratulation
Very usefull article, thanks a lot for putting all this together
thNKS
In the example given for The underscore filter it is stated that _height rule will not be rendered in IE7, however it is getting rendered in IE7, has it been fixed in IE7?
here is the piece of code that I used to test the underscore filter in IE. The div does gets the height of 300px in both IE6 and IE7.
<style >
#promo {
border:1px solid #090909;
height: auto;
_height: 300px;
}
</style>
<div id=”promo”>This is given height of 300px.</div>
[…] 4. “Wake up and smell the IE7! The results of our study suggest that around 12.7 million websites are in need of a little TLC because of IE7. Maybe even more. […]
Wake up and smell the IE7! CSS - Hacks para explorer 7 (tags: CSS)