Text Wrapping: IE 7 vs IE8/Firefox/Safari

two-column-layout

Two Column Layout on MICA's Homepage

One of the IE 8 CSS issues that was not addressed recently was the text wraping on the MICA homepage.  Firefox and Safari would render the text as seen to the left.  On IE 7 & 8 the text would not wrap at all–it would stay fixed to the width of the upper left title.  When I forced the the width of the text on the P tag, the text would not wrap.


Vector of the Hompage Layout

Vector of the Hompage Layout

When I began to dig around in the CSS, I discovered that Dan Mall (who did the HTML production) used a div (seen in the red dotted line to the left) in order to displace the text.  He asked kindly in the CSS not to be judged for using a spacer, and I felt rewriting the whole layout of the page in order to get rid of the spacer was not a good use of time.

I figured out that the text in IE 7 was not getting displaced with a div because the text was not colliding with it.  Ultimately to fix this issue I switched to the oldschool style of using a 1 pixel gif as a spacer, and sizing it appropriately.

The text was getting correctly displaced in IE 8, so this little tip may not be useful for too long.

June 3, 2009 • Tags: , , • Posted in: Technology

Leave a Reply