Grow your CSS skills. Land your dream job.

weird navigation spacing in IE

  • # March 14, 2009 at 5:33 pm

    Hello all, I am new to CSS and haven’t used HTML in 10 years so my question may be a little stupid. Basically, my navigation bar works perfectly in Firefox, however when I go to the site in IE the navigation bar is… stairing down? cascading down? I’m sure it’s just a matter of a line of code or an added tag.

    http://www.production6.com/testSite2.html

    HTML:

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













    Client Experience

    When you're a client with Production 6 we take your business serious. Come see why your client experience won't be like any other.

    learn more

    Portfolio

    There are a wide range of styles and clients, see some of our proudest work in our portfolio and understand why our production studio is the best choice.

    learn more

    Socializing

    All work and no play makes Production 6 a dull brand. come talk to us on all your favorite social networks.

    learn more

    Production 6 is a full service media production company that specializes in video production and motion graphics but extends to other media such as visual effects, graphic design and web design. We have a wide range of clients from corporate and political (Red Bull, Leukemia and Lymphoma Society, Marsh Copsey and Associates, Current TV, etc.), to local companies and artists (DJDocRok, Ratty Records, MonoSolo Productions, etc).

    Please contact us and tell us how we may fill your media needs. Your needs will become our obsession.

    News and Links

    DJDocRok is a local DJ doing big things for DC. Here'sa link to his newest video which Production 6 was proud to be a part of:


    DJDocRok - Take it to the Streets

    .........................

    Production 6 submited an entry for the Poptent Promo video. We're very happy with the final product so it's been added to our reel. here's a link to the video and the website:
    Poptent Promo video entry



    CSS

    Code:
    @charset "utf-8";
    /* CSS Document */

    @charset "utf-8";
    /* CSS Document */

    html{height:100%;}

    body
    {
    margin:0 auto;
    padding:0;
    text-align:center;
    height:100%;
    font-family:"Century Gothic", Verdana, Geneva, sans-serif;
    font-size:14px;
    background:#000 url(/images2/stencilLogo.png) no-repeat center fixed;
    }

    h1
    {color:#FFF;}

    p
    {color:#FFF; text-align:left;}

    a:link {color: #f9fb6a; text-decoration: underline;}
    a:visited {color: #f9fb6a; text-decoration: underline;}
    a:hover {text-decoration: none;}
    a:active {text-decoration: none;}

    div#header
    {
    position:relative;
    z-index:300;
    margin:0 0 -60px 0;
    /* padding:-25px 0 0 0;*/
    float:left;
    width:100%;
    height:38px;
    background:transparent /*url(/images2/HeaderBG2.png) no-repeat top center;*/
    }

    #logo
    {
    Margin:0 auto;
    position:relative;
    bottom:5px;
    right:50px;
    }

    ul#nav
    {
    position:relative;
    margin:0 auto;
    /* bottom:80px;*/
    left:15px;
    text-align:center;
    width:580px;
    height:35px;
    list-style:none;
    }

    ul#nav li a
    {
    float:left;
    padding:0;
    font-size:20px;
    margin:0;
    text-align:center;
    line-height:95px;
    display:block;
    text-decoration:none;
    font-weight:bold;
    width:110px;
    height:135px;
    color:#FFF;
    text-shadow:#000;
    }

    ul#nav li a:hover
    {
    color:#f9fb6a;
    /* background:transparent url(/images2/homeSplat.png) no-repeat top center;*/
    }

    a#homeLink:hover
    {
    color:#f9fb6a;
    background: url(/images2/homeSplat.png) no-repeat bottom center;
    }

    a#videoLink:hover
    {
    color:#f9fb6a;
    background: url(/images2/videoSplat.png) no-repeat top center;
    }

    a#clientsLink:hover
    {
    color:#f9fb6a;
    background: url(/images2/graphicsSplat.png) no-repeat bottom center;
    }

    a#contactLink:hover
    {
    color:#f9fb6a;
    background: url(/images2/contactSplat.png) no-repeat top center;
    }

    div.clearFloat
    {
    clear:both;
    }

    div#content
    {
    position:relative;
    margin:0 auto;
    width:850px;
    clear:left;
    min-height: 100%;
    padding:35px 20px;
    /* z-index:1000;*/
    background:transparent url(/images2/shadowBG.png) repeat center top;
    }

    div#content_main
    {
    padding:15px 0px;
    float:left;
    width:610px;
    }

    div#content_sub
    {
    float:right;
    width:195px;
    margin:0px;
    padding:15px 15px;
    color:#FFF;
    background:transparent url(/images2/sidePanel.png) repeat top center;
    }

    h1#sub_header
    {
    color:#f9fb6a;
    position:relative;
    bottom:10px;
    }

    p.divider
    {
    text-align:center;
    }

    /*************FEATURED CONTENT WINDOW*************/
    * { margin: 0; padding: 0; }
    a { text-decoration: none; outline: none; }
    a img { border: none; }

    #page-wrap { background: white; width: 850px; margin: 0 auto;
    padding: 50px 0; }

    h2 { font-size: 36px; text-align: center;
    font-weight: normal; }

    #slider { background: transparent url(/images2/slider-bg.png); height: 227px; overflow: hidden;
    position: relative; margin: 50px 0; }

    /* DEFAULT is for three panels in width, adjust as needed
    This only matters if JS is OFF, otherwise JS sets this. */
    #mover { width: 2550px; position: relative; }

    .slide { padding: 40px 30px; width: 900px; float: left; position: relative; text-align:left;}
    .slide h1 { font-size: 30px; letter-spacing: -1px;
    color: #f9fb6a; }
    .slide p { color: #FFF; font-size: 12px; line-height: 22px; width: 300px; }
    .slide img { position: absolute; top: 20px; left: 400px; }
    #slider-stopper { position: absolute; top: 1px; right: 20px; background: #000; color: #FFFFFF;
    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
    /*************FEATURED CONTENT WINDOW*************/

    div#footer
    {
    margin:-25px 0 0 0;
    float:left;
    clear:left;
    width:100%;
    height:50px;
    z-index:1000;
    position:relative;
    background:transparent;
    }

    p#copyright
    {
    color:#fff;
    text-align:center;
    padding-top:25px;
    font-size:11px;
    font-weight:bold;
    }

    # March 14, 2009 at 6:28 pm

    I don’t have access to IE right now but I think this should fix it:

    Code:
    ul#nav li {
    display: inline;
    }
    Rob
    # March 14, 2009 at 7:15 pm

    you might also have to add a float:left – ie is a little mental like that

    # March 15, 2009 at 4:18 am
    "Robskiwarrior" wrote:
    you might also have to add a float:left – ie is a little mental like that

    Oops :oops: . Nice catch!

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

You must be logged in to reply to this topic.

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