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 • No Comments

Preparing for IE 8 Was Suprisingly Easy

IE download image

We’ve known IE 8 was coming for a while.  Last week I was warned by our network engineer that IE 8 he was actively supressing its distribution around campus.  We knew we were going to have issues, so some of our core team gathered together to figure out what they were.

I have to say we were surprised at our findings.  Making our browser specific IE 7 CSS effect only IE 7, fixed the bulk of our display issues.  Generally speaking this means that IE is now rendering nearly identically to Firefox 3, and Safari.

We ended up having around 6 minor display issues to clean up, but over all this is some great news.  We should be able to release IE 8 to our campus next week sometime.

May 20, 2009 • Tags: , , • Posted in: Technology • No Comments