/    Sign up×
Community /Pin to ProfileBookmark

Lists/Bullets appear different in FF vs. IE

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[/url]

i want it to look more like this:

[url]http://www.xsystem.gr/stylebytes/mozilla.jpg[/url]

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

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 27.2006 — Without the html this is guesswork.

The misalignment of bullets is best solved using [I]background-image[/I]s instead of [I]list-style-image[/I]. You can easily adjust the position of the text in relation to the background using [I]padding[/I].

The missing lines maybe solved by giving the links (a or li) a [I]height[/I] or [I]line-height[/I].
×

Success!

Help @kasha spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...