Grow your CSS skills. Land your dream job.

Nav and content behaves wierd in IE

  • # October 19, 2008 at 8:46 am

    Can someone tell me, why the nav at
    http://demo.frac.dk behaves wierd in IE? And why does the "sidebar" float right?
    The Css code =

    Code:
    /* reset styles */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }

    :focus {
    outline: 0;
    }
    body {
    line-height: 1;
    color: black;
    background: white;
    }
    ol, ul {
    list-style-type: square;
    text-align: center;
    font-size: 1.107em;
    }

    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: “”;
    }
    blockquote, q {
    quotes: “” “”;
    }
    /* end of reset styles */

    body {
    margin:0px; padding:0px;
    background-color: #EAEAEA;
    background-image: url(“images/bg.jpg”);
    font-family:Arial, Helvetica, sans-serif;
    font-size:62.5%;
    line-height:19px;
    background-repeat: repeat-x;
    }

    #wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
    width: 790px;
    text-align: left;
    }

    ul.navlist li h2 a, ul.navlist li h2 a.blue:link, ul.navlist li h2 a.blue:visited, ul.navlist li h2 a.blue:active, ul.navlist li h2 a.blue:hover {
    color:#fff;
    border-bottom:5px solid #cecece;
    }
    ul.navlist {
    margin:0px;
    padding:0px;
    list-style-type:none;
    position:relative;
    display:block;
    }
    ul.navlist li {
    display:block;
    float:left;
    margin:0px;
    padding:0px;
    }
    ul.navlist li h2 a {
    display:block;
    float:left;
    padding-left:2px;
    background-color:#999;
    text-decoration:none;
    border-left:1px solid #cecece;
    width:92px;
    height:25px;
    }

    ul a, a:visited, a:active{
    margin-right: 1em;
    margin-top: 110px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 17px;
    padding-top: 17px;
    display: inline;
    text-decoration: none;
    font-family: “Tahoma”, Lucida, Verdana, sans-serif;
    color: #EAEAEA;
    text-align: left;
    float: left;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 1.8em;
    border-style: hidden;
    border-width: 1px;
    position: relative;

    }

    ul li a:hover {
    background: #EAEAEA;
    color: black;
    display: inline;
    }

    ul #active {
    background: transparent url(images/current.png) no-repeat scroll center bottom;
    padding-bottom: 30px;
    display: inline;
    }

    #logo {
    width: 200px;
    height: 20px;
    position: absolute;
    display: inline;
    z-index: 3;
    }

    h1 {
    background-image: url(images/content-header.png);
    background-repeat: no-repeat;
    padding: 15px;
    padding-top: 13px;
    font-size: 1.3em;
    color: #EAEAEA;
    }

    #icon1 {
    padding-left: 120px;
    margin-top: -23px;
    position: absolute;
    }

    #icon2 {
    padding-left: 160px;
    margin-top: -22px;
    position: absolute;
    }

    #icon3 {
    padding-left: 110px;
    margin-top: -37px;
    position: absolute;
    }

    #content-wrap {
    padding-top: 190px;
    font-size: 1.18em;

    }

    #content-wrap p {
    }

    #content1 {
    display: block;
    width: 230px;
    float: left;
    padding: 10px;
    padding-top: 5px;

    }

    #content2 {
    display: block;
    width: 230px;
    float: left;
    padding: 10px;
    padding-top: 5px;
    }

    #content3 {
    display: block;
    width: 230px;
    float: left;
    padding: 10px;
    padding-top: 5px;
    }

    and the html

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


    Who are we?
    icon

    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam.

    What can we offer?
    Icon 2

    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam.

    Contact us

    Icon3

    3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam.

    # October 19, 2008 at 2:42 pm

    well i don’t see any code telling your nav to display inline. So that could be the start of your problems.

    # October 19, 2008 at 8:48 pm

    I would download the firebug addon for FF and look at each of your elements in detail. It will show you exactly how everything is positioned as well as showing you which elements are cascaded throughout the body of the document (so you don’t re-use stuff). Take a look at that and see what everything does.http://getfirebug.com/

    The following is my Nav code and CSS. It might help you out.
    HTML:

    CSS:

    Code:
    ul.navlist li h2 a, ul.navlist li h2 a.blue:link, ul.navlist li h2 a.blue:visited, ul.navlist li h2 a.blue:active, ul.navlist li h2 a.blue:hover {
    color:#fff;
    border-bottom:5px solid #cecece;
    }
    ul.navlist {
    margin:0px;
    padding:0px;
    list-style-type:none;
    position:relative;
    display:block;
    }
    ul.navlist li {
    display:block;
    float:left;
    margin:0px;
    padding:0px;
    }
    ul.navlist li h2 a {
    display:block;
    float:left;
    padding-left:2px;
    background-color:#999;
    text-decoration:none;
    border-left:1px solid #cecece;
    width:92px;
    height:25px;
    }

    You can see it in action at http://www.thedailyspunkmeyer.com

    # October 20, 2008 at 6:01 am

    It worked, thank you!
    But i still need help about the content though.

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".