Everything works fine in FF, Safari, Opera. I am trying to fix it for IE6 and IE7. So far, I have added an IE7 stylesheet, but am having trouble formatting (1) nav menu on left and (2) images with captions below - both in floats.
Site is : www.sabi-star.com
A page with both examples is: www.sabi-star.com/women
The menu on the left is strange, and the caption for the photo should be centered under the image.
My CSS:
Menu:
#leftnavbar-wrap {
position: relative;
float: left;
margin:-59px 0 0 40px;
padding: 0;
height: auto;
width: 130px;
}
#leftnavbar {
text-decoration: none;
list-style:none;
margin: 10px 0;
border-bottom: 1px solid #98B5C3;
}
#leftnavbar a {
display: block;
line-height: 1.3em;
text-decoration: none;
list-style: none;
text-align: right;
padding: 5px 5px 2px 5px;
color: #9469AD;
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
background-color: #ECEFF8;
}
#leftnavbar a:hover {
background: #ccc;
}
#leftnavbar .listhead {
margin: 0;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
background-color: #ECEFF8;
font-weight:bold;
border-top: 1px solid #98B5C3;
}
Caption:
#image p {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: smaller;
color:#768D99;
text-align:center;
}
div.right {float:right;width:330px;margin:0;padding:0;display:inline;}
Thanks in advance for help!
