Forums

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

Home Forums CSS Nav and content behaves wierd in IE

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23430
    Ryqiem
    Member

    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:



    Simple website

    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.

    #50650
    Spunkmeyer
    Member

    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

    #50656
    Ryqiem
    Member

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

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