How to fix the IE9/WordPress Twenty Ten Header Image Display Problem?

Question

Just loaded IE9. Looks good. Impressive stats on what works on IE9.

One thing that does not work. On any site that uses Twenty Ten, the default graphic is shifted to the right and is only partly visible.

I saw no resolution, just a bunch of opinions at wordpres.org.

Does anyone actually know if this an IE9 problem or a WordPress problem? And is there a solution. I've tried other themes and they seem to work fine.

If this problem only occurs in IE9, then it is an IE9 problem. TwentyTen works in all other browsers just fine ... Also, keep in mind that IE9 is still in beta and as such shouldn't be considered "complete" until fully released. It's likely that whatever bug is causing your alignment issue will be resolved before the official product release. — EAMann, Sep 17 '10 at 14:28

Chris_O · Accepted Answer · 2010-09-24 21:24:26Z

3

It is a bug. See WordPress Trac Ticket#14883. If you change

#branding img {display:block;} to display:inline; it fixes the image being shifted right but does not fix the white space between the border.

Update:

The ticket still has not been accepted as a bug but a patch has been submitted.

Update

The patch has been accepted and the IE9 Header image display problem will be fixed in the next release.

answered Sep 17 '10 at 16:09

Chris_O

19.8k5 gold badges56 silver badges89 bronze badges

To fix the whitespace, add the following exactly below the #border img block: #branding { line-height: 0; } – Igal Tabachnik Sep 20 '10 at 13:36
@hmemcpy good catch. Do we know if this is a css bug or a Twentyten bug yet? I haven't had a chance to research the standards and I'm more of a CSS Hacker than a Ninja. – Chris_O Sep 20 '10 at 14:26
Sorry, most I've ever done with CSS is turn various properties on and off in Firebug :) – Igal Tabachnik Sep 20 '10 at 17:09

add a comment |

1 Answer 1