SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    My fluid layout works everywhere but in IE! How to fix?

    http://www.teamassociated.com/downlo...app/fluid.html

    If you test the above layout in various browsers and the iPhone, you'll see the layout works fine. But it doesn't resize in IE. At 800px, the left column should disappear and the right column should move under the middle column.

    Here's the CSS for the 800px switcharoo:

    HTML Code:
    /*  -------------------- DESKTOP SMALLER SCREEN ----------- */
    @media screen
    and (min-device-width : 400px) 
    and (max-width : 800px) {
    
    body {
    text-align: center;
    min-width: 400px;
    }
    
    #wrapper {
        width: 800px;
    }
    
    p {
        font-family: Helvetica, Arial, sans-serif; /* prevent type from getting tiny */
    	font-size: 100%;
    }
    #header {
    margin-bottom:0;
    }
    #col1
    {
     visibility:hidden; height:1px;
    }
    
    #col2
    {
    	clear:both;
    	width: 100%;
    	margin-bottom: 10px;
    	margin-left:0;
    	border-right: 0;
    }
    
    #col3
    {
    	clear:both;
    	width: 100%;
    	margin-bottom: 10px;
    	margin-left:0;
    }
    }
    What are we supposed to do to get IE to understand the @media queries? I've searched Google and read many pages, incorporated several techniques, and none of them worked for me.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can't make legacy IE understand media-queries because these browser versions do not know what they are. You can either serve IE with a fluid (better) or fixed width or you can use Javascript.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •