IE6.0 bug: horizontal scrollbars using italic fonts
I came across this weird bug whilst tweaking my site and could not find any website mentioning it. Or maybe I am too silly to use the right wording for my search queries as I cannot imagine that I am the first person to have noticed it.
First off, my layout here complies to HTML Strict 1.0. It would even validate as HTML Strict 1.1 after a minor configuration change on my web server (so that it uses a different mime type for html documents). My CSS file I use also validates without the slightest warning. Now to the description:
Whenever I use a block element that has an embedded <i> or <em> tag (to mark a quote for example) or alternatively, I define italic as style for a block element and it contains text that stretches over multiple lines, IE 6.0 on Windows will freak out and add horizontal scrollbars without a visible cause. These bars disappear as soon as I remove italic from the offending style or the embedded <i> or <em> tag from the affected block element.
Perhaps someone incidentally reading this post knows how to work around this problem or a link pointing to a working hack? Any hint would be greatly appreciated, as I really would like to learn what exactly is causing this issue.
4 Comments »
Leave a comment
Posting comments requires Javascript to be turned on.
Hello Olliver,
I found that on the web:
http://www.positioniseverything.net/explorer/italicbug-ie.html
Awesome, thanks so much :-).
Makes me wonder why it did not show up when searching Google, perhaps I’m really too dim to pick up the right search terms ;-).
Btw, your photography site appears to be affected by the same bug. I checked your CSS file and you seem to do exactly in your menu, what is causing this problem (h2 is defined to use italic as font and the menu stretches over several lines).
Olliver
Oh !… the menu seems to be good for me in IE6 (it looks like it is in Firefox) but my title “photographies” is pulled on the right side of the windows and the horizontal scrollbar appears.
It’s because its position is absolute, so I must add a “left:0;”.
If you see a problem on your IE, and if you have 2 minutes, can you send me a screenshot please.
I’ve just checked with IE6.0 and it seems your modification did the trick: no more nasty horizontal scrollbars :-).
Olliver