Thursday, September 5, 2013

background image divider won't show in my css menu

background image divider won't show in my css menu

I'm using an image divider in my css menu however the last one at the end
of the contact button won't show up..
<div id="menu">
<ul>
<li><a href="index.html"><span class="used">Home</span></a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contect.html">Contact</a></li>
<img src="img/divider.png" alt="" style="margin-left: auto; margin-right:
auto;"/>
</ul>
</div>
Thats my menu (ignore the divider.png as that is the image below the
menu), and this is my css.
.header #menu {
word-spacing: 60px;
font: 17px 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #333;
margin: 40px auto 0 auto;
width: 1024px;
overflow: hidden;
}
ul {
list-style: none;
display: block;
text-align: center;
}
li {
list-style: none;
width: 239px;
height: 69px;
display: inline-block;
vertical-align: baseline;
overflow: hidden;
background: url(../img/nav-divider.png) no-repeat 0 100%;
}
As you can my background image is my divider and it works for all the
other list items just after the contact list item it wont appear anyone
help, it's been driving me nuts.
Thanks a lot.

No comments:

Post a Comment