font-style:Italics in IE7 does not work

[Frinavale]

I have the following styles:

.unavailable
{
    /*font-style: italic;*/
    color: #878787;
}
.available{
 
}

My problem is that if I uncomment the "font-style: italic;" code, the style is not loaded after an asynchronous postback in IE7.

When I remove this line of code everything works fine.

I would Really really like to have to the text in the <span> with the "unavailabl e" style to be italicized.

I tried changing it to font-style:oblique;
However this did not fix the problem either.

Is there a way around this problem?

Thanks for your time
-Frinny

[drhowarddrfine]

If I'm following, you receive some data that goes into .unavailable but it's inserted via script and the style is not maintained? If so, it's one of the problems with that but I can't think of the workaround cause I'm drinking right now.

[Frinavale]

Nope that's not the problem.
On the server I change the css class of a <span> element to be the following:

<span id="someId" class="label unavailable"> some text </span>

The style is changed properly.
And in every browser it works properly too...except for IE7.

In IE7 the text is invisible when the page is re-rendered in the browser.

Upon further investigation I discovered that the problem with the italic is a little more complicated than I thought. Note how I'm using 2 classes? The "label" class is as follows:

.label{
  display:block;
  float:left;
  width: 170px;
}
.unavailable
{
    font-style: italic;
    color: #878787;
}
.available
{
}

Upon further investigation I discovered this has nothing to do with the asynchronous requests....the problem happens during full page requests as well. When ever I use a style that should be applied to a "block" element (eg: display: block or float:left) the font-style:italic breaks everything (the text is invisible...). If I remove the "display:bl ock" or "float:left " the italics works fine.

-Frinny

[Frinavale]

If I use:

.unavailable
{    
    color: #878787; 
    font-style: italic;
    text-align: center;
}

or

.unavailable
{    
    color: #878787; 
    font-style: italic;
    text-align: right;
}

The text displays.....Bu t I want my text to be to the left which doesn't work (even if I specify it) and text-align:justify also does not work.



-Frinny

[Frinavale]

Well this is one of those bugs that makes you want to smash your head against the desk. It doesn't Always happen...just after re-rendering a page with italics after posting to the server.

There's nothing I can do that will work around this problem (text-align center or right is just not going to look good).

I considered putting in browser checking code but this would require me to write an entirely new CSS file to use Just for IE7............ .......Waste of my time and resources!

Just for one lousy browser.

At least the fixed the problem in IE8 (whatever it is).

Apparently this font style is nothing but a headache.

I give up!

I'm not going to use italics.

-Frinny

[Frinavale]

I couldn't let this bug get the better of me so I tried to fix it again today and was successful.

I had read multiple things online stating that the italics font style extends too far past it's parent container (usually causing unwanted scrollbars etc to appear). I dismissed the solution to this problem because the description didn't match but I tried it in my CSS today and it works great.


All you have to do is set overflow:auto for any block element that is display italic text! This fixes the "things becoming too large" problem and it fixes the problem with the text simply not displaying that I was facing.

I'm happy that the fix didn't involve browser checking or anything that would make my css invalid.

-Frinny