Forums

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

Home Forums CSS <li> issues… Re:

  • issues…

  • #69733
    rosieV
    Member

    Doc,
    Find attached what it should look like. In the mean time i was able to solve it, but it only works in Firefox and Google chrome, not in Internet Explorer.
    What i did was turning the top-right navigation area (the three white ‘stripes’)into three different <ul>: #topnav, #nav, and #btmnav. All three ones include (or will include) navigation. Don’t know what the problem is in Internet explorer though. Any advice?
    Thanks!!

    Code:
    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    background: url(images/center.jpg) repeat-y;
    }
    div#top{
    height: 140px;
    }
    div#top div#top-left{
    width: 175px;
    float: left;
    }
    div#top div#top-right{
    width: 625px;
    float: right;
    }

    div#main-content {
    padding: 20px 40px 20px 15px;
    min-height:450px;

    }
    div#sidebar{
    width: 150px;
    float: left;
    border-top:solid;
    border-top-width:4px;
    border-top-color: #a2bb2a;
    border-bottom:solid;
    border-bottom-width:4px;
    border-bottom-color: #a2bb2a;
    padding-bottom: 20px;
    padding-top:0px;
    background:#f4f4f4;
    }
    div#sidebar p {
    padding-left:5px;
    letter-spacing:1px;
    color: #898989;
    }
    div#sidebar p span {
    color: #a2bb2a;
    font-size:1.5em;
    }
    div#sidebar a {
    color: #898989;
    text-decoration: none;
    }
    div#sidebar a:hover, a:active{
    text-decoration: underline;
    }
    div#content{
    width: 550px;
    float:right;
    }

    ul#nav {

    }
    ul#nav li {
    display: inline;
    float: left;

    }
    ul#nav li a {
    display:block;
    text-indent: -9999px;
    padding:0px;
    margin:0px;
    height: 42px;
    }
    ul#nav li.nieuws a {
    width: 137px;
    background: url(images/nav-ctr01.jpg) bottom center no-repeat;
    }
    ul#nav li.service a {
    width: 124px;
    background: url(images/nav-ctr02.jpg) bottom center no-repeat;
    }
    ul#nav li.groepen a {
    width: 133px;
    background: url(images/nav-ctr03.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a {
    width: 231px;
    background: url(images/nav-ctr04.jpg) bottom center no-repeat;
    }
    ul#nav li.nieuws-ON a {
    width: 137px;
    background: url(images/nav-ctr01.jpg) center center no-repeat;
    }
    ul#nav li.service-ON a {
    width: 124px;
    background: url(images/nav-ctr02.jpg) center center no-repeat;
    }
    ul#nav li.groepen-ON a {
    width: 133px;
    background: url(images/nav-ctr03.jpg) center center no-repeat;
    }
    ul#nav li.contact-ON a {
    width: 231px;
    background: url(images/nav-ctr04.jpg) center center no-repeat;
    }
    ul#nav li a:hover, a:active {
    background-position: center center;
    }

    ul#topnav {

    }
    ul#topnav li {
    display: inline;
    float: left;

    }
    ul#topnav li p {
    display:block;
    text-indent: -9999px;
    padding:0px;
    margin:0px;
    height: 56px;
    }
    ul#topnav li.top1 p {
    width: 551px;
    background: url(images/nav-top01.jpg)no-repeat;
    }
    ul#topnav li.top2 p {
    width: 74px;
    background: url(images/nav-top02.jpg)no-repeat;
    }
    ul#btmnav {

    }
    ul#btmnav li {
    display: inline;
    float: left;

    }
    ul#btmnav li p {
    display:block;
    text-indent: -9999px;
    padding:0px;
    margin:0px;
    height: 42px;
    }
    ul#btmnav li.btm1 p {
    width: 625px;
    background: url(images/nav-btm01.jpg)no-repeat;
    }
    ul#btmnav li a {
    display:block;
    text-indent: -9999px;
    padding:0px;
    margin:0px;
    height: 42px;
    }
    ul#btmnav li.spiegel a {
    width: 189px;
    background: url(images/nav-btmspiegel.jpg)bottom center no-repeat;
    }
    ul#btmnav li.kirke a {
    width: 98px;
    background: url(images/nav-btmkirke.jpg)bottom center no-repeat;
    }
    ul#btmnav li.basse a {
    width: 204px;
    background: url(images/nav-btmbasse.jpg)bottom center no-repeat;
    }
    ul#btmnav li.sprezz a {
    width: 134px;
    background: url(images/nav-btmsprezz.jpg)bottom center no-repeat;
    }
    ul#btmnav li.spiegel-ON a {
    width: 189px;
    background: url(images/nav-btmspiegel.jpg)center center no-repeat;
    }
    ul#btmnav li.kirke-ON a {
    width: 98px;
    background: url(images/nav-btmkirke.jpg)center center no-repeat;
    }
    ul#btmnav li.basse-ON a {
    width: 204px;
    background: url(images/nav-btmbasse.jpg)center center no-repeat;
    }
    ul#btmnav li.sprezz-ON a {
    width: 134px;
    background: url(images/nav-btmsprezz.jpg)center center no-repeat;
    }
    ul#btmnav li a:hover, a:active {
    background-position: center center;
    }

    #footer {
    min-height: 95px;
    background: url(images/footer.jpg) no-repeat;
    }