williamZanelli Posted March 20, 2009 Share Posted March 20, 2009 Hey guys I have an issue with the CSS float, inside my PHP file i have a HTML structure, something like <body> <div style="width:950px; border: medium solid #990000;" > <div style="margin-left: 50px; margin-right: 50px;"> <div style="float:left" > <div id="col_one__" style="float:left; min-height: 200px; background-color:#CCCCCC; width: 270px;" > HAHAHAHAHA 1 </div> <div id="col_two__" style="float:right; min-height: 200px; background-color:#0000FF; width: 270px; margin-left:20px; "> HAHAHAHAHA 2 </div> </div> <div style="float:right" > <div id="col_three__" style="min-height: 200px; background-color:#00FF00; width: 270px; margin-left:20px;" > HAHAHAHAHA 3 </div> </div> </div> </div> </body> I've inserted the CSS insiede the HTML,so you can see it. - This code works as I want it, in FireFox, it doesnt in IE7.. [in IE7 the boxes dont lineup properly] What am I doing wrong? i know there's been a lot of issues, with CSS and IE7, is there like a list of things to do to avoid/tack particular issues such as floats, margins etc..? Thanks in advance for your thoughts, Will Quote Link to comment Share on other sites More sharing options...
The Great Unwashed Posted March 20, 2009 Share Posted March 20, 2009 This is perhaps a long shot, but you don't have semicolons after where you've declared float:left and float:right for your divs. IE can often throw a huge fit at CSS errors and won't skip over them like FireFox (which just sort of breezes on through and assumes you meant to put a semicolon there). Other issues might be: not properly declaring a DOCTYPE (this can be a problem for IE as it doesn't ever know what it wants to be) or using values like "medium" for borders instead of declaring pixel values. Realistically IE7 is very close to FF in how it handles divs and floats and shouldn't require too many hacks. I code sites on a daily basis that require the most minimal changes to work in IE7. Check the CSS and the DOCTYPE, it wouldn't surprise me if that's causing the problem. HTH! Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted March 20, 2009 Author Share Posted March 20, 2009 Thanks for the reply... I re did the code, and it kinda works.. See bvelow for full documnet of code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <style type="text/css"> #col_one__, #col_two__, #col_three__{ min-height: 200px; _height: 200px; width: 270px; padding: 0px; margin: 0px; } #col_one__{ float:left; background-color:#CCCCCC; } #col_two__{ float:left; background-color:#0000FF; margin-left:20px; } #col_three__{ float: right; background-color:#00FF00; } #holder{ width:850px; border: 3px solid #990000; padding: 0px 40px; } .clear{ clear: both; } </style> <div id="holder" style="margin-left:-30%;"> <div id="col_three__" > HAHAHAHAHA 3 </div> <div id="col_one__" > HAHAHAHAHA 1 </div> <div id="col_two__"> HAHAHAHAHA 2 </div> <br class="clear" /> </div> </body> </html> In FF3 its perfect In IE7 there's a little problem, I have the code (style="margin-left:-30%;") - thsi code will slot into a bigger webpage, which requires margin is reduced by 30% In IE7 the result of "style="margin-left:-30%;" is like -35%, as in it over does the margin, Any ideas on the problme/how I can deal with this? its bloody frustrtaing!! :'( i tried changing doc type to strict. FF3 is fine again, IE7 is shambles ... Thanks in advance for your thoughts... Will Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted March 20, 2009 Share Posted March 20, 2009 why are you using relative units for margin-left when you used a fixed width for the holder div? You should keep the measurements both relative or both fixed. Em's are really good to use when it comes down to relative positioning. It would be nice if you could add the link to the webpage. I'd like to see it myself. Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted March 22, 2009 Author Share Posted March 22, 2009 Thanks for the reply, and accept my apologies for the late reply.. the link is http://www.cms3.darchy.com Below the flash animation, are the boxes I am trying to align, Where HAHAHAHAHA 1, 2 and 3 are located thats where the final boxes will be slotted into, which are currently below them [grey boxes] Thanks for your thoughts Will Quote Link to comment Share on other sites More sharing options...
Floydian Posted March 22, 2009 Share Posted March 22, 2009 Changing that margin-left from -30% to -213px seems to get the page to look the same in FF and IE 8 (using compatibility view for IE 7) It would seem IE 7 is caculating that % differently than FF That wrap div, that's forcing you to put that negative margin seems like a more fundamental problem. If you can remove that, you'd have a better foundation to work from. Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted March 23, 2009 Author Share Posted March 23, 2009 Thanks guys, this works :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.