Grow your CSS skills. Land your dream job.

Mysterious floating DIV/Missing Nav IE

  • # July 15, 2009 at 10:49 am

    If anyone has a free sec, could you check out my sight:

    http://vtypemedia.com

    Everything is functioning fine in Firefox and Safari, but there is a crazy floating dark gray div with an orange top border in my bottom navigation that I cannot figure out in IE. My left-floated bottom site nav is also missing. My footer nav seems to be functioning fine in all the interior pages, so it seems like it might be a problem with the top (blog and twitter sections) portion of my footer.

    HTML:

    Code:

    CSS:

    Code:
    #footer-top {
    background-color: #b8b7b7;
    border-top: 1px solid #f74608;
    height: 158px;

    }

    #blog-footer {
    width: 359px;
    height: 118px;
    background-color: #e7e7e7;
    margin: 20px 0px 20px 60px;
    float: left;
    position: relative;
    }

    #twitter {
    width: 358px;
    height: 118px;
    background-color: #e7e7e7;
    margin: 20px 60px 0px 0px;
    float: right;
    position: relative;
    }

    h2#blog-footer-header {
    width: 359px;
    height: 22px;
    text-indent: -9999px;
    background: url(/images/blog.png) top left no-repeat;
    margin: -1px 0px 0px 0px;
    }

    h2#twitter-header {
    width: 359px;
    height: 22px;
    text-indent: -9999px;
    background: url(/images/twitter.png) top left no-repeat;
    margin: -1px 0px 0px 0px;
    }

    #blog-footer .inside h2 {
    font-size: 110%;
    margin-bottom: 3px;
    }

    .inside {
    font-size: 12px;
    padding: 3px;
    }

    span.link {
    position: absolute;
    top: 100px;
    left: 3px;
    font-size: 90%;
    font-weight: bold;
    }

    #read-more {
    height:18px;
    width: 92px;
    display: block;
    text-indent: -9999px;
    background: url(/images/readMore.png) top center no-repeat;
    }

    #twitter-follow {
    height:18px;
    width: 115px;
    display: block;
    text-indent: -9999px;
    background: url(/images/twitterFollow.png) top center no-repeat;
    }

    #footer-bottom {
    background-color: #b8b7b7;
    border-top: 1px solid #f74608;
    }

    ul#nav.footer-nav {
    float: left;
    position: relative;
    margin: 20px 0px 10px 34px;;
    }

    #extra-nav {
    float: right;
    margin: 20px 34px 10px 0px;
    }

    ul#extra-nav li {
    display: inline;
    text-transform: lowercase;
    font-size: 80%;
    font-weight: bold;
    }

    ul#extra-nav li a {
    color: black;
    padding: 4px;
    }

    ul#extra-nav span {
    font-weight: bold;
    color: #f74608;
    font-size: 80%;
    }

    I’ve tried repositioning my float clearing and that hasn’t helped.

    Thank you so much for any help!!!!

    # July 15, 2009 at 11:47 am

    As always, validating your markup is a good place to start troubleshooting http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvtypemedia.com%2F

    Not sure it will make a difference in ie but I would have floated #twitter left up against #blog-footer and given that a right margin:

    Code:
    #blog-footer {
    width: 359px;
    height: 118px;
    background-color: #e7e7e7;
    margin: 20px 0px 20px 60px;
    float: left;
    position: relative;
    }

    #twitter {
    width: 358px;
    height: 118px;
    background-color: #e7e7e7;
    margin: 20px 60px 0px 0px;
    float: right;
    position: relative;
    }

    # July 16, 2009 at 9:20 am

    It was missing a closing span tag.

    Thanks so much for the reminder on how important validation is!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".