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

IE7 hopping nav bar

  • # July 19, 2010 at 6:09 pm

    I’ve looked through the forums and found many similar IE7 issues, but after hours of tinkering I have had no luck in fixing my particular problem. My site is, and in all browsers it displays fine, except in IE7, the nav displays on top of the header instead of inside it. I’ve played with getting rid of padding or margins, giving it a relative position, but nothing works (less padding/margin means it takes up less space, but still sits on top of the header div). The site is validated and 100% CSS and html compliant.

    Here is relevant CSS code:

    #nav_bar {
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    text-decoration: none;
    float: right;
    height: 38px;
    width: 470px;
    padding-top: 112px;
    padding-left: 490px;
    #nav_bar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    #nav_bar li {
    display: inline;
    height: 38px;
    width: 94px;
    float: none;
    font-family: “obliqua-1″, “obliqua-2″, sans-serif;
    font-size: 14px;
    padding-top: 0px;
    padding-right: 25px;
    padding-bottom: 0px;
    padding-left: 0px;
    color: #333;
    #nav_bar a:link {
    color: #333;
    text-decoration: none;

    #nav_bar a:visited {
    color: #333;
    text-decoration: none;

    #nav_bar a:hover {
    color: #5c8727;

    #nav_bar ul .clients a {
    color: #5c8727;

    .oneColFixCtrHdr #container {
    width: 960px; /* the auto margins (in conjunction with a width) center the page */
    border: 0px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 780px;
    background-image: url(images_hlg/backgroundslice.jpg);
    background-repeat: repeat;
    .oneColFixCtrHdr #header {
    padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    background-color: #ebdcc9;
    margin: 0px;
    height: 150px;
    width: 960px;
    background-image: url(images_hlg/hlg960site_02.jpg);

    BTW I know my code is a little rough – I’m a newbie.

    # July 19, 2010 at 6:16 pm

    can you post a screen shot. some of us don’t have IE7

    # July 19, 2010 at 7:50 pm


    The top area (above the logo) shouldn’t be there – the nav bar should be slightly above the green line.


    # July 20, 2010 at 4:27 pm

    Move your #nav_bar into the #header after the h1 tags. You will still need to correct some problems in IE6 with an IE6 specific stylesheet. I also suggest you move all your css into an external stylesheet.

    # July 21, 2010 at 2:09 pm

    Wow. Thank you so much! :D

    I thought I had put the #nav_bar inside the #header, but it wasn’t (which makes me wonder why it was working with any browsers!)

    About the external style sheet. I am a newbie, and when I started, my goal was to make this page a template for all other pages (the dwt file was giving me trouble though, so what I did was create the other pages by saving a copy of it). Thus, I have both document-only styles and external styles. It’s a mess, and what will probably work best for me (on future sites) is to forget the template idea, create the external style sheet, and only have page-specific divs in the document-only style sheet.


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

You must be logged in to reply to this topic.