New Headaches?
August 23, 2006Over on the IE Blog today, Markus Mielke summarizes the CSS changes made for Internet Explorer 7. We’ve known about most of these for a while now, but there were a couple of surprises to me - 1px dotted borders at last, as an example.
What I’m experiencing in testing these days is much along the lines of what I’ve been hoping; namely that after I finish creating my page in a Gecko-based browser, loading it in IE7 for the first time isn’t a horrible mess. It’s actually quite close to being perfect in many instances. IE6 is another matter entirely, which is no great surprise.
But I’m curious. Despite these upgrades, surely there must be some things that don’t quite work properly. What strange new behaviour do we have to look out for in IE7? Are there things that work as expected in IE6 that don’t in IE7? With all these steps forward, how many have been made back?
I’ve uncovered one so far, anyway. Using the overflow: auto easy clearing method, IE7 can act a little strangely. Compare this test page in IE7, and then in IE6 and any other browser. Only IE7 gets it wrong. (The code may seem a touch redundant, but I assure you this came about in a real world scenario).
Any others you’re aware of? It’ll be interesting to see what else falls out of the tree once we start seriously shaking it.
The only one I’ve run into so far was fixed in beta 3. The circumstances are pretty obscure, but again, this was a real-world scenario.
Under very specific circumstances, hovering over a link would cause floated elements on the page to disappear. But only if the link was displayed as a block, was in the last block element on the page, and was preceded by a block element that ended in something displayed as italics. And only if it had to redraw that element, such as scrolling back up, or switching back from another window. (Did I mention the circumstances were really obscure?) Full description and testcase at http://tinyurl.com/qnmcx
I’ve been doing a lot of cross browser testing with the latest IE7, IE6, and Firefox; I can’t think of many specific patter of problems I’ve noticed, but there have been a ton of quirks.
It’s weird… IE7 sometimes acts more like Firefox than IE6, but talking about clearing floats, you don’t need to clear floats on IE7 at all. It acts exactly like IE6 in my experience. Of course, that means you’re still screwed if you try to get away with overflow:auto in a situation like you outlined above, for the sake of Firefox clearing.
It’s been a couple of months since I last tested, but there are still whitespace issues whereby if you have whitespace in an HTML list, you’ll get extra vertical space in that list. Awful.
Additionally, if you ever use a clearing div and give it any height whatsoever (even 1px), it can bork your entire layout. You can’t even override this bug by overwriting the value with “auto”. Once any height is assigned, it’s borked.
In IE7, if a floated element has an ancestor with a non-auto height, elements that don’t share that ancestor can’t clear the float. The float goes right over the clear element. I ran into this issue in an early IE7 beta and they still haven’t fixed it in beta 3, so it looks like IE7 will ship with this regression.
I can vouch for Mike’s claim that the “extra whitespace for block elements in a list” bug still exists in Beta 3. Despite the fact that “List-item whitespace bug fixed” is on the list of fixes.
Styling of hr’s still seems a bit difficult, but I haven’t tested that one too extensively.
I think we also have to be careful in that I suspect some of these issues may be resolved in a yet-unreleased version of IE. Let’s retest again when the the RC comes out.
So far for me it’s been pretty good. I did have problems with the “Holy Grail” layout featured on A List Apart, ( http://www.alistapart.com/articles/holygrail/ ). It used to float the left column over top of the main content column. However this appears to have been fixed in Beta 3. That was my only major problem so far. Also, I love the smooth text.
It’s another step in the right direction. Previous versions of the beta were really crappy but this one seems to do a bit better.
I still have some issues with the floats, they stretch the parent element when the parent doesn’t have a height and the float does. This isn’t suppose to happen but it’s actually quite convenient from time to time…
If I were MS I’d test it a little more before releasing it into the public. Noone likes servicepacks and updates. I know I don’t/
Jonathan - while I agree with you in theory, the IE team has repeatedly stated that we need to be testing our sites in current versions of IE7 now. So, while things still may change a bit, I’m okay with starting to think about how to deal with problems now.
Hard to explain but I ran into an issue where if I specified a fixed height for a container div in order to display a background image, the footer div would wrap immediately under that containing div rather than at the bottom of the page. Works fine in all other browsers (incl. IE6) and because of time constraints, I ended up having to hide the height value from IE 7 with a hack.
“”extra whitespace for block elements in a list” bug still exists in Beta 3. Despite the fact that “List-item whitespace bug fixed” is on the list of fixes.
Styling of hr’s still seems a bit difficult, but I haven’t tested that one too extensively.”
Mike, Wilson. I’m not certain but if it’s the issue I think it is. Try giving the block elements, links or whatever they are. A width, min-width or max-width.
I’ve also came across a few things that, display: inline-block, fixed. Can’t think of a specific example right now.
When I read the IE Blog’s post, my main concern was if the “strict mode” he referred was the same as “standards-compliant mode”, or another doctype switch just for strict doctypes?
I can answer that only after installing and testing (which I didn’t –yet).
Maybe my hopes for IE7 were a bit unrealistic - but I am frusterated that IE7 will break sites that previously worked in IE6.
While IE7 will have improvements over IE6, since it is not a critical update and sites that work in IE6 don’t work in IE7 - it simply is giving us one more browser to write conditional css for.
I Beleive that we should all slow down and look at how much time we have to make the compatability work. Everyone who has ie6 won’t switch to ie 7 right away expescailly becuase thoughs kinda automatic updates aren’t checked off and you manually have to down load it and most high tech users use fire fox. I beleive we have till vista come out and at least a year after that to see ie 7 get big but fire fox will still be taking small percents of the market away.
So a couple months to fix everthing is plenty of time to fix or even redesign to meets standards.
I think it really has to do with how much IE7 breaks a site though -
Many people are already browsing with IE7 betas?
Do you make an effort to test in Opera? IE7 will probably have about as much usage rate, and it will continue to grow.
I really see IE7 needing to be coded for fairly quickly, simply because lots of people will download it because they hear about it or see it on windowsupdates.com
I found that calling for a stylesheet using @import will disable the pseudo element a:hover. You’ll hover over your links and nothing will happen. This problem doesn’t manifest itself on linked style sheets, only imported one.
The work-around is quite simple: Just add a:hover {} with empty curly-braces to the @import.
<style type=”text/css”>
@import “your.css”; a:hover { }
</style>
Umm… IE7 *is* going to be an automatic update for people using XP SP2 (and “high priority,” too!): http://blogs.msdn.com/ie/archive/2006/07/26/678149.aspx
Unless it gets delayed, IE7 is going to be a significant issue by the end of this year. Maybe not the majority, but probably more than Opera (which you should also be testing with), and I wouldn’t be surprised to see it at 10% within a couple of months.
I should’ve checked this before posting… It turns out that my site already gets more hits from IE7 beta users (1.3%) than all versions of Opera (1.2%). (That’s for August so far. And there are way too many hits for my own tests to account for them.)
Even assuming some of the hits are spoofed, that’s kind of scary.
My worry for IE7 is that they haven’t gone far enough. With Firefox releasing updates and new versions a lot more frequently than Microsoft, surely Firefox is going to move ahead in terms of CSS support in the future and again leave IE behind. We may all be writing and commenting on IE8’s CSS support needing to catch up with the latest Firefox / Safari / Opera versions in 3/4/5 years time.
Unless I’m behind on the news and Microsoft have announced they’ll be updating IE more often?
Is there a way to run IE7 alongside IE6 so we can test on both browser versions, without needing two machines?
I’ve really not been testing as much as I should do as I don’t use IE at all but I need to start.
As Kelson says, I’m already getting quite high IE7 beta hits, more than browsers like Opera and Safari and more than IE5.5.
One final point….did you all submit your bugs to MS? It’s the only way they’ll actually get fixed :)
for Renato, comment #12
IE7’s strict mode equates to standards compilant mode.
David McDonald: There seem to exist two or three ways to run IE6 and IE7 on one machine but the solutions are rather messy in my opinion. I’d use VMWare or something similar for testing.
Stand alone beta 3 - http://tredosoft.com/IE7_standalone
Not so much a CSS issue, as someone at Microsoft being an idiot.
Any dropdown select box gets pop-up blocked. Always. This is really annoying, and there is *no* way to fix this, as far as I can find.
Paul (comment 24) - I’ve been using Jon Galloway’s IE7 beta 2 standalone and - thanks to your link here - I found he released a standalone version of beta 3. His approach to acheiving standalone-mode is slightly different from Yousif’s (TredoSoft) and he explains that while Yousif’s package worked well for him, his method is more open and customizable due to his usage of DOS batch files and REG files:
http://weblogs.asp.net/jgalloway/archive/2006/07/26/IE7-Standalone-_2800_Updated-for-IE7-Beta-3_2900_.aspx
Bob Easton says in comment #22
> IE7’s strict mode equates to standards
> compilant mode.
Why **ck has Microsoft now suddenly decided to change the name for one of the rendering modes in IE7? This will only confuse a lot of people!
In the document (from the MSDN Library) Mielke refers to when explaining how to enter this so called “strict mode” there is no reference to such a mode at all only “standard compliance mode”.
This stuff is confusing enough as it is….
Ah you found the Beta 3 stand alone just in time for Microsoft to release RC1 Dave. Complete with “completed CSS platform changes” apparently. Though I can’t find details on what those are.
http://www.microsoft.com/windows/ie/ie7/about/whatsnew/default.mspx
Hopefully Jon and/or Yousif will come to our rescue again.
I just wanted to re-iterate what Paul said about IE7RC1 now being available:
http://www.microsoft.com/windows/ie/default.mspx
Dave: you’ll notice that they mention some additional CSS items have been resolved. To clarify my point from earlier, I wasn’t advising against testing with the beta versions but rather indicating that effort spent trying to create workarounds to those issues may have gone in vain as they may be solved in this RC1 release. I believe this is now the point at which we can consider the CSS final (although, even then, some issues may be fixed before absolute final) and that we can look to establish possible workarounds for any outstanding issues.
RC1 still has a problem with dotted borders. If you give an element a 1px dotted border, then set one side to 2px (or greater) solid, the dotted borders turn to dashes.
RC1 has problems with
http://krijnhoetmer.nl/stuff/html/input-type-image-value/
it shows the button (very odd shaped) in stead of the two images
I’m with Mike D. (comment nr.3) on this one. This bug is so old and so common, that I’m really surprise this bug isn’t fixed. I’m wondering if they are deaf or if there is something fundamentally wrong with their rendering engine that they can’t fix it. My blog suffers from it and at least 50% of the lists I build have this issue. It’s like the most frequent annoying bug. In a lot of sites I’ve built this bug is the only one I needed to fix.
How many of these reported bugs are solved?
http://www.quirksmode.org/bugreports/archives/explorer_7_beta_2/index.html
To fix the whitespace bug in IE with ul/ol/dl lists
See article here:
http://www.devlounge.net/articles/consistent-list-markup
strict mode or not, IE7 will be my choice only to design for users.i won’t use myself otherwise.
Just an update to Paul’s post (no. 24)…
Tredosoft is now offering standalone IE7 RC1.
http://tredosoft.com/IE7_standalone
Slighltly off to the side of CSS but… the (X)HTML Q tag… so handy for styling inline quotes, but with support still missing on IE7, apparently, does anyone know if this is going to appear soon?
Hi,
I came across an obscure issue that caused a floated footer to float over the wrapper div that was above it.
This was the original css for the wrapper:
#pagebody{
// height: expression(‘600px’);
margin-left: 12px;
margin-right: 12px;
min-height: 600px;
padding: 0px;
border-top: 1px solid red;
}
Removing the ie-specific conditional expression from the CSS fixed the problem.
i.e. (pun intended) i removed this line:
// height: expression(‘600px’);