font-style: italic bug in IE 5.5 & 6?

[martin]

Can anyone explain this

I want my side images to remain in the white box.

Check these two files out:-

http://www.powerhouseuk.com/toptotoe/test_right.html

and:-

http://www.powerhouseuk.com/toptotoe/test_wrong.html

one renders O.K. in IE 5.5 & 6 the other not. The only difference in the two files is that the right one uses font-style: italic; in the class redquote for the opening paragraph of copy and the wrong one does not.

This must be a browser bug!

As an aside both pages render correctly in Netscape 6/7 and IE 5.5 on Mac as well as IE 5 on windows.

Any CSS guru's out there got a fix or workaround?

[Bill Posters]

I'm not saying that this is the cause, but you have an error in your css in line 145.

#boxout .quote {
	font-family: 12px Times,"Times New Roman", serif;
...
}

Line: 145 Context : #boxout .quote

Invalid number : font-family12px is not a font-family value : 12px Times,"Times New Roman",serif

It *may* be what's tripping up some browsers. Worth correcting and checking.

As a rule of thumb, it's always worth running your css through a validator as it'll help you catch mistakes you've missed.

I'd like to be more help, but I'm on mac so it's not possible for me to test out what might be breaking the page/css.

[martin]

Thanks for that (the double quotes were the problem) unfortunately this does not fix my rendering problems.

anyone else?

[Bill Posters]

If you are referring to the line I pasted, then the double-quotes should be fine.

The CSS validator and I were referring to the presence of a font-size attribute within the font-family attribute in your css file.

font-family: 12px Times,"Times New Roman", serif;

...should be...

font: 12px Times,"Times New Roman", serif;

...or...

font-family: Times,"Times New Roman", serif;
font-size: 12px;

[martin]

I see what you mean now. I have amended this and uploaded so I hope this now validates.

But this still does not answer my original problem (sigh).

[xhtmlcoder]

It took me a while to see the bug; I had to hit reload a few times, and resize the browser window, unfortunately I can only get the bug to work on your online test examples.

It would lead me to believe it was Micro$oft specific - since you have improved the CSS - I have seen similar things happen before within that browser.