Bullet image

[sinan92]

Is there a way to change the image bullet and which is compatible for all browsers?I tried this but it didn't really work

<div id="staff_box"><p><ul><li>Administrator</li></ul><p></div>

#wrapper {	padding:1px;	width:1270px;	height:500px;	}#left {	float:left;	overflow:hidden;	}#staff_box {	background:url(img/staff_box.jpg) no-repeat;	margin-bottom:10px;	width:237px;	height:229px;	padding:1px;	}	#staff_box p {	margin-top:50px;	}#staff_box p ul {	margin-left:0;	padding-left:0;	list-style:none;	}	#staff_box p ul li {	padding:10px;	background-image:url(img/bullet.gif);	background-repeat: no-repeat;	background-position: 0.5em;	}

bullet.gif

[jeffman]

You can get more control using your technique. What doesn't work about it?The "standard" way is to use list-style-image.

[sinan92]

You can get more control using your technique. What doesn't work about it?The "standard" way is to use list-style-image.

Yea but that one isnt compatible for all browsersExplorer 4 and older doesn't support itI don't know if there are more browsers which don't support it but yeaAlso, I just tried but list-style-image doesnt seem to work either

ul { list-style-image: url("bullet.gif"); }

[ckrudelux]

Yea but that one isnt compatible for all browsersExplorer 4 and older doesn't support itI don't know if there are more browsers which don't support it but yeaAlso, I just tried but list-style-image doesnt seem to work either

ul { list-style-image: url("bullet.gif"); }

but why do you want to support IE 4? If you install Win XP you get IE 6 as a browser so quite few will be belove IE 6

[sinan92]

but why do you want to support IE 4? If you install Win XP you get IE 6 as a browser so quite few will be belove IE 6

Oh good point I could use list-style-image then insteadBut any explenation of why list-style-image doesnt work for me then?Tried:

ul { list-style-image: url("bullet.jpg"); }

And:

#staff_box p ul {	list-style-image:url(img/bullet.gif);	}

None of it workedI am using firefoxJust noticed that even list-style-type:none; Doesn't workIt keeps showing the disc style

[ckrudelux]

Oh good point I could use list-style-image then insteadBut any explenation of why list-style-image doesnt work for me then?Tried:

ul { list-style-image: url("bullet.jpg"); }

And:

#staff_box p ul {	list-style-image:url(img/bullet.gif);	}

None of it workedI am using firefoxJust noticed that even list-style-type:none; Doesn't workIt keeps showing the disc style

Are you sure you have the right path to the image?

[sinan92]

Are you sure you have the right path to the image?

I amAs I showed in the first postHTML:

</div><div id="wrapper"><div id="left"><div id="staff_box"><p><ul><li>Administrator</li></ul><p></div>

CSS:

#staff_box {	background:url(img/staff_box.jpg) no-repeat;	margin-bottom:10px;	width:237px;	height:229px;	padding:1px;	}	#staff_box p {	margin-top:50px;	}#staff_box p ul {	list-style-type:none;	}

Body CSS:

body {	z-index: 0; 	background: #000000 url(img/background.jpg) no-repeat center top;	padding:0;	margin-left:auto;	margin-right:auto;	font:80%/180% Verdana, Geneva, sans-serif;	width:1300px;	height:1000px;	}

Website image:Bullet image:Maybe also helpfulIn

#staff_box p {	margin-top:50px;	}

It doesn't allow me to do margin-left either

[ckrudelux]

I amAs I showed in the first postHTML:

</div><div id="wrapper"><div id="left"><div id="staff_box"><p><ul><li>Administrator</li></ul><p></div>

CSS:

#staff_box {	background:url(img/staff_box.jpg) no-repeat;	margin-bottom:10px;	width:237px;	height:229px;	padding:1px;	}	#staff_box p {	margin-top:50px;	}#staff_box p ul {	list-style-type:none;	}

Body CSS:

body {	z-index: 0; 	background: #000000 url(img/background.jpg) no-repeat center top;	padding:0;	margin-left:auto;	margin-right:auto;	font:80%/180% Verdana, Geneva, sans-serif;	width:1300px;	height:1000px;	}

Website image:Bullet image:Maybe also helpfulIn

#staff_box p {	margin-top:50px;	}

It doesn't allow me to do margin-left either

I can't find this any there in your last post

list-style-image: url(img/bullet.gif);

I usually have a practices of using float left most of my styled elements I found what I get less problems what way.

[sinan92]

I can't find this any there in your last post

list-style-image: url(img/bullet.gif);

I usually have a practices of using float left most of my styled elements I found what I get less problems what way.

I've got it to workFloat left didn't work but what I did wasFrom

#staff_box p ul {	list-style-image:url(img/bullet.gif);	}

I took away the p tag so it'd look like this:

#staff_box ul {	list-style-image:url(img/bullet.gif);	}

Thanks a lot anyway guys

[ckrudelux]

I've got it to workFloat left didn't work but what I did wasFrom

#staff_box p ul {	list-style-image:url(img/bullet.gif);	}

I took away the p tag so it'd look like this:

#staff_box ul {	list-style-image:url(img/bullet.gif);	}

Thanks a lot anyway guysEdit:Lol I noticed a really stupid mistakeI did <p> <p> instead of <p> </p>That should have been it

Ow I see, anyway float left usually fix problems like margin and blocks/element behavior against other blocks/elements