IE7 CSS tweak show and tell

27 Oct 2006 4 pm eastern

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]

Filed under: Browsers, Design, Standards

185 Responses to “IE7 CSS tweak show and tell”

John Lascurettes said on 27 October 2006 at 5:46 pm:

Already put in a comment (#64) over at 456 Berea Street that anything that triggers hasLayout will clear (more accurately shrink-wrap) in IE7. I find min-width:0 to be quite handy for that as anything almost always has a width wider than that.
Már said on 27 October 2006 at 6:55 pm:

Here’s a quick explanation of the way I tame the beasts: Tackling the IE factor – IE7 update
Circle Six Blog » Blog Archive » I Heart Not Microsoft said on 30 October 2006 at 9:05 pm:

[...] Jeffrey Zeldman writes in IE7 CSS tweak show and tell: 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. [...]
News Feeds - dahardknock.com said on 31 October 2006 at 11:09 pm:

[...] IE7 CSS tweak show and tell What hacks have you jettisoned, and with what have you replaced them? [...]
CSS Beauty | Archives - Oct, 2006 said on 31 October 2006 at 12:13 am:

[...] IE7 CSS tweak show and tell. Zeldman asks, what hacks have you jettisoned, and with what have you replaced them? [...]
Ash Haque said on 28 October 2006 at 3:44 am:

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
Aleksandar said on 28 October 2006 at 4:59 am:

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.
Mark Wubben said on 28 October 2006 at 5:16 am:

Actually IE will zoom the entire page, causing horizontal scrolling, wheras Opera tries it’s best to prevent horizontal scrolling.
Seb Duggan said on 28 October 2006 at 5:24 am:

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…
Emil Stenström said on 28 October 2006 at 5:45 am:

I’ve found that [br style="clear: both"] does not work to clear with IE7, but changing it to a div works. Might be interesting for some…
Ben Ryan said on 28 October 2006 at 7:19 am:

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.
Folletto Malefico said on 28 October 2006 at 7:52 am:

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).
markhealey.net » Browser Bullies said on 28 October 2006 at 11:17 am:

[...] A lot of developers have been talking about it for months, so it is not with much fanfare we celebrate the news. Internet Explorer 7 has finally been released in its “polished” state for the general public to consume. There’s no telling when Windows XP will start automatically issuing the browser through its built-in Windows Update feature, but I’m guessing it might be soon. Meantime, web designers the world over are scrambling to make sure their sites perform as intended in IE7 (Talk bugs, hacks, and more at Zeldman.com). And it’s not just Microsoft that’s turning up the heat. Last Tuesday, the Internet Explorer team in Redmond sent a cake to the Firefox team at Mozilla to congratulate them on their Firefox 2.0 — this developer’s browser of choice — official release. [...]
michael said on 28 October 2006 at 11:47 am:

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.
Simon Griffee said on 28 October 2006 at 8:07 pm:

I disagree that conditional comments are bad. The following article has been very useful: Using conditional comments to fix bugs specific to Internet Explorer without soiling your main stylesheet.
Michiel van der Blonk said on 28 October 2006 at 10:00 pm:

I have a problem with http://www.ahata.travel which is very annoying, maybe someone can tell me what is wrong. The menu which is AP just won’t show in IE7. To me it looks like it has something to do with z-index.
New Del.icio.us popular sites said on 31 October 2006 at 10:01 pm:

[...] New popular sites (Just new in last 24h). Jeffrey Zeldman Presents : IE7 Bugs and Fixes, Part I [...]
Ben Ryan said on 29 October 2006 at 4:04 am:

@ 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.
Words » Blog Archive » links for 2006-10-29 said on 29 October 2006 at 5:18 am:

[...] Jeffrey Zeldman Presents : IE7 CSS tweak show and tell (tags: zeldman ala ie7 bug css hack ie webdev) [...]
milo said on 29 October 2006 at 5:32 am:

How to prevent IE7 from horizontal scrolling then?
Have some probs with the hoverbox in IE7?
paul said on 29 October 2006 at 11:03 am:

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.
2006.10.29 - #FF00AA said on 31 October 2006 at 3:27 pm:

[...] IE7 sonne le glas des em et autres font-size relatifs. Alleluia, �a a toujours �t� un peu le bordel. [...]
Klaus Hartl said on 29 October 2006 at 5:16 pm:

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
David Hammond said on 29 October 2006 at 5:28 pm:

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.
SimpleBits | IE7 CSS tweak show and tell said on 31 October 2006 at 5:29 pm:

