new to css - looks good in FF, YUCK in IE!

[triptrop]

Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days....

My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them.

Here's the page: http://www.triptrop.com/main.html

My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column.

Don't pick on my about the colors, I'm just messin around right now :)

Any help would be helpful (by definition)

[mwinter]

I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them.That does tend to be the case. Though IE was often a leader in support, the fact that IE6 is now three or four years old without a major feature update leaves it lagging far behind virtually all other modern graphical browsers.


Here's the page: http://www.triptrop.com/main.html

My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column.You seem to be going about it in a rather round-about fashion. The standard method is to float the boxes. IE can still be a pain, though.

An example (http://mwinter.webhop.info/dd/triptrop/two-column.html) shows one approach. This example has the added feature of the min-width property to prevent the columns from shrinking too much. At a width of 20em, the boxes will stop shrinking, and reflow. This could be emulated in IE, but my browser crashed (which was rather surprising) so I haven't included it. It could be related to IE's float bugs.

It would be better implemented with media queries. At present, the reflow causes the boxes to be positioned underneath one another, but still only at their minimum 20em width. With a media query, an entirely different style sheet could be applied to a narrow viewport, rendering the boxes in the same position, but at 100% width. Unfortunately, most browsers don't implement media queries yet.

I embedded the style sheet for simplicity. It should, of course, be in an external file and linked.


Any help would be helpful (by definition)I hope the above qualifies. :)

Mike