Treehouse: Grow your CSS skills. Land your dream job.

IE7 Padding Issues

  • # August 26, 2009 at 6:39 pm

    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

    here is the html:


    Content on this page requires a newer version of Adobe
    Flash Player.

    Get Adobe Flash player

    …and the css:

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

    # August 27, 2009 at 2:21 am

    I would delete the padding-top from the home-flash. Try that and see what happens

    # August 27, 2009 at 5:53 pm

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

    # August 27, 2009 at 6:00 pm

    If I remove the padding, nothing changes in firefox. Did you try it? It looks like you have to much padding, that’s why I suggested removing it. A little trial and error and you should get it. Otherwise, pack up you code and image
    s so we can play with it to try and fix it.

    # August 27, 2009 at 10:57 pm

    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)

    # August 27, 2009 at 11:00 pm

    I don’t know why it happened, there is to much code to look through. When I looked in firefox, the site looked fine. When I looked in I.E, it was sitting to low. I used firebug to remove the padding and the flash didn’t move, That’s why I suggested removing the padding on that one element. If you don’t have firebug, you should get it

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.