IE6/7 italics bug?

For some reason, whenever an element has:

font-style: italic;

The whole element becomes invisible in IE6/7!!!

I’ve been searching for like an hour on what causes this, but was unable to find what is wrong :frowning: Has anyone encountered this ‘bug’, or know how to solve this?

Thanks in advance!!

The whole element becomes invisible in IE6/7!!!

Hi,
It sounds like you may have a “haslayout” issue going on there.

The Italic Bug is not present in IE7 which leads me to believe that it is something else.

You will need to post a link to the page or post some code for us to be able to help further. :slight_smile:

Unfortunately, this all takes place behind locked doors (protected intranet application) so I can’t really give a link or show css (the whole css file is 2000+ lines long)

I’ve been unable to produce this on a smaller scale :frowning:

yes it is :slight_smile:

Just for reference look at the second block in this example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width:800px;
    border:1px solid #000;
    font-style:italic
}
.fl, .fr {
    background:red;
}
.fr {
    float:right;
}
p {
    font-family:"Times New Roman", Times, serif;
    font-size:18px;
    text-align:justify;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="fl">
        <p>lorem ipsum text lorem ipsum text lorem ipsum text lorem aa ipsum aa text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
    </div>
    <div class="fr">
        <p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text</p>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>


The second block overflows in IE7 but removing the italic style cures it.

The whole element becomes invisible in IE6/7!!!

As Ray says that sounds like haslayout unless the content is an overflow:hidden element and the italic bug has made a float drop and be hidden.

Add zoom:1.0 to the rule and see if it’s haslayout at play. You could also try position:relative because if you have positioned parents the element will often hide behind the background.

I was going by the comment at the PIE link. :blush:
I guess they never updated the page.

It’s not quite the same as the IE6 bug as it seems to work in combination with other things like the text-align:justify.

There are reports on that bug and solution(s):

IE7 italic bug

It seems the complete solution is posted in comment #10

I’m going to try this!!! Thanks for the tips :slight_smile:

No it doesn’t work for my example :slight_smile:

The complete solution is as I posted in the Sitepoint reference :slight_smile:

The inner element, you mean? That’s a cleaner solution indeed but does it also work on non floated layouts?

I’ve never came across this bug and i’d hate to use that *+html .somediv, *+html .somediv *, *+html .somediv.somechilddiv {zoom:100%} stuff

That’s a cleaner solution indeed but does it also work on non floated layouts?

It should work anywhere as in essence all you are doing is making the content area smaller so that when the element overflows it is is still no bigger than the original parent. You could use overflow:hidden instead but then the text would appear clipped.

The bug is a bit of a pain at times as it doesn’t always cause issues but then some times it breaks the whole thing.:slight_smile:

As usual with a lot of these bugs the solutions can vary depending on context.