<li> issues…

[rosieV]

Hi,
For some reason my <li> doesn’t do what i’d like it to do. The a class"#" ones don’t line up with the rest. I’ve been working on this for about two days, but can’t figure out the issue. Does any of you have an idea? Is it an issue with the <ul> or with the <div> structure?
(also, I’ve attached a pic of what it looks like)
THANKS!

This is the problematic part of the html
<div id="top">
<div id="top-left">
<a href="index2.html"><img src="images/nav-top-left.jpg"/></a>
</div><!–end div top-left –>

<div id="top-right">
<ul id="nav">
<li><img src="images/nav-top01.jpg"></li>
<li><img src="images/nav-top02.jpg"></li>
<li class="nieuws"><a href="#">nieuws</a></li>
<li class="service"><a href="#">service</a></li>
<li class="groepen"><a href="#">groepen</a></li>
<li class="contact"><a href="#">contact</a></li>
<li><img src="images/nav-btm01.jpg"></li>
</div><!–end div top-right –>
</div>

This is the problematic part of the CSS-file:
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;
}

ul#nav {

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

[TheDoc]

I’m not sure what you want. Can you post an image of what it SHOULD look like as well?

[rosieV]

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;
}

[TheDoc]

Silly me, I was looking at the left side nav!

If you can post a link to the site in question, we’ll have a better chance of determining exactly what is going wrong in IE7.

[rosieV]

Hi,
I don’t have the site online yet, but attached is a pic of what it looks like in IE: the ul#topnav and ul#btmnav don’t show, while the ul#nav does appear perfectly… Have been scratching my head on this!
Thanks!
R

this is the new html part, the new css i posted previously:

Code:

• top1

• top2

• nieuws
• service
• groepen
• contact

• btm

[rosieV]

Ok, just threw it quickly online… it’s accessible at http://www.rosannevdw.be/Evelien%20Site/index.html
Thanks!
R

[rosieV]

Virtual,
This doesn’t work either, since i’ve specified the <p> in my CSS to have a specific background. I’ve tried changing it into <a> tags, which works for the center navigation area, but even then the top and bottom navigation areas don’t appear in IE. When i just add the background as images, without the <li>, then i get the issue i had at first, with the center area not lined up with the rest. Hmmmm…. frustrating…

[rosieV]

Great! Thanks for all your effort, Virtual! I will revise the structure of the code.
In the mean time I also found what the problem was: i hadn’t left a space between the ul#nav url(”) and the ‘center center’ etc in CSS…. that solved everything…

[Author]

Posts