Help with some CSS code not displaying images.

Hey there, my forum is using a navbar that has a dropdown menu function. To access the dropdown menu, there used to be arrows that you could press that would drop down the menu.

However, it seems that those images aren't hosted anymore, so there is nothing there. I have tried to update the images with some of my own arrows, but it won't display on the forum.

Here is the CSS code:

Code:

ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x
}

ul.topnav li {
float:left;
margin:0;
padding:0 15px 0 0;
position:relative;
}

ul.topnav li a {
padding:10px 5px;
color:#CEC7A9;
display:block;
text-decoration:strong;
float:left
}

ul.topnav li a:hover {
background:url(http://2img.net/i/fa/empty.gif) no-repeat center top
}

ul.topnav li span {
width:17px;
height:35px;
float:left;
background:url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top
}

ul.topnav li span.subhover {
background-position:center bottom;
cursor:pointer
}

ul.topnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:35px;
background:#333;
margin:0;
padding:0;
display:none;
float:left;
text-shadow:0 0 15px #93F;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border:1px solid #111
}

ul.topnav li ul.subnav li {
margin:0;
padding:0;
border-top:1px solid #252525;
border-bottom:1px solid #444;
clear:both;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px
}

html ul.topnav li ul.subnav li a {
float:left;
width:145px;
background:#333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left:20px
}

html ul.topnav li ul.subnav li a:hover {
background:#222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
text-shadow:0 0 15px #93F
}

Yes, I realize that some of those are using the "empty.gif", I did that myself after images I had tried weren't working. 

The link to my forum, if needed is THIS

Basically I want to know why my own images won't display when I put them into that CSS, and how I can fix that so they do display.

At a quick glance i can see several Errors in your CSS, I will edit it for you if you can give me like 5-9 minutes to do so.

Certainly.

Any help is appreciated.

Replace your CSS with this, it should be working now.

Code:

ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x;
}

ul.topnav li {
float:left;
margin:0;
padding:0 15px 0 0;
position:relative;
}

ul.topnav li a {
padding:10px 5px;
color:#CEC7A9;
display:block;
text-decoration:strong;
float:left;
}

ul.topnav li a:hover {
background:url(http://2img.net/i/fa/empty.gif) no-repeat center top;
}

ul.topnav li span {
width:17px;
height:35px;
float:left;
background:url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top;
}

ul.topnav li span.subhover {
background-position:center bottom;
cursor:pointer;
}

ul.topnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:35px;
background:#333;
margin:0;
padding:0;
display:none;
float:left;
text-shadow:0 0 15px #93F;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border:1px solid #111;
}

ul.topnav li ul.subnav li {
margin:0;
padding:0;
border-top:1px solid #252525;
border-bottom:1px solid #444;
clear:both;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

html ul.topnav li ul.subnav li a {
float:left;
width:145px;
background:#333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left:20px;
}

html ul.topnav li ul.subnav li a:hover {
background:#222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
text-shadow:0 0 15px #93F;
}

This did not help me accomplish what I'm trying to do. 

I've added my arrows as I was trying to do before, and here are the issues I'm encountering:

1. The drop down arrow isn't displaying at all times. It only displays when I hover.

2. When the arrow displays over what I'm hovering on, the arrow is showing up on things it isn't supposed to.

3. The arrow is in the improper position, it's appearing over the text when it was supposed to appear level to it and to the right.

I never had these kinds of issues until the images it was originally using were no longer hosted. Even with the old CSS I had before your rework, it still had initially worked.


Edit: Fiddling around with it, I have solved my issue.

I only fixed the lines in your css that where not closed off with a ;

for example:

Code:

ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x
}

Your are missing a semi-colon at the end of this line

Code:

 background:url(http://2img.net/i/fa/empty.gif) repeat-x

as well as several more i just added them.

Now their may be more issues in your css then i noticed at first,
Is the style sheet active on your forum still so i can see these issues you are seeing?



Also can you provide screen shots for the issues you listed.

You may also need to post the java script you used to create this nav bar as the issue may lie in there


I just saw your edit, if this is solved you should go ahead and edit the first post and add the topic solved icon so the staff can take care of it.