[...] Zeldman asks for your IE7 workarounds. Good thread so far: min-height: 1px; for triggering hasLayout looks to be very promising (and valid!). Visit site [...]
IE7 float clearing | published @ aplus moments said on 29 October 2006 at 6:03 pm:

[...] Have you seen this, then: http://www.zeldman.com/2006/10/27/ie7showandtell/ ? [...]
Matt Taylor said on 29 October 2006 at 6:34 pm:

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.
Brett Merkey said on 29 October 2006 at 7:50 pm:

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
Guinevere said on 29 October 2006 at 8:25 pm:

I found I still have to use the z-index hack described here in IE 7:

http://www.aplus.co.yu/lab/z-pos/
Damien said on 30 October 2006 at 12:07 am:

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.
nex said on 30 October 2006 at 12:53 am:

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.”
SitePoint Forums - Zeldman on IE7, Auto-clearing Floats and More said on 31 October 2006 at 1:50 am:

[...] Zeldman on IE7, Auto-clearing Floats and More A quick, interesting read for those that haven’t read it yet. [...]
Kevin Tamura said on 30 October 2006 at 2:47 am:

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.
Egor Kloos said on 30 October 2006 at 6:14 am:

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.
Jeffrey Zeldman said on 30 October 2006 at 1:17 am:

“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.
gerben said on 30 October 2006 at 8:35 am:

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.
Kris Noble said on 30 October 2006 at 9:52 am:

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.
G3 said on 30 October 2006 at 11:46 am:

maybe the * hack, but otherwise just the use of nifty conditional statements to serve up the css sheet to the right browser.
OPC eBusiness Toolbox » IE7 CSS tweak show and tell said on 30 October 2006 at 5:14 pm:

[...] Jeffrey Zeldman discusses the new features of Internet Explorer 7 [...]
Sophie Dennis said on 31 October 2006 at 10:20 am:

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
davidbisset.com » IE7 CSS tweak show and tell said on 1 November 2006 at 6:49 pm:

[...] Jeffrey Zeldman hosts a nice area that has some tips for IE7. I’d imagine more of these will be popping up in the coming weeks. [...]
Max Design - standards based web design, development and training » Some links for light reading (2/11/06) said on 1 November 2006 at 7:33 pm:

[...] IE7 CSS tweak show and tell [...]
Web Standards Group: Here’s a Bit of Light Reading : Jason Ruyle said on 1 November 2006 at 10:17 pm:

[...] IE7 CSS tweak show and tellhttp://www.zeldman.com/2006/10/27/ie7showandtell/ [...]
Terrence Wood said on 2 November 2006 at 2:24 am:

I just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html. Works for IE 5+. Simple.
Jeffrey Zeldman Presents : 1969 : December : 31 said on 2 November 2006 at 9:43 am:

[...] IE7 CSS tweak show and tell [...]
Folletto Malefico said on 2 November 2006 at 8:13 pm:

@ 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.
Lonnie West said on 3 November 2006 at 9:38 am:

