IE7 bug - font-style: italic; not harmless?

Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

To make it easier to see what I'm on about, I've uploaded the same
page with a different stylesheet, this time with the offending lines
activated. The effect's the same with one line or both.

http://www.wessex100.org.uk/index_demo2.html
http://www.wessex100.org.uk/shared/wessex_demo2.css

On Sat, 27 Sep 2008 12:27:43 +0100, Rip van Winkle <rvw (AT) yoohoo (DOT) co.uk>
wrote:

Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

In article <5o5sd49bkujtphbca9v9ks9q02ofsr66sj (AT) 4ax (DOT) com>, on Sat, 27 Sep
2008 12:27:43 +0100, Rip van Winkle wrote:

Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

"Bug: IE7 absolutely positioned italics"
<http://muffinresearch.co.uk/archives/2006/12/28/bug-ie7-absolutely-positioned-italics/>

May be your problem.

p{ overflow: auto; } is suggested as a workaround.
--
Rasal Postill
Dance your Life - <http://www.danceyourlife.eu>

Rip van Winkle wrote:

Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

Its another peekaboo bug with IE that I unfortunately ran up against a
while ago. Frustrating thing it is a new but to IE7 and not present with
earlier versions. It happens when you have any italic text adjacent to a
floated block, it the italic touches the boundary of the float
everything below the italic text disappears! The culprit in my case was
the EM element.

http://www.littleworksstudio.com/temp/l2340/ver2.php

My solution was to change EM's default style to bold.

http://www.littleworksstudio.com/temp/l2340/

Gérard Talbot has been documenting IE bugs and it can be an informative
resource:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bugs in MSIE 7 for Windows

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Sat, 27 Sep 2008 11:21:12 -0400, "Jonathan N. Little"
<lws4art (AT) central (DOT) net> wrote:

Rip van Winkle wrote:
Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

Its another peekaboo bug with IE that I unfortunately ran up against a
while ago. Frustrating thing it is a new but to IE7 and not present with
earlier versions. It happens when you have any italic text adjacent to a
floated block, it the italic touches the boundary of the float
everything below the italic text disappears! The culprit in my case was
the EM element.

http://www.littleworksstudio.com/temp/l2340/ver2.php

My solution was to change EM's default style to bold.

http://www.littleworksstudio.com/temp/l2340/

Gérard Talbot has been documenting IE bugs and it can be an informative
resource:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bugs in MSIE 7 for Windows

Thanks guys for the info and links. Looks like I've got a fairly
standard instance of this problem.

And the good news is - the overflow: auto workaround works. I've added
it to the two <div>s where the problem was, and it's sorted. Good ol'
Microsoft, eh?

Rip van Winkle wrote:

On Sat, 27 Sep 2008 11:21:12 -0400, "Jonathan N. Little"
lws4art (AT) central (DOT) net> wrote:

Rip van Winkle wrote:
Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?
Its another peekaboo bug with IE that I unfortunately ran up against a
while ago. Frustrating thing it is a new but to IE7 and not present with
earlier versions. It happens when you have any italic text adjacent to a
floated block, it the italic touches the boundary of the float
everything below the italic text disappears! The culprit in my case was
the EM element.

http://www.littleworksstudio.com/temp/l2340/ver2.php

My solution was to change EM's default style to bold.

http://www.littleworksstudio.com/temp/l2340/

Gérard Talbot has been documenting IE bugs and it can be an informative
resource:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bugs in MSIE 7 for Windows


Thanks guys for the info and links. Looks like I've got a fairly
standard instance of this problem.

And the good news is - the overflow: auto workaround works. I've added
it to the two <div>s where the problem was, and it's sorted. Good ol'
Microsoft, eh?

Unfortunately, the only solutions in my scenario was was either remove
the italic or the floats!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Sat, 27 Sep 2008 17:58:51 -0400, "Jonathan N. Little" <lws4art (AT) central (DOT) net> wrote:

Rip van Winkle wrote:
On Sat, 27 Sep 2008 11:21:12 -0400, "Jonathan N. Little"
lws4art (AT) central (DOT) net> wrote:

Rip van Winkle wrote:
Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?
Its another peekaboo bug with IE that I unfortunately ran up against a
while ago. Frustrating thing it is a new but to IE7 and not present with
earlier versions. It happens when you have any italic text adjacent to a
floated block, it the italic touches the boundary of the float
everything below the italic text disappears! The culprit in my case was
the EM element.

http://www.littleworksstudio.com/temp/l2340/ver2.php

My solution was to change EM's default style to bold.

http://www.littleworksstudio.com/temp/l2340/

Gérard Talbot has been documenting IE bugs and it can be an informative
resource:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Bugs in MSIE 7 for Windows


Thanks guys for the info and links. Looks like I've got a fairly
standard instance of this problem.

And the good news is - the overflow: auto workaround works. I've added
it to the two <div>s where the problem was, and it's sorted. Good ol'
Microsoft, eh?

Unfortunately, the only solutions in my scenario was was either remove
the italic or the floats!

Have you tried &nbsp; each side of the italics? MSFT never did get the idea
that italics lean outside of the baseline text size rendering box, they've
had this problem since before win95 came out :/

Grant.
--
http://bugsplatter.id.au/

Grant wrote:

Have you tried &nbsp; each side of the italics? MSFT never did get the idea
that italics lean outside of the baseline text size rendering box, they've
had this problem since before win95 came out :/

Aside of it being really ugly to have to wrap EM element with &nbsp;
entities... I tried your suggestion anyways...it didn't work.

Face it, IE is just a POS browser! Can't wait for the butt-load of new
"feature" version 8 with provide!

<dt>IE8</dt>
<dd>Yet another code fork!</dd>

<sigh>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Sat, 27 Sep 2008 12:27:43 +0100, Rip van Winkle <rvw (AT) yoohoo (DOT) co.uk>
wrote:

Here's a strange thing which took me hours to track down. I'd have
thought that 'font-style: italic;' was generally harmless, but
apparently not to IE7 and/or Vista.

The stripped-down version of the web page is at
http://www.wessex100.org.uk/index_demo.html and the stylesheet is at
http://www.wessex100.org.uk/shared/wessex_demo.css . Both validate.

The odd behaviour affects the width of the page displayed and thus the
placing of the centered background image. Everything works as it
should with WinXP running Firefox, Opera, Safari and IE6, and with
Vista running Firefox. It goes wrong with Vista running IE7.

To make the page display correctly in Vista/IE7 I've found I have to
take out two occurrences of font-style: italic; . The demo version has
these suppressed, but if you take either of them out where I've
indicated you'll see the effect. None of the other OS/browser
combinations I've mentioned are affected.

Is this a known bug, and can anyone explain it?

Just to close this off and for the benefit of anyone Googling this
thread I've loaded a very simple demo of the problem and the
workaround at
http://rnetworks2002.users.btopenworld.com/downloads/IE7italics_demo.zip

The earlier links have been removed.

Thanks again for pointing me in the right direction.