View Full Version : an IE Monstrosity for your pleasure

02-07-2005, 11:26 PM
Back in October, when I was learning how to write valid CSS and XHTML, I did some work for an organization here at Texas A&M called Resurrection Week. They wanted me to redesign the site and make it look nice. Now I am not a graphic designer. I am not a color expert, nor can I write any worthwhile copy. I gave it a shot though, and this is what happened:


It looks fine in any standards compliant browser, but it's an ugly horrible mess in IE. It is perfectly valid HTML 1.0 Trans and CSS, you can check 'em yourself. As far as what screws up IE:
- two of the divs are declared position: fixed
- another div is declared position: absolute and covers the fixed div
- margin errors relating to box model
- transparent pngs
- appears to have a 3-pixel jog issue on the masthead (again, related to box model)

The reason I post this monstrosity is as a challenge for you Internet Explorer CSS gurus out there. I'm wondering if it's at all possible to make it render correctly in IE, in any version. There is no obligation to attempt this, nor am I asking for help. This is merely for your own enjoyment. Ideally you would reuse all the same graphics, but new ones are permitted if necessary. If you PM me, I can get you a copy of the pngs that these graphics came from. They are huge, so I don't just want to post 'em and waste tons of bandwidth.
Anyone up for the challenge?

Simple walkthrough:
Over-all, it's 3 vertical columns, ids left-border, container, and right-border. There is also an extra div (id= right-border-shadow) that's declared position: absolute to take care of the masthead's shadow. It lays on top of the right border.
Within container is a masthead and below it a content div. The masthead has two images, one floated left and the other floated right, in addition to the background image. The content div has within it a 3-column layout, ids leftnav, contentpane, and rightbar, all text only.
At the bottom is another div, id= bottom-bar, that uses a background png with a transparent shadow up top. A special IE hack is included to redeclare the background to be none, and to set up a border that uses the alpha-imageloader filter.

Files list:
border-left.gif (http://resweek.tamu.edu/view/teal/border-left.gif)
border-right-shadow.jpg (http://resweek.tamu.edu/view/teal/border-right-shadow.jpg)
border-right.gif (http://resweek.tamu.edu/view/teal/border-right.gif)
bottom-background-ie.png (http://resweek.tamu.edu/view/teal/bottom-background-ie.png)
bottom-background.png (http://resweek.tamu.edu/view/teal/bottom-background.png)
layout.html (http://resweek.tamu.edu/view/teal/layout.html)
masthead-background.gif (http://resweek.tamu.edu/view/teal/masthead-background.gif)
masthead-left.jpg (http://resweek.tamu.edu/view/teal/masthead-left.jpg)
masthead-right.gif (http://resweek.tamu.edu/view/teal/masthead-right.gif)