IE7 problem need help!!!

[hunt040]

Hi,

Im currently working on a website for my partner and I have come across a problem. In Firefox the navigation box is displayed perfectly but in IE7 and IE8 it is shorter so the website does not run flush at the bottom. I have attached an image of the problem. Here is my CSS file incase I am not doing something right.
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #990000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFA405;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}

body {
background: #FFFFFF;
text-align: center;
font: 11px arial, sans-serif;
color: #312F1A;
}

/** layout **/
#wrapper {
text-align: left;
margin: 20px auto;
width: 714px;
position: relative;
}

#header {
background: top center url(images/revivebeauty.jpg) no-repeat;
padding-top: 62px;
width: 500px;
position: relative;
}

/** Header **/
h1 {

}



/** Body **/
#body {
position: relative;
width: 100%;

}

#nav {
position: absolute;
top: 0;
left: 0;
width: 253px;
padding-top: 298px;
background: url(images/home.jpg) no-repeat;
}
#nav ul {
background: #FF33CC bottom center no-repeat;
margin: 0 0px 0 0px;
padding: 5px 20px 10px 20px;
}

#nav a {
color: #000;
font-family: Times New Roman;
font-size: 18px;
font-style: normal;
background: #FF33CC;
padding-right: 8px;
}

/** content **/

#content {
background: #FF33CC bottom right no-repeat;
width: 650px;
margin-left: 253px;
max-height: 586px;
}

#content .main, #content .main2 {
float: right;
width: 450px;
margin-top: 14px;
padding-right: 28px;
}

#content .main {
padding-bottom: 1em;
border-bottom: 1px solid #000;
}

#content .main p, #content .main2 p {
margin: 0em 1em 0 0;
}
#content .main2 .right {
margin-left: 18px;
}
#content .main .clear, #content .main2 .clear {
height: 20px;
margin-bottom: -10px;
}

#beauty {
float: right;
width: 134px;
border-left: 1px solid #000;
padding: 12px;
background: top right no-repeat;
}
#beauty span {
float: left;
width: 12px;
font-size: 9px;
clear: both;
margin-top: 3px;
}
#beauty p {
float: left;
width: 110px;
margin: 0 0 0.6em 0;
padding: 0 0 0 1em;
line-height: 1.3;
}
#beauty .clear {
height: 189px;
}

h2 {
font: italic 22px "Times new roman", serif;
color: #000;
margin: 0 0 0.5em 0;
}

/** Footer **/

#footer {
color: #000;
margin: 0px 0 0 275px;

}

#privacy {
position: absolute;
right: -189px;
width: 148px;
padding: 4px 0;
text-align: center;
background: #FF33CC bottom left no-repeat;
}
#privacy a {
color: #000;
font-weight: normal;
}
Any help would be greatly appreciated.

[ishkey]

First of all you have to realize that IE does not conform to the World Wide Web Consortium (W3C) http://www.w3.org/, but IE8 comes very close.
Foxfire does and also Opera.
In your case you will have to review the section of your css in question and research how to code for IE and create a patch for just that part and save it in another css sheet just for that version of IE.
You then will need a javascript which reads the browser type and and calls up that extra css sheet.
Your main css sheet is loaded. Javascript reads browser type. Then loads extra css sheet so page displays properly.
This isn't new it's been going on since the first browser was released.
You could try to modify the overall layout so in all browsers the problem isn't as noticable. which would be less coding.
Finally you could code for the most popular browser so it looks proper and wait for the others to get it right. http://www.w3schools.com/browsers/browsers_stats.asp