see whatever…

jump to menu

November 8, 2006

IE7 CSS bug cutting off content when using font-style

Filed under: CSS,Web — see @ 7:34 pm

I noticed a somehow familiar bug on one of my websites. The image on the left side (the drawing on white) is cut off just after about 5mm. I tried all kind of hacks, using display: inline-block etc. but no luck
Then I noticed if I do not style the main headline (a h2) as font-style: italic IE7 does actually shows the complete picture.

Really weired bug and my almost bright view on IE7 is darkening already. I guess this is a bug other people have but I have not found anything via google yet. There is quite a few things going on with floating which tends to draw bugs but this did not even happen in IE 5, 5.5 or 6.

very upsetting… I am not sure if I should try fix it, ignore it or wait for an explaining fix. I guess I hack a bit myself…

UPDATE:

Setting display: inline-block; on the adjescent h2 does solve the problem as inline-block seems to be the golden IE7 bugsquisher tool. Still very uncomforting. And I know I still seem to have a peek-a-boo bug in IE6 in there now, but I have to go so that one has to wait (and is not as annoying as the other)

17 Comments »

  1. Same thing happened to me: IE7 lost the left column on one of my sites. I chased it down to font-style: italic within an h2. I’ll give the display:inline-block a try to see if that helps.

    BTW, the link at the top of this page to your websites (http://cdot.de/portraits/) is returning a 404 error.

    Comment by Mike — November 22, 2006 @ 6:04 am

  2. Thanks for the 404 report, a simple typo ;) fixed

    Comment by see — November 22, 2006 @ 7:43 pm

  3. I had a single page in my website lose all it’s content because of this italics issue. It was a paragraph tag that contained a tag, which hadn’t been problematic in IE6. I changed it to an tag, same result, disappearing content. I change the paragraph style to font-style:italic. Same result, no content. I removed italics completely, and it all came back! It is in an absolutely positioned div. I don’t know if that’s relevant or not. Notably, adding display-inline worked only if there were no other tags in the paragraph. If I added display-inline to the paragraph style, and had a span later in the paragraph, it disappeared again. I hope this all helps someone.

    Comment by Patricia L — February 14, 2007 @ 7:20 pm

  4. republished with escapes, thanks for the info!

    I had a single page in my website lose all it’s content because of this italics issue. It was a paragraph tag that contained a <em> tag, which hadn’t been problematic in IE6. I changed it to an <i> tag, same result, disappearing content. I change the paragraph style to font-style:italic. Same result, no content. I removed italics completely, and it all came back! It is in an absolutely positioned div. I don’t know if that’s relevant or not. Notably, adding display-inline worked only if there were no other tags in the paragraph. If I added display-inline to the paragraph style, and had a span later in the paragraph, it disappeared again. I hope this all helps someone.</i></em>

    Comment by see — February 14, 2007 @ 7:40 pm

  5. this site ie7 bug is theire this menu contaning words not displayed perfectely after first word come any space nextword not displayed ie6 have no problem this menu worked perfectely but ie7 menu make a problem

    Comment by brahmam — March 9, 2007 @ 6:25 am

  6. Hey – thanks for the fix with inline-block. I just spent two hours tracking the problem down to the italics style (also broken for oblique, btw). The display: inline-block did the trick.

    Comment by Chris Holleman — March 27, 2007 @ 8:57 pm

  7. I’ve been tracking this issue down for the past couple of hours, hope ie8 is better.

    Thanks for the workaround!

    Comment by Personalised Gifts — April 6, 2008 @ 6:20 pm

  8. weird… seemed to be the em tag for me… getting rid of it clears it up.

    Comment by jd — April 14, 2008 @ 7:51 pm

  9. This is the 3rd IE bug in less than 2 weeks.

    That said, I am getting a similar issue. I’ve lost my whole sidebar ONLY in IE7, and I am able to virtually toggle it on and off by removing a font-size:11px declaration on h2 headings inside the div.

    The really weird thing is – if I change it to say 17px – everything reappears! Like magic, but as soon as it gets down to a manageable size (anything below 15px), the entire div disappears. Classic.

    Comment by Tison — July 20, 2008 @ 7:50 am

  10. Alright, after some additional research – this post is correct. If it’s disappearing, you need to declare something that will call ie’s haslayout. This could include but not limited to: zoom:100%, or min-height, or inline-block, etc.

    But to note – you will have to assign this to 1) Every element in the div 2) The div itself 3) Any child divs contained therein. Then, they will all come back to life. I ended up using a IE7 only conditional CSS code:

    *+html .somediv, *+html .somediv *, *+html .somediv.somechilddiv {zoom:100%} /** IE7 ONLY YAAAY **/

    There hope that helps someone. IE please go away.

    Comment by Tison — July 20, 2008 @ 8:20 am

  11. [...] IE7 CSS bug cutting off content when using font-style by Christof Höke [...]

    Pingback by IE7 Content Hiding Bug | David’s Technical Musings — March 19, 2009 @ 1:31 am

  12. Thanks for sharing it.

    Comment by Amar Jadhav — April 30, 2009 @ 11:18 am

  13. I hate IE I wish it would just work like ever other browser. It doesn’t even display all the standard CSS Font Styles

    Comment by Greyholme — April 30, 2009 @ 11:35 pm

  14. we had most of our site done by a company and just added products and tweaked it ourselves.. found that firefox and opera no issues but IE tended to change appearance formatting and just seems alot more “buggy” than the others, i put a background image on a page and tried to float 11px text over the top.. didnt appear, changed to 12px and it did… but went over the edge of the pic… sucks!! lol

    Comment by Focus Prints — September 3, 2009 @ 2:35 pm

  15. following on from previous comments… tried the text at 11.5pt and it worked fine.. i think scripting results should be more uniform between the browsers.. makes it a pain to start writing script to recognise what browser the visitor is using and writing separate script for each browser… aaarrggghh!!

    Comment by canvas prints — September 16, 2009 @ 7:57 pm

  16. Thank for this !!

    Comment by font styles — December 29, 2009 @ 3:55 am

  17. I am pulling my hair out over IE7!!

    Comment by scranton web design — July 27, 2010 @ 11:38 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress