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!
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.
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!
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 .