Muffinresearch Labs by Stuart Colville

Bug: IE7 absolutely positioned italics | 27 Comments

Posted in Browsers on 28th December 2006, 5:06 pm by

I recently discovered a rather bizarre bug that only seems to affect IE7. If you absolutely position italic text of any kind (text made italic through authors styling or something that is styled via the default browser stylesheet such as ems.) IE7 seems to screw up the rendering and ends up creating a horizontal scrollbar. This problem is best illustrated with an example page (View in IE7 to see the horizontal scrollbar). If you override the font-style then the scrollbar dissappears. Strange.

IE6 doesn’t have any problem with the same code which is interesting and suggests that this bug has been introduced into IE7.

I also noted that the same problem doesn’t exist when the page is rendered in quirksmode.

Figure 1: IE7 See the horizontal scrollbar.

screenshot showing horizontal scrollbars in IE7 caused by absolutely positioning italicized text

Figure 2: IE6 No problem

screenshot showing absolutely positioned italicized text

Post Tools

  • http://fberriman.com Frances Berriman

    That’s pretty interesting. I was marking up some quotes with italic cites and such just a couple weeks ago, and I was getting scroll bars. Can’t remember what I did now to get rid of them, so I’m not sure if it was the same bug, but I do remember scratching my head over it for a while. I’ll maybe play with what I had originally again and see if it is this!

  • http://heliologue.com Heliologue

    I fully expect this to be fixed by IE8.

  • http://www.kartooner.com kartooner

    I remember seeing this when I was messing around with IE7 a few months ago. I’ve yet to figure out why all of a sudden version 7 does this, while version 6 does not? It’s obvious a tweak they made, maybe to fix something triggered this display bug.

    It’s odd.

  • http://zproxy.wordpress.com zproxy

    As a workaround you can add

    p{
        overflow: auto;
}

    This will most likely fix the problem :)

  • http://muffinresearch.co.uk Stuart Colville

    Thanks zproxy, that looks to be a suitable fix. I’ve added a test page with that here: http://muffinresearch.co.uk/code/xhtmlandcss/ie7italics/index3.html

    Interestingly I found that zoom:1 also worked in this example but in my original page where the italic text was nested within a the div zoom:1 didn’t work. Thus I recommend using overflow:auto as zproxy suggested.

  • http://jayesel.net/ Jen

    Actually, a similar problem exists in IE6:
    http://www.thescripts.com/forum/thread96080.html

    I came across this a few months ago. It didn’t have anything to do with absolute positioning, at least not in my instance. I had a div that was float:right, and the text was italicized, giving a horizontal scrollbar. Very bizarre!

    Interesting to see that the problem still exists in IE7…. not surprising though :(

  • Pingback: Max Design - standards based web design, development and training » Some links for light reading (9/1/07)

  • Pingback: Scroll horitzontal al mesclar position: absolute i font-style: italic - a.css, esbudellant estàndards

  • Pingback: alberto

  • http://www.kelownamedia.com Cody

    Was wondering what the hell the problem was for about 2 hours before I decided to search google and came up with your site..

    I would have never have thought this would be a glitch in IE7..

    THANK YOU!

  • http://donky.org jordi

    damn IE7!

    all the afternoon trying to fix by myself this annoying thing until i thought, let’s search forums ;P

    i used overflow: auto where is the font-style: italic and it got fixed! thanks guys!

    jordi.

  • Gene Spesard

    I just ran into a somewhat similar problem in that when I had a div of menu items floated left all the CSS and links disappeared when there were italics to the right of it. It didn’t matter if the italics came from CSS or a <i> tag. Adding the overflow: auto; fix to the class I was using for the italics text “fixed” it.

  • AndreyT

    Strictly speaking, this has nothing to do with absolute positioning. It is a general big with italic text. Just try

    Text

    and you’ll get the same problem.
    overflow: auto’ does indeed help as a workaround.

  • http://www.booksourcemagazine/new/showstory.php?dir=editorial&sid=e0705 DonC

    Oh MAN!!! I spent an entire DAY today trying to figure this one out! This is THE most bizarre thing I’ve ever seen.

    My page had a bunch of text (from an xml document) in the middle column and two navigational columns, left and right (PHP includes). Any link lower on the page than the first italics in the center column would not work! Only in IE7, of course. The left and right columns were included BEFORE the middle column, so it really made no sense.

    Inexplicably, the overflow:auto on the center column worked. Crazy.

  • http://mmj48.com MMJ

    I just discovered this bug, very interesting. It also applies to the <em> tag.

  • stephan

    Stupid bug. It cost me an hour to find out what was the cause. Why doesn’t Microsoft repair it in one of the updates …?

  • Pingback: Scroll horitzontal al mesclar position: absolute i font-style: italic - blog.esbudellat, esbudellant estàndards

  • Preeti Verma

    Hi,
    I m new to scripting language. i have a similar problem. In my page i have bunch of text and user defined shapes like triangle. When ever i increase Zoom shapes get enlarged but text position remains same. bacause of that text and shape get overlapped. I tried ur solution but nothing happended. Please suggest
    Thanks in advance.

  • http://www.xhtml-conversion.in Lokesh

    I faced same problem but not due to italic, it was happening due to 100% width mentioned along min-width, something like that

    #wrap{
    width: 100%;
    min-width: 770px;}

    After, removing 100%, it’w working fine.

    Thanks for your solutions also

  • Pingback: WEB 3.0 » Blog Archive » ¿Así que querías saber (casi todo) de CSS?

  • http://www.databoysoftware.com Buddy

    “I fully expect this to be fixed by IE8.”
    Don’t hold your breath, Heliologue! And so what? The problem is here now and will be for some time. This bug seems to have many manifestations. And they are all Weird!

    Long floated box on the left; text to the right using standard, unchanged paragraph tags – as soon as a line comes along with the tag, no more left column from that point!

    overflow:auto (thanks zproxy) fixes the left box disappearance problem, but also eliminates the effect of the float, which now continues on as a column of white space to the end of the last paragraph that appeared next to the float. Subsequent paragraphs will align to the left column.

    Does anyone have any idea what is affecting what in this bug? Solving one problem while creating another, unfortunately, still leaves a problem.

  • http://www.databoysoftware.com Buddy

    OOps!

    from the begining of the italicized text, the line should read “as soon as a line comes along with the <em$gt; tag,…

  • http://zproxy.wordpress.com zproxy

    Maybe IE9 will fix it? :)

  • http://www.braincache.net/ Robert

    Well I’ve tried fixing it with overflow:auto and zoom:1 but for me it won’t go away.

    In IE8 the problem doesn’t exist, or in IE6, only 7 seems to be affected.

  • http://muffinresearch.co.uk Stuart Colville

    @Robert – if you can provide a link to an example I’d be interested to take a look.

  • Pingback: IE7 only: float bug on elements with italics and background properties | MikePadgett.com

  • Pingback: IE7 absolut schräg gestellt - mindgarden.de

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(3)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.513s.