I posted an article about this as well, (http://zippybackflash.com/blog/?p=61#comments)
and got a response from a Microsoft employee saying that they are currently working on fixing the Page Zoom implementation.

I hope so! It’ll be great when it works.
Intense Minimalism » Internet Explorer 7 in the wild said on 4 November 2006 at 1:14 pm:

[...] Paolo Dodet 2006 11 03 at 12:23 Caro Foletto, Mi chiamo Paolo e faccio siti in Brasile. Ho letto il tuo intervento nel blog di Zeldman sui "conditional comments". Mi dispiace dirti che non è come dici visto che i "conditional comments" possono essere aggiunti al markup esattamente come un qualsiasi css esterno, e cioè usando il tag <link />. Un abbraccio dl Brasile Paolo [...]
IE7 page zoom: is this for real? at houbi.com Blog said on 8 November 2006 at 7:05 am:

[...] Zeldman article about the consequences of hacks on IE7-layouts. [...]
Web Dev pains of IE7? - MacNN Forums said on 8 November 2006 at 9:37 pm:

[...] I’ve just got a POS Dell w/XP so that I can see how things look in IE6 and whether I need to add works-around hacks to a site… What are other developers seeing from release of IE7? Are most business users upgrading? Is it something that MS is *forcing* XP users to upgrade… so that there will soon be absolute need to combine new hacks to get CSS to work properly/universally? [ There's so much stuff popping up at http://www.zeldman.com/2006/10/27/ie7showandtell/ that I've not had time to read it line-by-line. ] __________________ TOMBSTONE: "He’s trashed his last preferences" [...]
Manual said on 10 November 2006 at 3:24 am:

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.
James Leslie said on 10 November 2006 at 6:20 am:

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
Filter for 29/10 2007 - Felt said on 10 November 2006 at 9:20 am:

[...] Jeffrey Zeldman: IE7 CSS tweak show and tell The first IE7 bugs and hacks are showing up, some good stuff in the comments. Also IE7 Bugs and Fixes, Part I [...]
Chandra said on 13 November 2006 at 3:02 pm:

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!
Jason Berry said on 15 November 2006 at 12:41 am:

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!!!
Linky na víkend 35 a ukážka ľudskej neznalosti na depi.sk - IT & Life Weblog said on 19 November 2006 at 11:12 am:

[...] IE7 CSS tweak show and tell – Jeffrey Zeldman na tému IE7 a CSS [...]
Web Design References: Cascading Style Sheets said on 21 November 2006 at 8:38 am:

[...] IE7 CSS Tweak Show and Tell – Jeffrey Zeldman. [...]
LexaT.org » Blog Archiv » Microsoft macht ernst said on 23 November 2006 at 5:03 am:

[...] 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 [...]
Scuttle: orest: rrc.dmt.wd3 said on 23 November 2006 at 10:57 am:

[...] Jeffrey Zeldman Presents : IE7 CSS tweak show and tell 23-11-2006 to ie7, rrc.dmt.wd3 [...]
Quick Fix For IE7 Display Issues | Smiley Cat Web Design said on 27 November 2006 at 9:19 pm:

[...] IE7 CSS tweak show and tell [...]
» Blogged by Christian Watson - Quick Fix For IE7 Display Issues - My Web Design Blogs said on 6 December 2006 at 8:53 am:

[...] IE7 CSS tweak show and tell [...]
» Blogged by Christian Watson - Quick Fix For IE7 Display Issues - Best Web Design Blogs said on 8 December 2006 at 1:49 pm:

[...] IE7 CSS tweak show and tell [...]
mi3dot.org :: View topic - textarea background i IE 7 said on 18 December 2006 at 3:00 pm:

[...] hmmm http://www.zeldman.com/2006/10/27/ie7showandtell/#comment-5190 no idea EDIT: whoops htio sam pejstati dva linka, ali sam isti dvaput Last edited by Sulien on 18.12.2006 19:11; edited 1 time in total [...]
IE 7 problem with overflow said on 10 January 2007 at 11:57 am:

[...] LordMerlin, I fully agree with you on the principle of the whole thing. MS opened Pandora's box with IE3 or 4.(I think textboxes are ".inputbox" in CSS – see my previous post here.)Everyone, the following links may help:http://www.zeldman.com/2006/10/27/ie7showandtell/  (see other people's comments and links by scrolling down)http://mar.anomy.net/entry/2006/10/04/09.44.54/ [...]
Manuel-Hundehalter said on 21 January 2007 at 6:36 pm:

Has the 7 Explorer for approx. 8 weeks in enterprise, makes beautifully slow soon the same errors as the old 6er.
The NYS Forum IT Accessibility Committees November 2006 Newsletter said on 30 January 2007 at 4:59 pm:

[...] The general consensus seems to be that IE 7 is much more standards compliant than IE 6, although there is grumbling in the some of the web developer message boards about having to un-hack web content that was tweaked to display acceptably in IE 6. For more on some of the new features of IE 7, like full-page zoom in, read Jeffrey Zeldman’s column entitled “IE7 CSS Tweak Show and Tell” at http://www.zeldman.com/2006/10/27/ie7showandtell/. [...]
Mebel said on 7 February 2007 at 11:26 am:

I just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html. Works for IE 5+. Simple.
Aukcje said on 20 February 2007 at 10:54 am:

[...]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.[...]
Freeway Talk :: View topic - Text: % and Preview said on 28 February 2007 at 12:03 pm:

[...] Is that why you switched to the px approach, Keith? Here is something interesting and timely. From web-standards guru Jeffrey Zeldman: http://www.zeldman.com/2006/10/27/ie7showandtell/ [...]
"css" in All Things CSS Tags on Ma.gnolia said on 6 March 2007 at 8:53 am:

[...] Jeffrey Zeldman Presents : IE7 CSS tweak show and tell [...]
Anastasia said on 14 March 2007 at 12:59 am:

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.
canli yayin said on 18 March 2007 at 2:09 pm:

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.
yesil perde said on 24 March 2007 at 7:19 am:

Has the 7 Explorer for approx. 8 weeks in enterprise, makes beautifully slow soon the same errors as the old 6er
msn ifadeleri said on 16 April 2007 at 8:43 am:

Has the 7 Explorer for approx. 8 weeks in enterprise, makes beautifully slow soon the same errors as the old 6er.
Chat said on 8 May 2007 at 4:30 am:

just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html. Works for IE 5+. Simple
corner-modetreff.at said on 10 May 2007 at 1:21 pm:

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.
Araba yarışları said on 27 June 2007 at 11:07 am:

Zoom is my major problem, it seems to have very eratic behaviour at times,even on basic text. For example
ceviri said on 1 July 2007 at 12:49 pm:

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.
İngizce Kursu İngilizce Dersi said on 2 July 2007 at 6:52 am:

The reasons you’ve listed for hating conditionals are either incorrect or can be bypassed with a little effort.
Księgowość said on 3 July 2007 at 5:47 am:

Though I never liked the MS IE, this version really is functioning very satisfactory and you can work on it without problems.
Ann said on 9 July 2007 at 5:03 pm:

So are Mozilla Firefox and Opera better than IE?
Turkey Holiday - History - Guide said on 10 July 2007 at 8:05 am:

Last Tuesday, the Internet Explorer team in Redmond sent a cake to the Firefox team at Mozilla to congratulate them on their .
İş Elbisesi - İş Elbiseleri said on 12 July 2007 at 6:57 am:

Vestibulum non diam eu turpis convallis auctor. Sed vel nibh. Nunc vel neque imperdiet arcu mattis hendrerit. Nunc ac purus.
bayan giyim said on 17 July 2007 at 8:10 am:

I just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html. Works for IE 5+.
muhabbet said on 18 July 2007 at 9:57 am:

I think that IE5.* is better than 7 because of using easy.
oyun said on 19 July 2007 at 12:34 pm:

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
Chat said on 19 July 2007 at 9:54 pm:

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…..?
Gunter said on 9 August 2007 at 2:28 am:

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..!
oyunlar said on 15 November 2007 at 4:49 pm:

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.
oyunlar said on 15 November 2007 at 4:49 pm:

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..
mirc said on 4 December 2007 at 7:49 am:

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.
diyet said on 14 January 2008 at 7:54 am:

Hi
I have did many sites with css. But I live problem between IE6 and mozilla. I will try IE7 now.
uzamax said on 17 January 2008 at 6:57 pm:

where is download IE7?
Bielizna said on 19 January 2008 at 3:32 am:

I have ie 7.0. I havent problem
webmasterdestek said on 24 January 2008 at 6:15 am:

very thanks…
CRM said on 24 January 2008 at 8:21 am:

Nice content, thanks a lot !
yutube said on 27 January 2008 at 1:30 pm:

I just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html.
kenan hudabi said on 28 January 2008 at 8:01 am:

I have did many sites with css. But I live problem between IE6 and mozilla. I will try IE7 now.
oktay usta said on 29 January 2008 at 6:20 pm:

thx
Oktay Usta
rockmarket said on 29 January 2008 at 6:32 pm:

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…
youtube said on 29 January 2008 at 7:27 pm:

That’s great! I’m looking forward to it.
seksi giyim said on 30 January 2008 at 8:48 am:

this is a hot – http://www.seksigiyim.org
übersetzungen said on 3 February 2008 at 8:59 pm:

There are many useful informations in this great article…I really enjoy reading the whole blog that you write. Thanks!
bilgi yarışması said on 7 February 2008 at 9:34 am:

I have did many sites with css. But I live problem between IE6 and mozilla.
Zedax.org said on 7 February 2008 at 1:39 pm:

Mozilla Firefox and Opera are better than IE
ilahi indir said on 11 February 2008 at 2:21 pm:

