mindgraffiti

I have been working on Branch View Angus all week. It was left to me as a hybrid template - part tables, part CSS for the layout. This is all part of our plan to transition in to pure CSS sites. All I had to do was plug the content into it. Or so I thought. Although the template’s CSS validated according to W3C ’s CSS Validation tool, Internet Explorer 7 was blowing up the layout.

Only after plugging in all the content to the site did I realize I had not checked the layout in I.E. 7. I thought all would go well, since the CSS had validated. While Firefox always behaves, displaying bad HTML and CSS gracefully, I.E. 7 is unforgiving. Here’s what I saw when I tested it:

OS: Mac; Browser: Firefox; Test run. Looks exactly how it was intended. True to the design.

OS: Windows XP, Browser: Firefox 2.0; Test run. Ok, a small break in the navigation. Not bad.

OS: Windows XP, Browser: Internet Explorer 7; Test run. Oh, boy. Problem with the nav, the images, and all the text. The contact info at the top is running off the page.

It took me all week to figure out what was wrong, but eventually I figured it out:

OS: Windows XP, Browser: Firefox; Fixed. Ok, but there was only one problem showing on Firefox. What about I.E. 7?

OS: Windows XP; Browser: I.E. 7; Fixed. Yay! The text has realigned, the images no longer shift, and the strange break in the navigation background is gone.

Turns out the main problem is using a table and CSS hybrid layout. I’m not sure I can adquately explain how I fixed all of it, but the main point is our assumption that using hybrid layouts would be a good way to transition in to pure CSS layouts were wrong. Hybrid templates come with their own set of problems. I believe I’m ready to take a hack at pure CSS layouts. I don’t expect the code will be perfectly clean, but I believe the structure of the layout will be solid on the first try - unlike the hybrids.

Related posts:

• CSS Workshop
• The Purpose of Design - Text