Date: 01/18/07 (Web Development)    Keywords: php, css

I've been working on a new style for a game I have. The old one is based off of a phpBB template that I thought looked nice for the type of game it is, but after having it up for, oh, a couple of years, I think it's time for a change. Since the phpBB template uses a lot of table attribute kludge I thought it would be nice to try going a pure CSS route and do away with most tables. I attempted this once before but found IE6 to screw up everything so I threw in the towel and kept it the way it was. Since IE7 has been out for some time and has been adopted by most internet-enabled Windows computers, I figured it would have better support for the same things that Firefox does.

I finally got a color scheme that looks half-decent (although I'm still weary of overdoing the blue-based scheme) and even got the CSS to display it like I want in Firefox:


After doing all that work and even getting it to look half-decent, I loaded it up in Internet Explorer 7. I expected to see a few minor cosmetic differences (spacing, margin, borders, or some-such), but what I saw was a complete mess. There's no way I could get away with using this:


You can see a static version of the page here.

Does anyone have any idea how to fix this or a relatively easy work around? The entire reason why I'm using "display: table;" on .ikBlock is so that the DIV won't extend under the floated element, yet from everything I've read IE7 completely ignores "display: table;". The only workaround I've found involves a bunch of kludge that, by the time I add it, I might as well have just stuck to using an actual table for the main page layout.

I may end up redoing what is displayed on the main page and make this entire problem a mute point, but for now I'm at my wits end on dealing with all this CSS incompatibility between IE and FF. I'm tired of trying to make my designs work in both IE and FF, only to find out that by the time I find something I like in one, the other doesn't do it the same way. Yet if I stuck with a very simple table while still using CSS to style the table itself, I know I could get both of them to look almost exactly the same and exactly the way I want.

Source: http://community.livejournal.com/webdev/384464.html