CODEWITHSUNDEEP
htmlcss
soft genic
soft genic

Reputation: 2056

Top aligning of text of unordered list

Following is my code in which i am using inline styling for aliging the text to top with the corresponding image but the inline css not working kindly let me know how can i modify the following code , so the text will be aligned to top with the corresponding image.

<ul style="font-size:17px;vertical-align:top; margin-top:0;">
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li>
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li>

</ul>

Upvotes: 1

Views: 582

Answers (3)

Malkus
Malkus

Reputation: 3726

The problem is not your code.

You can even remove some of the unnecessary markup.

Your image that is causing the headache. It needs adjusted in order for your bullets to line up with the text.

I did some more tinkering, it is the images size. The image height is taller than the row you need to scale it down

Also you have to be careful with verticle-align it doesn't always work the way you expect. Reference

Upvotes: 0

allpnay
allpnay

Reputation: 539

set position for your background img as left center

Upvotes: 1

Nate
Nate

Reputation: 4948

You're trying to create media blocks, one of the most common components of the web. Nicole Sullivan, one of the most famous names in CSS, has a great post talking about the nature of media blocks and giving an excellent standard implementation.

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

I highly recommend either using her implementation or reading hers to learn how it's done.

Upvotes: 1

Related Questions