IE7 CSS tweak show and tell

Partly because the beta was carefully rolled out over many months, the release of Microsoft’s Internet Explorer 7 has largely been a non-event, for developers as well as journalists. While not at the level of Mozilla Firefox, IE7 is far more standards-compliant than IE6, which was way more compliant than IE5.5, which beat the pants off IE5. To make IE6 render standards-compliant pages correctly, web designers came up with a Wikipedia’s worth of hacks. In IE7, those hacks aren’t necessary; some actually cause problems.

(Here’s a tip from Dan Cederholm, who created the CSS for Happy Cog‘s redesign of Advertising Age: “inline-block is the new-and-improved method for auto-clearing floats.” Use it to replace display: inline-table;.)

IE7 is also the first Microsoft browser to permit user scaling. It does this the same way the Opera browser does it (which is the same way Microsoft Office does it): if text is too small, the user scales the entire page. By contrast, Safari and Firefox use Text Zoom, originally developed by Tantek Çelik for IE5/Mac. In those browsers, if text is too small, the user scales the text size—and nothing but the text size. Images, column widths, and so on, typically do not scale (unless the web designer is doing something really tricky).

There’s a huge difference between Text Zoom and Page Zoom, and it will affect the way designers spec type sizes for the web. It didn’t matter much when only Opera scaled the page. It was a neat feature of Opera; but Opera’s neat feature didn’t affect the way standards- and accessibility-oriented designers approached text size. But market share matters. Once IE7 gains critical mass, a lot of our current thinking about ems and pixels and such will go out the window. I’ll write about that soon, probably on A List Apart.

Meantime, developers are focused on the persnickety stuff: Ajax and JavaScript compatibility problems, CSS bugs that didn’t quite get fixed, and CSS hacks that no longer work.

Like me, you may have heard from a client whose site you designed before IE7 existed. What problems have you encountered? What hacks have you jettisoned, and with what have you replaced them? (Please include URLs.)

[tags]css, IE7, bugs, hacks, workarounds, design, webdesign, tantek, dancederholm[/tags]

