Jump to content
Sign in to follow this  
Bob Crabb

Italics And Ie6

Recommended Posts

Here is an interesting phenomenon that I just stumbled upon. Apparently, it is a known problem that in IE5-6 italics in a justified block element can expand the element beyond its defined width. I had not read about it before, and this was the first time that I had seen it happen. I was scratching my head for a while figuring out what was happening.

 

I am almost finished completely overhauling the design and structure of one of my websites, making it tableless and XHTML 1.0 Strict valid. Everything looked great at home, where I have checked it out using Firefox, IE7, Opera, Netscape, and Safari. This morning, I had a chance to check it out in IE6, and found that in one page, the format was blown. All pages use a common template. Basically there is a container div, and then within that several other divs in which the various page elements reside. The container is 950px wide, and the main body of the page consists of a main column div that is 700px wide, and a menu column that is 200px wide. Those two blocks float right, and the sum of their widths as well as the padding and margins will fit within 950px.

 

On the page in question, the menu was squeezed out. I'm aware of IE6 having the dubious distinction of not following a div width declaration if a child element is wider than the parent, but the only element other than paragraphs containing text, and a couple of tiny images, was an inset box that was 200px wide. Certainly, there were no fixed width elements that would cause this to happen, even in IE6! There are almost 50 pages on the site that use this layout, and only this page had a problem. Finally, I realized that in one paragraph, I had a couple of long phrases in italics, in a paragraph with justified text alignment. I took out the italics, and then everything looked normal. I played around with this for a while, thinking that perhaps this happened because I got lazy and used i tags, but even defining the font-style in CSS, the way I should have done it initially, made no difference. Then, I Googled italics justified IE, and saw that it is a known, albeit uncommon, problem.

 

Anyway, it drove me crazy for about half an hour today, so I thought that I would share this with the rest of you.

Share this post


Link to post
Share on other sites

Thanks for the info Bob. Amazing how one little thing like that can throw off an entire page. People still using IE6? :)

Share this post


Link to post
Share on other sites

The italics only blew the width out by 3 or 4 pixels, but that was enough to pop the left column down below. I suppose that if I had defined an absolute postion for the menu column, that wouldn't have happened, but then the margin between the two columns would have likely been crowded. I might play with that later.

 

Anyway, I never realized how much of a piece of junk IE6 is until I started getting into web design. Hopefully, in another couple of years the number of computers running it will be so small that we can quit having to construct web pages that accomodate its non-compliance with W3C standards.

Edited by Bob Crabb

Share this post


Link to post
Share on other sites
People still using IE6? :)

 

I don't trust IE7 yet...

 

And thanks for the Italics info! I just design sites with FF in mind. If people still use IE, its not my fault. ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×