Grow your CSS skills. Land your dream job.

Horizontal Nav Bar Stepping Down in IE7

  • # April 23, 2009 at 9:41 pm

    Hello All!!

    I am working on my site in Firefox 3.0.9 (and a bit newer with CSS than probably many of you here) and it looks fair so far. However, I have a floating horizontal nav bar at the top that looks like is stepping down. Here is what I attempted so far:

    1) I have adjusted the margins, zeroed the padding and changed the width of the background image – all to no effect.

    2) I tried to create a IE7 folder and point the browser their with a different stylesheet – no effect.

    3) I tried to use IE7.js to solve the issue – no effect.

    IE is driving me batty! Any thoughts? Here is my CSS & HTML (no laughing ;-) )

    Also, here is the link: http://www.core4innovative.com (ignore the fonts – they are not rendering properly according to my stylesheet)

    Thanks!!!

    Code:
    /*—my css—*/

    #body {
    margin: 0px 0px 20px 0px;
    text-align: center;
    background: #450000 url(images/greenstrip.jpg) repeat-x right top;
    }

    #maincontainer {
    width: 720px;
    border-width: 8px;
    border-color: #fff;
    border-style: solid;
    position: absolute;
    margin-left: 50%;
    left: -360px;
    margin-right: auto;
    }

    #box p {
    position: absolute;
    color: #fffceb;
    width: 450px;
    margin-top: 275px;
    margin-left: 16px;
    background: #373635;
    font-size: medium;
    font-family: “arial rounded mt bold”, “times roman”;
    text-align: left;
    line-height: 1.5em;
    padding-left:7px;
    padding-right:7px;
    padding-bottom:7px;
    border-style:solid;
    border-color:#bec783;
    border-width: 3px;
    }

    #lowerbox p {
    position: absolute;
    color: #fffceb;
    width: 450px;
    background: #373635;
    font-size: medium;
    font-family: “arial rounded mt bold”, “times roman”;
    text-align: center;
    line-height: 1.5em;
    padding-left:7px;
    padding-right:7px;
    padding-bottom:7px;
    border-style:solid;
    border-color:#bec783;
    border-width: 3px;
    width: 450px;
    margin-top: 433px;
    margin-left: 16px;
    }

    #featured p {
    position: absolute;
    color: #000;
    width: 270px;
    margin-top: 825px;
    margin-left: 128px;
    background: none;
    font-size: small;
    font-family: “arial rounded mt bold”, “times roman”;
    text-align: center;
    line-height: 1.5em;
    }

    #customize p {
    position: absolute;
    color: #000;
    width: 270px;
    margin-top: 825px;
    margin-left: 420px;
    background: none;
    font-size: small;
    font-family: “arial rounded mt bold”, “times roman”;
    text-align: center;
    line-height: 1.5em;
    }

    .name {
    font-weight: bold;
    font-style: italic;
    color: #bec783;
    }

    ul {
    margin: 0px;
    width: 680px;
    line-height: 0em;
    list-style: none;
    font-size: medium;
    font-family: “arial rounded mt bold”, “times roman”;
    float: left;
    background: url(images/button.gif);
    }

    ul a {
    display: block;
    padding: 0 1.2em;
    line-height: 2.2em;
    text-decoration: none;
    color: #fff;
    float: left;
    margin-left: 6px;
    margin-right: 0;
    }

    ul li {
    float: left;
    width: auto;
    }

    ul a:hover {
    color:#f26214;
    }

    ul a:visited {
    text-decoration: none;
    }

    #textpad ul {
    position:absolute;
    width:100px;
    margin-top: 335px;
    margin-left: 481px;
    background: none;
    text-decoration: none;
    }

    .promise a {
    display: block;
    color:#000;
    line-height: 1em;
    font-size: 30px;
    font-family: “freestyle script”;
    width:150px;
    }

    .promise a:visited {
    text-decoration: none;
    }

    #fet a:link, #fet a:visited {
    text-decoration:none;
    color: #000;
    }

    #fet a:hover {
    color:#f26214;
    }

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Core 4 Innovative puts your online success within reach. Using our affordable
    website solutions, unique development process and standardized
    methods for design you can be sure to recieve a customized product that adds value to your business!

    We Serve Every Major Industry:
    Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services

    Customize Your website


    # April 23, 2009 at 11:07 pm

    this is most likely happening because your nav area isn’t wide enough. try adjusting it by a pixel or two. The reason the contact us is stepping down in i.e is because for I.E, it won’t fit where you told it to go.

    # April 24, 2009 at 1:32 am

    The first thing I did was adjusted the margins on the nav area. It did not work out for me. Any other thoughts?

    # April 25, 2009 at 7:34 pm

    It looks like you have no handled this. Right? The nav looks good in IE7 and IE6.

    # April 29, 2009 at 4:00 pm

    Yes – everything looks great. Thanks!!

    # April 29, 2009 at 4:18 pm

    Instead of using this:

    Code:
    border-color:#fff;
    border-width:8px;
    border-type:solid;

    You could use this:

    Code:
    border:8px solid #FFF;

    Same with padding:

    Inefficient:

    Code:
    padding-top:1px;
    padding-right:1px;
    padding-bottom:1px;
    padding-left:1px;

    Efficient:

    Code:
    padding:1px;

    Or if you want to give a 5px padding on the right and a 1px padding everywhere else you would do this.

    Code:
    padding:1px 5px 1px 1px;

    You can also do the same with margin, just remember it goes in a clockwise pattern (top, right, bottom, left).

    Have fun.

    Meshach

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

You must be logged in to reply to this topic.

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