185 thoughts on “IE7 CSS tweak show and tell”

  1. Well a hack that I’ve been using for quite some time is a mixture of the html>body hack and the star hack. So target something specifically for IE7:

    html>body .whatever (*padding-top: 10px;}

    I also sometimes use a combination of the star and underscore hacks to separate things between IE6 and IE7.

    .whatever {*padding-top: 10px (ie6 and 7), _padding-top: 20px ((ie6 only) }

    Used in various places throughout here:

    http://www3.bballcity.com/wp-content/themes/foxtrot/style.css

  2. Practically all my calls were for the lack of float clearing support (:after). I used zoom:1 at first in IE7-only cond. comments style, but are now using min-height: 0, which works wonderful (got it off Roger Johanson’s thread).

    I also encountered one ugly bug in IE7.

  3. It’s all very well having a whole-page-zoom, but you need to be consistent.

    IE7 zooms absolutely everything – except the background image on the body element. Many of my sites use the body background image as part of the layout, and so don’t look great when zoomed…

  4. In a project I did recently, I used the recommendation of the IE development team and implemented conditional comments to split off any IE specific files. One file held IE7 specific declarations, another held a mix of hacks and filters specifically targetted to IE 5.x and IE6.

    Tis makes the CSS very granular and only targets IE hacks and fixes at IE. It required a bit of heavy lifting to find out how to get them to work side by side, but it works.

  5. I’ve been contacted by just a few clients, at the moment. In my CSS I used *only* the star hack (* html selector).
    This is a 100% CSS compliant selector AND works well. I use it redefining specific rules under IE6-.

    It’s clear that IF Internet Explorer 7 fixed the star hack “bug” AND at the same time it was standards compliant, nothing should be changed in my CSSes.

    But IE7 isn’t standards compliant, so some pages broke. At this time I’m using another CSS standard selector bug, that targets JUST IE7.

    I’ve described it on my Intense Minimalism blog. It’s in italian, but the links and the general sense using babelfish should be clear.

    I HATE conditional comments. This is because:
    * It’s a nonstandard feature.
    * It “scripts” in the comments. Semantics bye bye.
    * It’s splitted from the style that need correction. Correct one and you don’t know if IE should be edited as well or not (@import “” all also has this problem).
    * It must be placed on every page (even if this isn’t a real issue using a template engine, it means that the “style” knowledge must be splitted.
    * It’s exactly the same of using the star hack (LT 7): it doesn’t match for the specific feature but for the browser, exactly like the IE conditionals.
    * It’s exactly the same of using the star first-child hack (EQ 7).

  6. Currently, a method being used at my company has been the “clearfix” method. After a bit of testing I found a method for bring IE7 into line. This required just one minor change in the stylesheet. Made life simple. Of course we have come across other bugs like the peek-a-boo bug but similar methods worked.

  7. @ Folletto: Actually, the * html hack has it’s days numbered now that IE7 will parse that filter in certain modes. Conditional filters don’t have to have CSS added to every page – you can use them to link to external CSS files just as you do with the link tag. The reasons you’ve listed for hating conditionals are either incorrect or can be bypassed with a little effort.

    On the project I referred to, we made the decision to start using the process advocated by the IE team, because their comments have indicated that eventually all the major hacks aren’t going to be recognised, and the CSS will be in a constant state of revision. The IE7/IE6 and under approach we took, meant that as the footprint of IE5-6 diminished, their hacks can be retired.

  8. thankfully all the sites i’ve done in the last year didn’t break in IE7… the only problems i’ve had with came from testing newer sites still in development.

  9. I found, that although the most infamous bugs have been fixed in IE 7, there’s practically no difference in developing for IE 6 and 7. The well known bugs are worked around from the beginning anyway. All kind of bugs mostly related to hasLayout are still in there.

    Whenever I want to trigger hasLayout for both IE 6 and 7 I use zoom most of the time.

    For clearing I’m using the following snippet:
    display: inline-block; /* @ IE 7 */
    _height: 1%; /* @ IE 6 */

    I’m using an extra style sheet included inside conditional comments, so the underscore hack is no problem. I do not split up the style sheet into one for IE 6 and one for IE 7, I use one for all. In general I’m using the underscore hack when I need to target IE 6 only. If I need to exclude IE 6 I’m simply using advanced CSS selectors.

    See here: Plazes

  10. If I need to select IE7 specifically and either can’t use an IE-specific stylesheet via conditional comments or must distinguish between different versions of IE in a single IE-specific stylesheet, I use the following new hack:

    *:first-child+html {/* IE7 styles */}

    IE7 seems to be the only browser that thinks this selects something. It only reliably works when the page starts with a doctype and then the html element. IE7 selectors treat doctypes, comments, and processing instructions as if they were elements, and it also seems to think that the doctype/html element/etc. are children of something (:first-child). No other browser that I’m aware of has this combination of oddities, so it’s ideal for giving IE7 special styles.

    Here’s an example of the selector in use:

    *:first-child+html #nav {min-height: 1px} /* Gives a min-height only for IE7 */

    This hack may or may not work in the next version of IE. Considering that it relies on a bug that may cause lots of problems elsewhere (+ combinators in IE7 have incorrect behavior around HTML comments), I think it will likely be fixed in the next version of IE or the version after.

    I wrote up a page of CSS hacks like this, along with information about conditional comments and some talk about the dangers of using hacks.

  11. The biggest annoyance personally has been the new cleartype issue(s). Any of the js effects libs i’ve used /use (scriptaculosus effects, interface for jquery, brain error, home cooked) for fade (and other) transitions still have issues in the final IE7 rev. See http://www.ieblog.com/, search term “Notes on the interaction of ClearType with DXTransforms in IE7″ (couldn’t find permalink).

    regarding the earlier comments on css hacks and conditional comments …

    If some css hacks (using the asterisk in conjuction with the html element for instance) work only when an element of a css specification has not been implemented in the same way by one particular browser vendor as it has in the others, why use css markup to fix the poor/buggy implementation? The asterisk “hack” was not a W3 recommendation for IE. As such the mix of conditional comments and less browser centric css “hacks” like the Holly Hack are essential. The proper use of both will not only lead to more maintainable code when managing multiple sites and web apps, but troubleshooting unexpected failures when new css inconsistencies arise will become infinately easier.

  12. I have been using IE7 in one form or other for a long while and I can only sigh and shake my head at some of the problems I see.

    You ask for examples of broken code? Here is some production code for Window’s applications and data table display:
    example link

    IE5-6 and Firefox fine. In IE7, no scroll bars and broken columns. Below is the fix I had to apply. I remember having to do the same width nonsense with IE4!

    table { width: 100%} —-broke IE7
    table { width: auto} —-the fix

  13. Been pretty lucky so far with no extra work required on any of my sites – all down to a more is less attitude, starting with the right stuff (Firefox etc) then carefully providing CSS solutions as opposed to hacks where possible. All sounds like the basis recommended in someones book to me.

  14. so building a site design that scales properly when text size is changed is considered “something really tricky.” what a telling confession about the incompetence of people who call themselves “web designers.” just imagine you’re trying to aquire a bespoke suit and the tailor says: “i won’t be able to make the sleeves the same length, that’s something really tricky!”

    “you can’t have your steak medium, that’s something really tricky.”

    “i can’t figure out whether you’re pregnant, that’s something really tricky.”

  15. I’ve been pretty lucky so far in not having anything I’ve done low up in IE7, though I don’t see that as a trend moving forward. As for hacks I’ve pretty much stoped using them and moved to the conditional CSS when things went FUBARB in IE. It’s not elegent but it’s worked so far.

    I’m glad to hear you’re investigating specing type now that things have changed. I’ve been spending allot of tiem thinking about that myself but haven’t had much time to look into it.

    My initial thoughts are moving towards strict values in pixel for both type size and leading. Perhaps this week I’ll have some time to do some tests.

  16. I’m a big opponent of the “* html” hack. It’s not well documented how this should work within the client. That it validates doesn’t really help. Due to the lack of standards documentation the software producer can decide how the viewport and elements above the html tag should interact. This is also a problem for JavaScript, btw.

    The html>body selector seems easier to me and I’ve not needed any new work-a-rounds yet to get IE7 working. Also conditional comments seem superfluous in this respect. But I’m keeping my out for useful and durable work-a-round candidates.

  17. “nex” said:

    so building a site design that scales properly when text size is changed is considered “something really tricky.” what a telling confession about the incompetence of people who call themselves “web designers.”

    Why so hostile, son?

    Did you follow the link? The linked page scales accurately in all dimensions, either automatically or manually, via JavaScript and CSS. Size values are based on the powers of 10. Try doing the math yourself if you disagree that it’s tricky.

    As you would know if you actually designed websites for a living, your facile comparisons aren’t relevant. I go to a tailor expecting a suit to fit. But clients don’t come to me expecting their site to scale. In 11 years as a site designer, I’ve had only one client request this.

    My post gave a quick overview of some technical issues facing web designers with the arrival of a new Microsoft browser. The post’s goal is to find out what problems other professionals have encountered, and what methods they have used to solve them. Anger and name-calling are misplaced in such a discussion.

    “Nex” time you think you have something meaningful to contribute to an online conversation, be a grown-up and sign your name.

  18. I use *+html {} to target IE7 and zoom:1; to trigger hasLayout.

    It’s probably not the best sollution, but it’s easy for now. When the next IE comes out I will most likely have to change the CSS again anyway. Conditional Comments won’t save me from future IE rendering bugs.

  19. Another star-html victim here, on http://www.harddanceawards.com. The breakage wasn’t too bad though and I just moved the IE-specific styles to another stylesheet and served it with conditional comments

    No great shakes, a lot of the bugs I was fixing with the hack were fixed in IE7 anyway so there were only a few tweaks.

  20. maybe the * hack, but otherwise just the use of nifty conditional statements to serve up the css sheet to the right browser.

  21. There is a very bizarre “disappearing image” bug involving images appearing (or not, as the case may be) next to text in italics.

    After some experimenting I’ve made progress with both what triggers the bug (it’s more than just the italics, but connects with background-image/color too) and what fixes it (our old friend hasLayout). I’ve thrown up a very basic page with test cases and explanation here: http://www.cayenne.co.uk/ie7/disappearing_image.html

  22. @ Ben Ryan:
    “Actually, the * html hack has it’s days numbered now that IE7 will parse that filter in certain modes.”

    Yes, numbered, but still more than years away, when IE6- dev could be ignored (ever? *sic*).

    “Conditional filters don’t have to have CSS added to every page – you can use them to link to external CSS files just as you do with the link tag. The reasons you’ve listed for hating conditionals are either incorrect or can be bypassed with a little effort.”
    I was thinking right at the solution you just cited: if I have to add a *nonsemantic, proprietary, in-comment* item to an (X)HTML, I prefer to add a non-proprietary one NEAR the point that need fixing, instead of on another stylesheet (+1 file, +1 line, proprietary, too far from the CSS to fix, etc).

    In the end, one could use the solution he/she prefers, but still, there are more usability and mantainability issues using a nonsemantic in-comment instruction. One could agree with MS (lte/eq) or not (star-like hacks), but still we have to face this: we have to handle another conditional.

  23. I’ve been moving towards conditional comments for quite a while as it seems a more elegant way of doing things than hacks. This has fortunately meant that CSS-wise i have not had too many problems. The odd site here and there has needed an IE7 specific stylesheet but in the main what has worked in Firefox (my development browser) has worked for IE7.
    I have had quite a few issues with javascript compatibility and have been in conversation with some microsoft people about it. I ended up changing 10 sites javascript coding which was a pain.
    Zoom is my major problem, it seems to have very eratic behaviour at times,even on basic text. For example http://triton.metafaq.com/templates/triton/main/disclaimer is fine at 100% and 125% but the text in ‘up-to-date’ breaks quite badly at 150%. This is one of the lesser problems on one of our smaller sites, but it seems to me through various experimentation and blog reading that there are some rudimentary bugs in this zoom function that could do with being sorted out ASAP

  24. I take this post as an opportunity to ask Mr.Zeldman, whether the developer can use condtional comments? Does it really affect standards and semantics? I see this as the best way available for us, till we see the demise of IE6 and lower versions.

    By the way, I have read your second edition of Designing With Web Standards. I enjoyed your distinct style of writing things! And now I have become obsessional about standards and semantics!! I started learning CSS just before 6 months!!

    Thanks for opening up this discussion!

  25. I think I may have actually found a new IE7 bug encountered by no one else that I can find. It happens when you put a background image on an INPUT or TEXTAREA element…

    If a user put more text in a field than was allowed by the width of the INPUT the background image used to scroll with the text in IE6 and below so you’d make the background attachment “fixed” and hey presto, no more scrolling. Not so with IE7.

    Since they “corrected” the background attachment issues with IE7 there is now no way of having an overflow of text in a INPUT or TEXTAREA element and not having the background scroll with the text, and if you try “background-attachment: fixed;” forget it, the background doesn’t even display.

    I’ve been racking my brain for a solution to this problem and tried a bunch of different things…. the closes i’ve been able to come up with is putting “background-position: 100% 100%;” on the element, but the background image only seems to line up every second character (after it starts overflowing).

    Any ideas from all of you bright people?!!

    Thanks!!!

  26. […]This hack may or may not work in the next version of IE. Considering that it relies on a bug that may cause lots of problems elsewhere (+ combinators in IE7 have incorrect behavior around HTML comments), I think it will likely be fixed in the next version of IE or the version after.[…]

  27. Been pretty lucky so far with no extra work required on any of my sites – all down to a more is less attitude, starting with the right stuff (Firefox etc) then carefully providing CSS solutions as opposed to hacks where possible. All sounds like the basis recommended in someones book to me.

  28. It’s probably not the best sollution, but it’s easy for now. When the next IE comes out I will most likely have to change the CSS again anyway. Conditional Comments won’t save me from future IE rendering bugs.

  29. just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html. Works for IE 5+. Simple

  30. I have had quite a few issues with javascript compatibility and have been in conversation with some microsoft people about it. I ended up changing 10 sites javascript coding which was a pain.

  31. Kleiner Tipp an die CSSler unter uns: Spätestens jetzt ist der Zeitpunkt, das praktische auto-clearing floats zu erneuern. inline-block is the new-and-improved method for auto-clearing floats.” Use it to replace display: inline-table;.) …Quelle

  32. I’m having trouble with WordPress. Basically I’m trying to post a snippet of C++ code in a post on my blog, and everytime I do it gives me a 503 error. It works fine if I don’t post any of the code snippet. Any idea what’s going wrong here…..?

  33. The Cause? part of the problem is the obvious defects at the application level – actionscripts/javascripts that are shiite, and using the damn Flash as a video delivery instead of a proper codec like h.264) …. but i suspect that theie are deep system issues in the event model & the thread model for osx itself that are also to blame.Thanks..!

  34. The Cause? part of the problem is the obvious defects at the application level – actionscripts/javascripts that are shiite, and using the damn Flash as a video delivery instead of a proper codec like h.264) …. but i suspect that theie are deep system issues in the event model & the thread model for osx itself that are also to blames.

  35. I’m having trouble with WordPress. Basically I’m trying to post a snippet of C++ code in a post on my blog, and everytime I do it gives me a 503 error. It works fine if I don’t post any of the code snippets..

  36. thankfully all the sites i’ve done in the last year didn’t break in IE7… the only problems i’ve had with came from testing newer sites still in development.

  37. IE7 zooms absolutely everything – except the background image on the body element. Many of my sites use the body background image as part of the layout, and so don’t look great when zoomed…

  38. I keep encountering the folowing problem. Anytime I add links in the dashboard, all my posts disappear and in the side bar appaers a message:

  39. my opinion is mozilla firefox is not getting better, every update leaves another bug. Hope ie 8 ll be much better than ie 7 so i can ve an alternative.

  40. I believe that some caveats need to be given to both sides before anyone jumps to conclusions about it being the latest example of quackery

  41. Actually IE will zoom the entire page, causing horizontal scrolling, wheras Opera tries it’s best to prevent horizontal scrolling.

  42. I believe that some caveats need to be given to both sides before anyone jumps to conclusions about it being the latest example of quackery

  43. The Cause? part of the problem is the obvious defects at the application level – actionscripts/javascripts that are shiite, and using the damn Flash as a video delivery instead of a proper codec like h.264) …. but i suspect that theie are deep system issues in the event model & the thread model for osx itself that are also to blame.Thanks..!

  44. I think I may have actually found a new IE7 bug encountered by no one else that I can find. It happens when you put a background image on an INPUT or TEXTAREA element…

    If a user put more text in a field than was allowed by the width of the INPUT the background image used to scroll with the text in IE6 and below so you’d make the background attachment “fixed” and hey presto, no more scrolling. Not so with IE7.

    Since they “corrected” the background attachment issues with IE7 there is now no way of having an overflow of text in a INPUT or TEXTAREA element and not having the background scroll with the text, and if you try “background-attachment: fixed;” forget it, the background doesn’t even display.

    I’ve been racking my brain for a solution to this problem and tried a bunch of different things…. the closes i’ve been able to come up with is putting “background-position: 100% 100%;” on the element, but the background image only seems to line up every second character (after it starts overflowing).

    Any ideas from all of you bright people?!!

    Thanks!!!

  45. Many of my customers experienced both problems so I first had to solve the svchost.exe error – I did so with completely disabling Windows Update and the related services (Automatic Update & BITS) through a GPO. After that, no more svchost.exe problems showed up, but then the Outlook problem got more attention. After deinstalling all Office updates

Comments are closed.