Hey all. I am not new to this site, but had to re-register. However, I was hoping someone could help me with a IE7 CSS issue that I am having?
On www.commentsandcapers.com my menu on the right it not centering in the containing element. Could one of you take a look at it and see if you could point out what it is. Of course, it looks fine in IE8 and Firefox.
http://www.commentsandcapers.com
Here is the menu code:
#rightLinks ul.topMenu {
text-align: center;
z-index: 20;
}
#rightLinks ul.topMenu li {
list-style-type: none;
position: relative;
text-align: center;
}
#rightLinks ul.topMenu li > ul {
display: none;
font-size: 1.0em;
position: absolute;
right: 200px;
top: 2px;
z-index: 20;
}
#rightLinks ul.topMenu ul.topMenu {
display: block;
}
#rightLinks ul.topMenu li:hover > ul {
display: block;
}
#rightLinks ul.topMenu li a {
background-image: url(../images/Cbutton.png);
background-repeat: no-repeat;
color: white;
display: block;
font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif;
height: 20px;
letter-spacing: 4px;
margin: 0 auto 3px auto;
text-align: center;
text-decoration: none;
width: 192px;
}
#rightLinks ul.topMenu ul {
background: #F2F2F2;
text-align: center;
width: 145px;
}
#rightLinks ul.topMenu li li a {
background-image: url(../images/CSubbutton.png);
font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif;
letter-spacing: 0px;
text-align: center;
width: 140px;
padding:0;
}
#rightLinks ul.topMenu li:hover > a {
background-image: url(../images/Cbutton2.png);
background-repeat: no-repeat;
}
#rightLinks ul.topMenu li li:hover > a {
background-image: url(../images/CSubbutton2.png);
background-repeat: no-repeat;
color: #fff;
z-index: 20;
}
