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

I think this is where someone says can I see the code please?

/* 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;

}