Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

New Headaches?

August 23, 2006

Over 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.


Kelson says:
August 23, 11h

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

cam c. says:
August 23, 11h

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.

Mike D. says:
August 23, 11h

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.

August 23, 11h

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.

August 23, 12h

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.

August 23, 12h

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.

August 23, 13h

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.

Ulco says:
August 23, 13h

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/

Dave S. says:
August 23, 14h

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.

Lyndon L says:
August 23, 14h

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.

Paul says:
August 23, 15h

“”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.

12
Renato Targa says:
August 23, 16h

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).

August 23, 18h

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.

chris says:
August 23, 20h

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.

August 23, 21h

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

August 23, 21h

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>

Kelson says:
August 23, 21h

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.

Kelson says:
August 23, 21h

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.

August 24, 02h

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?

August 24, 03h

Is there a way to run IE7 alongside IE6 so we can test on both browser versions, without needing two machines?

21
Paul Solecki says:
August 24, 03h

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 :)

August 24, 04h

for Renato, comment #12

IE7’s strict mode equates to standards compilant mode.

23
Julian Hartig says:
August 24, 05h

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.

Paul says:
August 24, 05h

Stand alone beta 3 - http://tredosoft.com/IE7_standalone

August 24, 07h

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.

Dave L says:
August 24, 07h

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

27
Tomm Eriksen says:
August 24, 08h

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….

Paul says:
August 24, 11h

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.

August 24, 11h

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.

August 25, 06h

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.

31
Thomas says:
August 25, 10h

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

August 27, 04h

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.

33
Johan says:
August 27, 04h

How many of these reported bugs are solved?

http://www.quirksmode.org/bugreports/archives/explorer_7_beta_2/index.html

34
Johan says:
August 27, 04h

To fix the whitespace bug in IE with ul/ol/dl lists

See article here:
http://www.devlounge.net/articles/consistent-list-markup

August 27, 15h

strict mode or not, IE7 will be my choice only to design for users.i won’t use myself otherwise.

S Smith says:
September 25, 08h

Just an update to Paul’s post (no. 24)…
Tredosoft is now offering standalone IE7 RC1.

http://tredosoft.com/IE7_standalone

37
Dave Everitt says:
October 10, 04h

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?

38
Graeme says:
October 19, 07h

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’);