Help me alignment problems vth css

[chowdarysmk]

hai fndz,
i face alignment problems vth css...
anyone can help me.....in mozilla,but not striaght it show space between bullet symbols&text area...In IE7 ,no space between bullet symbol&text area...the pics are shown below (if any one ask code i also put it).how 2 correct alignment??/
plz help me.............
Thank you

[ko ko]

Are you using the list-item and image as list-style-image? I think so, this is very hard to control the position of the list-item to the same result for all browsers. I don't like to use list-style-image. Use the image as background of the list-item and give them vertical position of 50% and it'll fine on all browsers. Here is example:

CSS:
ul {
list-style: none; margin: 0; padding: 0 /* margin and padding were not the same in all browsers, I set 0 for the same result */; width: auto }
ul li {
list-style: none; margin: 0; padding-left: 1.4em; background: url('list-item.gif') no-repeat 3pt 50%; line-height: 2.4em }

HTML:
<ul>
	<li><a href="#">ON Time</a></li>
	<li><a href="#">Per Specification</a></li>
	<li><a href="#">ON Cost</a></li>
	<li><a href="#">Shared Risk</a></li>
</ul>

You can also use the image for the anchor link background.

a {background: url('list-item.gif') no-repeat 0 50% }

Good luck...

[chowdarysmk]

THANK U FOR giving response but i want to change both list style image items&background images.the code is below for that thumbainails

.nrml-bul{
	list-style-image: url('../images/bullet-blue-normal.png');
	list-style-position:inside;
	margin:5px 40px 10px 0px;
	border:1px solid #ccc;
	padding:12px;
	background: url('../images/list-bg-large.png') repeat-x;
vertical-align: middle;
}

[ko ko]

Dear chowdarysmk, thank for reply. I correct some code in your css shown by red color, please try with these. And there is no vertical-align for block level elements. So, the vertical-align for li was ignore. I don't know exactly what your problem was, but I think it is the vertical alignment between text and marker(list-image). You can't set the vertical alignment of the marker, but line-height property available in IE.

.large-bul{	
list-style-image: url('../images/bullet-blue-large.png');
	list-style-position:inside;
	margin: 0;
        padding: 0;
	height:242px;
	font:1.4em/1.5 "Trajan Pro","Times New Roman", Times, serif;
	text-transform:capitalize;	
}
.large-bul li{
	background:url('../images/list-bg-other.png') -11px 0px no-repeat;/*leave spaces between each of value in short hand declaration*/	
	padding:5px 10px 10px 10px;
	height:47px;
        line-height: 38px; /*Work with IE*/
	vertical-align:middle;/*Ignore*/
}

And never forget the DOC type. Good luck..