Results 1 to 2 of 2

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

  1. #1
    Join Date
    Oct 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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)

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by triptrop
    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 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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •