Home › Forums › CSS › <li> issues… › Re:
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!!
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;
}