Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE7 hopping nav bar

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #29662
    hareline
    Member

    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 http://www.harelinegraphics.com, 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:

    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.
    Thanks,
    Jill

    #80023
    dcp3450
    Participant

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

    #80035
    hareline
    Member

    [img]http://raphaelray.smugmug.com/photos/940489235_E3jkS-L.jpg[/img]

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

    -Jill

    #80112
    virtual
    Participant

    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.

    #80172
    hareline
    Member

    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.

    Thanks,
    Jill

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.