I made a menu using list styles which shows up perfectly in FF, but badly in IE.
There are problems with the borders and with the bullet images, which you can see in this jpeg here:
[url]http://www.xsystem.gr/stylebytes/IE.jpg
i want it to look more like this:
[url]http://www.xsystem.gr/stylebytes/mozilla.jpg
maybe someone can give me some advice?
this is the CSS:
#sectionlinks {
background-image: url(images/menu_img.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 315px;
width: 196px;
float: left;
margin: 0px;
padding: 0px;
font-size: 105%;
padding-top: 10px;
}
#sectionlinks a {
display: block;
padding: 0px 0px 0px 0px;
color: #17253E;
text-decoration: none;
}
#sectionlinks a:hover{
background-color: #E5E3E0;
font-weight: bold;
}
#sectionlinks a:active{
font-weight: bold;
}
#sectionlinks ul a:link{
display: block;
list-style-position: inside;
}
#sectionlinks ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 21px;
list-style-image: url(images/bullet_link.jpg);
line-height: 150%;
}
#sectionlinks ul ul {
line-height: 150%;
list-style-image: url(images/bullet_link2.jpg);
}
#sectionlinks ul ul ul{
line-height: 120%;
list-style-image: url(images/bullet_link3.jpg);
}
#sectionlinks li {
border-bottom-width: 1px;
border-bottom-color: #DDDDDB;
border-bottom-style: solid;
}
#sectionlinks li li {
border-bottom-width: 1px;
border-bottom-color: #DDDDDB;
border-bottom-style: solid;
}
#sectionlinks li li li{
border-bottom-width: 1px;
border-bottom-color: #DDDDDB;
border-bottom-style: solid;
}
#subnav a:link {
color: #3F64A0;
text-decoration: none;
}