FF vs. IE 7

[NinaMorena]

I love this site and it has helped a great deal in designing layouts first and coding second!!

I had to throw a quick page up for a client who wants to promote his pool party. I ran into a bit of a menu issue.

http://www.homemadela.com/intropage.html

The left navigation looks great in FF however in IE, the left navigation menus are off. How do I solve this using CSS? Listed below is my css code for the site. The Div markers "Left-Nav-Home" is where the menu items are listed. Any help is appreciated.

Code:

/* CSS Document */

body {
font-size: 62.5%;
font-family: verdana, sans-serif;
background: url(../images/white_bg.png) repeat top #FFF;
}

h1 {
font-family: verdana, sans-serif;
font-size: 18px;
color: #7bc5e9;
}

a.link {color:#7bc5e9; text-decoration:none;}
a.visited {color:#7bc5e9; text-decoration:none;}
a.hover {color: #7bc5e9; text-decoration:underline;}
a.active {color: #7bc5e9;}

div#page-wrap {
width: 908px;
margin: 0 auto;
}

div#main-content {
padding-top: 0px;
width: 908px;
background: url(../images/white_bg.png) repeat top;
}

ul#footer-content {
width: 470px; height: 200px;
padding-left: 40px;
float: left;
}

ul#nav {
margin-left: 150px;
height: 52px; width: 892px;
background: url(../images/home_made_logo.png) no-repeat;
margin-top: 0px;
}

div#content-holder {
float: right;
height: 1401px; width: 700px;
background: url(../images/main_paragraph.png) no-repeat;
margin-top: 0px;
}
div#content-holder-text {
height: 1400px;
width: 472px;
margin-top: 20px;
}

div#left-nav-home {
float: left;
height: 497px; width: 186px;
background: url(../images/left_nav.png) no-repeat;
margin-top: 0px;
}

ul#left-nav-home-text {
height: 497; width: 186px;
margin-top: 60px;
margin-left: 12.5px;
list-style: none;
}
ul#left-nav-home-text li a{
display: inline;
}
ul#left-form {
height: 200px;
width: 100px;
margin-top: 110px;
margin-left: -20px;
}

a.left-nav-home:link {color:#FFFFFF; font-size: 15px; text-decoration:none; font-weight:400}
a.left-nav-home:visited {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}
a.left-nav-home:hoover {color:#FFFF00; font-size: 15px; text-decoration:underline; font-weight:400}
a.left-nav-home:active {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}

.clear {clear:both;}

.form-button {
background-color:#FFFFFF;
border: #7bc5e9 solid 2px;
font-size: 12px;
}

.form-field {
background-color:#FFFFFF;
border: #7bc5e9 solid 2px;
font-size: 12px;
}

div#footer {
width: 275px;
height: 25px;
margin-top: 50px;
padding-bottom: 10px;
}

[wmwood]

Sorry to be vague….

You need to do a if IE statement
Ex: (Put in the header of the HTML)

Code:

[Author]

Posts