thankss I have did many sites with css. But I live problem between IE6 and mozilla.
mirc said on 16 February 2008 at 8:10 am:

thanks web site… forever zirve.org
youtube said on 17 February 2008 at 11:23 am:

thannks a lot
mecbur said on 8 May 2008 at 8:34 am:

thanks evrything ;)
oyunlar1 said on 9 May 2008 at 2:10 am:

thankss I have did many sites with css. But I live problem between IE6 and mozilla.
Umamiblog » Blog Archive » IE7 said on 9 May 2008 at 11:23 am:

[...] are also some good comments on the aptly titled IE7 CSS tweak show and tell at Zeldman’s [...]
Serkan ÇUBUKÇU said on 10 May 2008 at 1:44 pm:

Actually IE will zoom the entire page, causing horizontal scrolling, wheras Opera tries it’s best to prevent horizontal scrolling.
travesti said on 12 May 2008 at 9:51 pm:

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:
jigolo said on 12 May 2008 at 9:51 pm:

Anytime I add links in the dashboard, all my posts disappear and in the side bar appaers
transseksuel said on 12 May 2008 at 9:52 pm:

Anytime I add links in the dashboard, all my posts disappear and in the side bar
IE7 CSS tweak show and tell: etc: quick links to good stuff said on 14 May 2008 at 2:33 pm:

[...] If you’re interested in CSS and what is (or isn’t) working with IE7, you can get a lot of great tips from reading this post and it’s associated comments. Jeffrey Zeldman Presents : IE7 CSS tweak show and tell. [...]
Resim Upload said on 14 May 2008 at 5:19 pm:

thanks
Resimler said on 14 May 2008 at 8:12 pm:

thanx for this information ie7 is right browser.
oyunyeri said on 16 May 2008 at 1:29 am:

Anytime I add links in the dashboard, all my posts disappear and in the side bar appaers
2006 November - depi.sk - ešte lepší blog said on 20 May 2008 at 2:33 pm:

[...] IE7 CSS tweak show and tell – Jeffrey Zeldman na tému IE7 a CSS [...]
muhabbet said on 20 May 2008 at 5:04 pm:

muhabbet
afrodizyak said on 12 June 2008 at 9:54 am:

thanks for links afrodizyak
Oyunlar said on 4 September 2008 at 11:02 pm:

I refer all time mozilla, maybe Google Chrome change my mind
cool pictures said on 9 September 2008 at 11:34 pm:

thank u for this useful post.
tatil köyleri said on 9 September 2008 at 11:35 pm:

thanx.good site.
Lida said on 13 September 2008 at 4:19 am:

Thanks For post
FenerBahçe said on 13 September 2008 at 4:20 am:

thanks xxx
resimler said on 29 September 2008 at 5:31 pm:

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.
Chat said on 2 October 2008 at 5:04 pm:

Thanks..
Ödev said on 2 October 2008 at 5:04 pm:

Thanks to..
partner said on 5 October 2008 at 6:46 pm:

tnx admin..
Chat said on 7 October 2008 at 3:57 pm:

Thanx..
izlekop said on 15 October 2008 at 2:54 am:

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
alışveriş said on 15 October 2008 at 8:15 am:

thanks links that somne
kelebek said on 20 October 2008 at 2:12 am:

There are many useful informations in this great article…I really enjoy reading the whole blog that you write. Thanks!
Hack said on 1 November 2008 at 4:35 pm:

Actually IE will zoom the entire page, causing horizontal scrolling, wheras Opera tries it’s best to prevent horizontal scrolling.
leoo said on 30 November 2008 at 3:58 pm:

thankss I have did many sites with css. But I live problem between IE6 and mozilla.
yurtiçi nakliyat said on 3 December 2008 at 6:44 am:

thanks
cennetin çocukları said on 3 December 2008 at 6:44 am:

good
Lida Dai Dai Hua Jiao Nang Seo Yarışması said on 3 December 2008 at 6:45 am:

tanks
fritz said on 3 December 2008 at 6:35 pm:

thankssssssssssssssssssssssssss
mike said on 3 December 2008 at 6:36 pm:

thanks
tomBoy said on 3 December 2008 at 6:37 pm:

thanks
peter said on 3 December 2008 at 6:39 pm:

amazing
siteekle said on 3 December 2008 at 6:40 pm:

very cool
siteekle said on 3 December 2008 at 6:43 pm:

