Nav Background Position

[Historical Forums User]

My navigation in my website looks great in every browser except ie. I don’t think it is recognizing the last child. As you can see the right button is not rounded like the left. Any ideas?

http://www.mtrservices.com/home/

here is the css for the right button.

ul.dropdown li:last-child {
background:url(../images/nav.png) no-repeat top right;
}

Thanks!

[Historical Forums User]

ok apparently its internet explorers inability to support the last-child pseudo class. so i tried using the class of that li. It still wont work in IE! I’m using wordpress so the li has two classes. so I think that is my issue. I’m not completely sure though.

It outputs the following HTML:
<li class="page_item page-item-11"><a title="Contact" href="http://www.mtrservices.com/contact/">Contact</a></li&gt;

so in my css I write:
ul.dropdown li:last-child, ul.dropdown li.page-item-11 {
background:url(../images/nav.png) no-repeat top right;
}

works fine in all the other browsers, not in IE. Any thoughts?

Thanks!

[Historical Forums User]

Well now I have that working but I can’t seem to get the hover state to work.

[Historical Forums User]

this is what i’ve got so far:

Code:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: right;
margin-top: 60px;
}

ul.dropdown a {
color: #dadada;
text-decoration: none;
}

ul.dropdown li {
float: left;
vertical-align: middle;
text-transform: uppercase;
font-family: Arial;
font-size: 13px;
font-weight: bold;
height: 70px;
background: url(../images/nav.png) no-repeat top center;
}

ul.dropdown li:first-child {
background: url(../images/nav.png) no-repeat top left;
}

ul.dropdown li:last-child, ul.dropdown li.page-item-11 {
background: url(../images/nav.png) no-repeat top right;
}

ul.dropdown li a {
display: block;
padding:28px 36px 29px 36px;
text-align: center;
}

ul.dropdown li:first-child a {
padding-left: 45px;
}

ul.dropdown li:last-child a {
padding-right: 45px;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
color: #fff;
background: url(../images/nav.png) no-repeat bottom center;
}

ul.dropdown li:first-child.hover,
ul.dropdown li:first-child:hover {
background: url(../images/nav.png) no-repeat bottom left;
}

ul.dropdown li:last-child.hover,
ul.dropdown li:last-child:hover,
ul.dropdown li.page-item-11:hover {
background: url(../images/nav.png) no-repeat bottom right;
}

ul.dropdown li.current_page_item {
color: #fff;
}

ul.dropdown li:first-child.current_page_item {
background: url(../images/nav.png) no-repeat bottom left;
}

ul.dropdown li:last-child.current_page_item,
ul.dropdown li.page-item-11.current_page_item {
background: url(../images/nav.png) no-repeat bottom right;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 300px;
}

and for some reason this isn’t working in ie for the hover state:

Code:

ul.dropdown li:last-child.hover,
ul.dropdown li:last-child:hover,
ul.dropdown li.page-item-11:hover {
background: url(../images/nav.png) no-repeat bottom right;
}

nevermind, the last child / page-item-11 still isnt working for some reason. just checked it again. i think it was working earlier. hmm…

[Historical Forums User]

see now the right rounded corners on the nav work. i dont know what i did. the rollover doesnt work though.

[Author]

Posts