I'm having a rather frustrating time pinpointing an issue, which is causing large spaces to appear between list items in my sitemap/menu on http://www.projectgoodlife.com (the right hand side) - but only in IE. The menu looks fine in FireFox, Netscape and Opera, but these gaps just don't look good in IE, which, unfortunately, is the browser most visitors use. I've pasted the CSS code below for the styled divs and ul/li/a tags. If there are any CSS experts out there that may be able to spot the problem, any suggestions will be gratefully received!
#RightColumnContainer #SiteMapBG {
background:url(uploads/images/bg-right.jpg) no-repeat;
background-position: bottom right;
padding-bottom: 25px;
margin-top: 10px;
}
#RightColumnContainer #SiteMap {
width:155px;
}
#RightColumnContainer #SiteMap ul li a, #RightColumnContainer #SiteMap ul li ul li a, #RightColumnContainer #SiteMap ul li ul li ul li a {
font:bold 12px Georgia, "Times New Roman", Times, serif;
color:#2b411b;
display:block;
background-color:#B1D48A;
text-decoration:none;
margin:0 0 1px 0;
padding-bottom: 0px;
}
#RightColumnContainer #SiteMap ul li a.currentpage, #RightColumnContainer #SiteMap ul li ul li a.currentpage, #RightColumnContainer #SiteMap ul li ul li ul li a.currentpage {
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
display:block;
text-decoration:none;
font-weight: bold;
padding-bottom: 0px;
}
#RightColumnContainer #SiteMap ul li a:hover, #RightColumnContainer #SiteMap ul li ul li a:hover, #RightColumnContainer #SiteMap ul li ul li a:hover {
color:#C9E1AA;
padding-bottom: 0px;
text-decoration:none;
}
#RightColumnContainer #SiteMap span.bullet_sectionheader {
font:bold 12px Georgia, "Times New Roman", Times, serif;
color:#2b411b;
display:block;
background-color:#B1D48A;
text-decoration:none;
margin:0 0 1px 0;
}
#RightColumnContainer #SiteMap h3 {
margin-bottom:10px;
color:#2b411b;
font-size: 14px;
}
#RightColumnContainer #SiteMap ul {
margin-left: 12px;
margin-bottom: 0px;
list-style-type:none;
}
#RightColumnContainer #SiteMap ul ul {
margin-left: 17px;
margin-bottom: 0px;
padding-bottom: 0px;
list-style-type:none;
list-style-image:url(uploads/images/arrow.jpg);
}
#RightColumnContainer #SiteMap ul ul ul {
margin-left: 17px;
margin-bottom: 0px;
list-style-type:none;
list-style-image:url(uploads/images/arrow.jpg);
}
Thanks once again for any help,
Hodge
