Lists/Bullets appear different in FF vs. IE

[kasha]

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:

http://www.xsystem.gr/stylebytes/IE.jpg

i want it to look more like this:

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;
}

[ronaldb66]

Default list styling is implemented slightly differently by the various browsers; to overcome this, it's adviced to explicitly set both margin and padding values for lists and list items to make sure the styling is consistent across browsers.

For the disappearing borders you could try out a small top and bottom margin for the list items; the line height may need adjusting as well.

If you use background images on the list items for bullets, rather then image style bullets, you'll have more control over placement and alignment. You can read more about this in the Listutorial, tutorial 1.