coolllllllllllllll
forum said on 3 December 2008 at 6:48 pm:

good job, very nice,
tratz said on 3 December 2008 at 8:10 pm:

niceeee
salt said on 3 December 2008 at 8:18 pm:

cool site. realy good job
Name said on 3 December 2008 at 8:24 pm:

I just throw IE into quirks mode with a comment before the DOCTYPE and fix it with * html.
NOName said on 4 December 2008 at 4:20 am:

thanks for links afrodizyak
thomas said on 4 December 2008 at 5:20 am:

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
sanane said on 4 December 2008 at 2:33 pm:

thanks, nice blog
muhabbet said on 4 December 2008 at 3:01 pm:

Beautiful article. Happy Days
paul said on 4 December 2008 at 5:13 pm:

For sharing thank you very much a very attractive lottery sharing wish success
lisa said on 7 December 2008 at 1:10 pm:

thanks
verona said on 9 December 2008 at 11:28 am:

Firefox is better than internet explorer
StefanV. said on 12 December 2008 at 8:52 am:

I addlinks in the dashboard the side bar appaers
araba said on 13 December 2008 at 12:41 pm:

I think firefox is very very useful.
Will said on 15 December 2008 at 10:04 am:

thank you for sharing
Toni said on 15 December 2008 at 6:38 pm:

good job, very informativ site
Saç Modelleri said on 23 March 2009 at 12:32 am:

my opinion is mozilla firefox better than ie7
lig tv izle said on 27 March 2009 at 2:40 am:

ThanX
açıköğretim said on 27 March 2009 at 4:24 pm:

Thanks
metin2 said on 27 March 2009 at 4:26 pm:

thank for post.
ilahiler said on 31 March 2009 at 7:10 am:

thankss so much
IE7 float clearing | published @ aplus moments said on 16 April 2009 at 4:58 pm:

[...] Have you seen this, then: http://www.zeldman.com/2006/10/27/ie7showandtell/ ? [...]
WEB 3.0 » Blog Archive » ¿Así que querías saber (casi todo) de CSS? said on 17 April 2009 at 9:35 pm:

[...] IE7 CSS Tweak Show and Tell – Jeffrey Zeldman [...]
AccessBlog - Nachrichten �ber Barrierefreies Webdesign: Einfach f�r Alle said on 20 April 2009 at 10:21 pm:

[...] Jeffrey Zeldman: �IE7 CSS tweak show and tell� [...]
medyum said on 25 April 2009 at 3:19 am:

thank you
this blog nice..
medyum said on 25 April 2009 at 3:20 am:

tesekkurler…

i am turkish hodja ( medium )

thanks admin
Konteyner said on 27 April 2009 at 3:47 pm:

my opinion firefox better than ie7
Haber said on 27 April 2009 at 3:48 pm:

firefox is the best… :)
Oyun Oyna said on 12 June 2009 at 5:24 am:

thanks but ie8 new
Bağlama Büyüsü said on 13 June 2009 at 5:37 am:

Hi
I have did many sites with css. But I live problem between IE6 and mozilla. I will try IE7 now.
facebook said on 10 August 2009 at 5:03 pm:

sure, mozilla is better than ie.
add link said on 12 August 2009 at 5:12 pm:

very informativ site, good site
kral oyun said on 22 September 2009 at 4:17 am:

has ie8 accurs same problems for css hacks?
kedsoft's css Bookmarks on Delicious said on 8 October 2009 at 9:01 am:

[...] Jeffrey Zeldman Presents : IE7 CSS tweak show and tell SAVE [...]
sohbet said on 4 November 2009 at 12:19 pm:

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..!
sAeid mOhammad hAshem said on 2 December 2009 at 4:28 am:

thanks but my opinion is firefox better than IE
Kredyty said on 25 December 2009 at 10:13 am:

IE represent no standards in css, html – Firefox held interpretation standard. Sorry form my english. Best regards.
araç sorgulama said on 29 December 2009 at 5:44 am:

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!!!
bakugan oyunları said on 9 March 2010 at 2:06 pm:

thankss I have did many sites with css. But I live problem between IE6 and mozilla.
oyunlar said on 10 March 2010 at 10:49 am:

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

27 Oct 2006 4 pm eastern

IE7 CSS tweak show and tell

185 Responses to “IE7 CSS tweak show and tell”

Best Ad Ever

Job Board