Jump to content

Bullet image


sinan92
 Share

Recommended Posts

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.gifbullet.gif

Edited by Xegano
Link to comment
Share on other sites

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

Edited by Xegano
Link to comment
Share on other sites

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 Edited by ckrudelux
Link to comment
Share on other sites

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

Edited by Xegano
Link to comment
Share on other sites

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? Edited by ckrudelux
Link to comment
Share on other sites

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:problem2.pngBullet image:bullet.gifMaybe also helpfulIn

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

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

Edited by Xegano
Link to comment
Share on other sites

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:problem2.pngBullet image:bullet.gifMaybe 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.

Edited by ckrudelux
Link to comment
Share on other sites

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

Edited by Xegano
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...