Jump to content

Italics And Ie6


Bob Crabb

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.

Link to comment
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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...