Cosmic_Flux

/* CSS Code for Orange Soda Design Concept */ /* October 2008 */ /* Blanket rules for all elements ------------------------------*/ body { background: #ffcc77 url('gradient.png') repeat-x; font-family: "trebuchet ms"; font-size: 10pt; color: #000; } /* Box model properties -----------------------*/ #container { border: 1px solid #000; width: 800px; height: 600px; margin: 30px auto 0px auto; background: #fff; } #header { width: 800px; height: 120px; text-align: center; line-height: 120px; border-bottom: solid 1px #000; font-size: 19pt; letter-spacing: 1px; } #leftNav { float: left; width: 150px; height: 440px; padding: 0px; text-align: center; margin: 0px 20px 0px 0px; border-right: 1px solid #000; background: #ffcc77; } #footer { clear: left; width: 800px; line-height: 35px; margin-top: 0; font-size: 9pt; text-align: center; border-top: solid 1px #000; }

Hi, I'm currently working on a design/layout concept at present but am experiencing an issue with the way the page renders on IE. Basically, I have a left-floated Navigation element and a Footer element underneath. In Firefox, Opera and Google Chrome the footer sits flush underneath the nav, which is exactly what I want. However, IE7 seems to be creating a margin between the bottom of the nav and the top of the footer. I've set the respective margins in each element to 0 so I can't figure out why this is happening. It's obviously a by-product of the non-standard Box Model IE uses, maybe the result of a clear:left in the footer properties, but I can't fix the problem in IE without breaking the page in the other browsers. I know it's hard to offer assistance without seeing the problem. Any ideas? Cosmic