IE7 Padding Issues

[rjmccollam]

Ok this has to be an easy fix I can’t find what I am looking for though. I have searched on conditional comments and tried some out, but to no avail.

The issue is in IE7…the padding I used for my nav has pushed the flash image rotator down the same amount. I don’t know if it has something to with my css or my clients flash coding (I’m assuming my css since it works in every other browser) You can visit the site http://rjmccollam.com/test

here is the html:

Code:

• About
• Loire Valley
• Provence
• Bordeaux
• Tour Dates & Rates
• Reserve Now

…and the css:

Code:

#home-bg {
background:url(../images/homebg.jpg) no-repeat top center;
height: 768px;
margin-top: 50px;
}

#home-icons {
background: url(../images/homeiconsbg.jpg) no-repeat top center;
height: 181px;
}

#home-flash {
width: 802px;
height: 404px;
padding-top: 239px;
padding-right: 5px;
}

ul#nav {
float: left;
padding-top:211px;
padding-left: 160px;
}

ul#nav li {
display: inline;
}

ul#nav li a {
display: block;
float: left;
height: 28px;
text-indent: -9999px;
}

ul#nav li.about a {
width: 65px;
background: url(../images/about.png) bottom center;
}
ul#nav li.loire a {
width: 124px;
background: url(../images/loire.png) bottom center;
}
ul#nav li.provence a {
width: 106px;
background: url(../images/provence.png) bottom center;
}
ul#nav li.bordeaux a {
width: 108px;
background: url(../images/bordeaux.png) bottom center;
}
ul#nav li.tour a {
width: 180px;
background: url(../images/tour.png) bottom center;
}
ul#nav li.reserve a {
width: 122px;
background: url(../images/reserve.png) bottom center;
}
ul#nav li a:hover{
background-position: top center;
}

/* End Navigation */

[rjmccollam]

If I remove the padding I wont have the flash images positioned where I need them.

[rjmccollam]

That did the trick! Thank a lot for your help. Is this because I have padded the nav and since the home-flash is positioned below the nav it is padded as well? (if that made sense)

[Author]

Posts