Italics cause DIV width problem

Internet Explorer 6 has a problem where it fails to calculate the width of DIVs containing italic text correctly. You’ll generally notice this problem in a 2-column CSS layout. Your fancy new layout looks great, until you add italic text. Suddenly your menu appears below your content or vice-versa.

The solution? Sometimes there is none (other than use Firefox instead of IE ). However this little trick will work most of the time: Add the following to your content DIV that contains the italic text:

overflow: visible;
width: 600px // or whatever width you like.. but you MUST specify a width for this trick to work

And that’s it! Hopefully this will save you from hours of pulling your hair out

This entry was posted on Tuesday, May 23rd, 2006 at 1:08 am and is filed under Web Design, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.