Float creates issue in IE works fine in Firefox - Help!

Discussion in 'CSS' started by trekwithus, Nov 1, 2008.

  1. #1
    This is driving me nuts. I recently adopted a new theme for a wordpress site. The theme uses floats to define the background on the main page and the right nav. In IE the background doesn't display until you get below the content in the right nav. In Firefox it displays just fine. You can view the issue on my site here: www.trekwith.us

    The code that's causing the issue is this:

    
    .content { background: #ffffff url(images/sidebarbg.jpg) repeat-y right; }
    .leftcontent { width: 550px; margin: 25px; float: left; }
    .rightcontent { width: 350px; float: left; }
    Code (markup):
    When I remove the "float: left:" from the .rightcontent, it fixes the page in IE and destroys it in Firefox. I have to imagine there is a simple fix for this. Other code that may be affecting this is in the header as their are instructions for IE:

    
    <!--[If IE 6]><style type="text/css">.leftcontent {width: 600px; padding: 26px; margin: 0px;}  .rightcontent { width: 345px; }</style><![endif]-->
    <!--[if lte IE 7]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie.css" type="text/css" media="screen" /><![endif]-->
    Code (markup):
    There's also a specific ie.css file that contains:

    
    .sidebar .item { margin-left: 25px; }
    .search input.submit { height: 26px;}
    .search input { height : 26px;
    input.submit:onmousedown { border: 0px; }
    input.submit:onload { border: 0px; }
    .search input { height: 26px; }
    .half ul li { width: 150px; float: left; padding: 5px; }
    .content { margin-bottom: 20px; height : 100%; }
    Code (markup):
    I've combed through everything and figure there must be something I'm not seeing. Help!
     
    trekwithus, Nov 1, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    IE has serious problems with floats among just about everything else, too. What you are seeing is an IE bug. IE expands parent containers to contain floated elements. This is not what is supposed to happen and Firefox is performing correctly.

    Try removing the float but adding 'overflow:auto' to .content and see if they look the same. What we're doing is replicating IEs bug in Firefox.
     
    drhowarddrfine, Nov 1, 2008 IP
  3. trekwithus

    trekwithus Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your help! That worked like a charm. I know it's probably a janky fix, but as long as it looks good then sweet! Thanks again!
     
    trekwithus, Nov 2, 2008 IP
  4. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #4
    IE just interpreter xhtml and css code , not compatiable with w3c standard .
    However we must make multi css and use tricks to meet the non-standard browser .

    For you case, I can fix the small problem for you with only $15 .
    pls let me know if you are interested ? You can review my fixture service from the my last sig link .
     
    justinlorder, Nov 4, 2008 IP