<!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>Campagna Italiana - Road to Rome</title> <link rel="stylesheet" type="text/css" href="ci_css.css" /> </head> <body> <div id="container"> <div id="left"> <img id="homebutton" src="images/left_button_home.jpg" /> <img id="mainbuttons" src="images/left_button_about.jpg" /> <img id="mainbuttons" src="images/left_button_team.jpg" /> <img id="mainbuttons" src="images/left_button_media.jpg" /> <img id="mainbuttons" src="images/left_button_downloads.jpg" /> </div> <div id="banner"><img src="images/banner.gif" /></div> <div id="right"></div> </div> </body> </html> HTML: /* CSS Document */ body { background-color: #000000; background: url(images/bg_body.jpg); text-align: center; } #container { width: 800px; height: 665px; margin-left: auto; margin-right: auto; text-align: left; background: url(images/bg_main.jpg); margin-top: 40px; margin-bottom: 60px; } #banner { width: 480px; height: 141px; margin-left: 10px; margin-top: 9px; float: left } #left { width: 140px; height: 645px; margin-left: 10px; margin-top: 10px; margin-bottom: 9px; background: url(images/left_bg.jpg); float: left; } #homebutton { margin-top: 98px; margin-left: 6px; float: left; } #mainbuttons { margin-top: 2px; margin-left: 6px; float: left; } #right { width: 140px; height: 645px; margin-left: 10px; margin-top: 10px; margin-bottom: 9px; background: url(images/left_bg.jpg); float: left; } Code (markup): And now for the problem. In Firefox and Internet Explorer 1.5 the website looks exactly how I want it to look: http://img.photobucket.com/albums/v299/Xionith/FireFox.jpg However in Internet Explorer 6.0 the website looks like a flaming crap (for lack of a better description): http://img.photobucket.com/albums/v299/Xionith/IE6.jpg So anyone have any suggests as to why IE decides to change the margin on the left to that huge size instead of my specified 10px and in doing so pushes the entire layout way to the right of the container... After looking at the two sites in comparison it appears that the only that has moved is the container itself. Looking at it in IE the container appears to have shifted 10px left, as is evidenced by the point of the gun (in the background) being covered in IE but not in FF. I have absolutely no idea why it would do this... As you can tell this is my first CSS layout and I am having just an absolutely wonderful experience!!
When an element is made float, and it abuts its parent's edge on the side it's floated to, IE doubles the margin value to that side. Your #left meets the criteria, so IE makes the left margin 20px instead of the desired 10px; The simple fix is to add {display: inline;} to the selector. The only valid values for display, where the float property is also used, are black and none. So the inline value is ignored by all browsers, including IE, but it fixes the bug. #left { width: 140px; height: 645px; margin-left: 10px; margin-top: 10px; margin-bottom: 9px; background: url(images/left_bg.jpg); float: left; [color=red]display: inline;[/color] } Code (markup): cheers, gary
Thank you sooo much! I have been rewriting, rereading, validating and everything I could think of but nothing would work... I think the main reason people who don't know CSS don't like using it is these simple bugs, otherwise its easy and effective to use.
IE is the only real trouble maker. Most of its problems are well known, as are the fixes. Once you learn them, hacking, work-arounds and dumbing down for IE becomes second nature. cheers, gary