Image inside <p>

HTML & CSS
1

For some reason, I had to add display: inline-block; to the class for the image in order to get it to show up on the same line as the rest of the text:

<p><span class=“BulletSelectedItem”><img src=“/Content/Images/Site/redarrow_left_sm.jpg” /></span>Aarel</p>

.BulletSelectedItem
{
padding: 0px 0px 0px 0px;
display: inline-block;
}

2

http://www.ryanreese.net/articles/mysterious-gap.php
It’s extra space left for text.

3

You should set the image’s position with relation to text with the vertical-align property
http://www.w3schools.com/Css/pr_pos_vertical-align.asp
And you should set the class on the IMG, not use a span.

4

Ryan, I don’t get why you’d set block to the image. Doesn’t block put it on a next line? I already have display: block on all my img elements defined at the top of my CSS anyway.

Vanish, this does not work:

<p><img src=“/Content/Images/Site/redarrow_left_sm.jpg” class=“BulletSelectedItem” />Custom Kidz Apparel</p>

.BulletSelectedItem
{
padding: 0px 0px 0px 0px;
vertical-align: bottom;
}

and what’s wrong with wrapping it with a span? sure, adding the class to the image is less code, if that works.

5

Take a look at the linked spec and experiment with the different values until you find something that works. Text-bottom should be optimal, but you can also set a % value to set it precisely, though I dont know how compatible that would be across browsers.

6

thanks. Will check that out. I did experiment but I don’t think my way is optimal. I’m always trying to figure out the shortest path and best standard but obviously that doesn’t come quick always as there are diff school of thoughts out there. I tend to take more time to question code, to ensure things are done right the first time for extensibility later. I’m not a guru at advanced CSS in regards to tableless but trying to become one with your help and of course coding and looking **** up. As a C# developer who cares about design patterns, etc. getting rid of tabled design is just natural to me because it makes sense from many perspectives (page weight, ability to accommodate flexible design for my collegue who is a grahic designer, etc.). Lots of developers like me though pansy out and stick to inflexible tabled layouts which I think is pathetic…when we’re in 2009! Time to embrace! I don’t see why developers view mark-up as a substandard to their actual OOP code. It all affects usability, extensibility, and efficiency. In face EVERYTHING you code does in every layer of an application. Sometimes mark-up 90% of the time actually gets tossed in the burner by good developers.

7

still not getting this to work:

.BulletSelectedItem
{
padding: 0px 0px 0px 0px;
width: 5px;
height: 7px;
vertical-align:bottom;
}

<p><img src=“/Content/Images/Site/redarrow_left_sm.jpg” class=“BulletSelectedItem” />Custom Kidz Apparel</p>

here’s what it looks like: http://www.codezest.com/post/imageontop.png

the red arrow should show next to apparel

8

Looks like more of a width issue than anything. I think it might be better served by the background-image property and a little padding on the left.

9

display: inline-block; worked, thanks a lot!

10

No problem :).