0

hai
i attached one thumbanail...first see that one....
in this how to align bullet symbols at the same time background pic is also vth it......
i tried bt no result!!!!
one time align bullet symbols at that time cann't see the back ground pic
plz tell me the css code for that one is CSS CODE

.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:2px;
	background: url('../images/list-bg-large.png') repeat-x;
vertical-align: middle;

}

HTML CODE

<div class="middle" style="">
<ul class="nrml-bul">
								<li>BI Solution That Works For Your Business</li>
								<li>Data Driven Actionable Insights</li>
								<li>Reliability Trust Support</li>
							</ul>
							
							<ul class="nrml-bul">
								<li>Deep insights into customer acquisition and retention campaigns</li>
								<li>Critical reports / dashboards generated in self-serve mode without having to wait for days</li>
								<li>Identification of cross-sell/up-sell opportunities for new lines of business</li>
								<li>Predictive model to model churn indicators and drive retention campaigns</li>
								<li>Robust and highly scalable BI technology</li>
								<li>Single version of the truth &ndash; no more islands of data and sql queries</li>								
							</ul>
							</div>
Attachments 12.JPG 75.48 KB
3
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by ko ko
0

Use the backgroud image in UL tag insteed of li and assing the bullet-blue-normal image as backgroud image of LI tag.

Use the CSS code like that

.nrml-bul {
	background:red url('../images/list-bg-large.png') repeat-x;
	margin:5px 40px 10px 0px;
	border:1px solid #ccc;
	padding:2px;
	}

.nrml-bul {
	background: url('../images/bullet-blue-normal.png') no-repeat 0 0;
}

Its a reliable and simple process.

Happy coding!

0

This is a real headache to set the marker position when we use the 'list-style-image'. The position is depends on the browser type. Use as 'background-image' is better than 'list-style-image'. The vertical-alignment is apply to the 'inline' element, it can't apply to block-level element. Use 'line-height' property instead of 'vertical-align' for vertical alignment of elements. Here is example:

ul.nrml-bul {
     list-style: none;
     margin: 0;
     padding: 0;
     width: auto
    }
ul.nrml-bul li {
     list-style: none;
     background: url('../images/bullet-blue-normal.png') no-repeat 0 50%;
     /* Need space to show background */
     padding-left: 1.4em;
     line-height: 1.3em
     }

And don't forget to validate your HTML.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.