Sorry another newbie question how to access this id <img>

HTML & CSS
1

Hi and thanks for any assistance anyone can offer it is much appreciated.

I am trying to pad an image in a block of text. the images has an id of “art_image”

a few lines above i style the <P> tag with this CSS

#main-content span.bran4 p {
font-size: 12px;}

so i have tried a multitude of things as below with <span> and <div> tags

#main-content span .art_image  img  {
 padding-left:10px;}

and

#main-content span p .art_image  img  {
 padding-left:10px;}

#main-content span p img .art_image img {
padding-left:10px;}

None of them work !!! The XHTML is below

<!-- START ‘Display News by BK 1.6.7’ –>

<span class=’ bran4 '>
</span><div class='contentpaneopen bran4 ’ ><h2 class='contentheading bran4 '>Article 1 Dispelling the Myths</h2><span class='small bran4 ‘>Dr Katherine Davis</span><br/><span class=’ bran4 '><p><img src=“/selplus3/images/stories/articles/feeding.jpg” width=“118” height=“150” border=“0” style=" " align=“right” / class=“art_image” ></p>
<p>Do you buy rolled oats and feed them with chaff? Give your lazy horse oats to get him excited? Feed a bran mash once a week to help clean out his insides? Store your hay for six months before feeding it out? If so, read on - you might be surprised to learn that some of the feeding guidelines you’ve been following may contain more fiction than fact.</p>

2

You should be able to target the img tags class directly

.art_image{
  padding-left:10px;
}
3

thanks…so simple that works great, will remember that.

Thanks again

4

Just to explain why what BPartch said works:

<img class=“art_image” />

equals

img.art_image

You were calling

.art_image img

For that to work, .art_image would have to go on it’s PARENT - probably the paragraph tag you are wrapping around the image for no good reason.

<p class=“art_image”><img /></p>

To that end though - christ that code is span-happy. Don’t know what that bran4 class is, but fairly certain it’s unneccessary since you are slapping it at EVERYTHING… The empty span preceeding it can probably be axed - you’ve got a class on the wrapping div so what do you even need a class on the h2 for, “small” is a presentational class and therin bad coding practice, you should have a class saying WHY it’s small, not just that it’s small (at that point you might as well be using a small tag), you’ve got a class for the images so why are you declaring align, border, etc… If that’s going to be the only image inside the div you might not need a class on that (though I’d probably use a class called “trailingPlate”)

I really doubt you need that section to be much more than:


<div class="contentPaneOpen">
	<h2>
		Article 1 Dispelling the Myths<br />
		<small>Dr Katherine Davis</small>
	</h2>
	<img
		src="/selplus3/images/stories/articles/feeding.jpg"
		alt="Feeding a horse oats"
		class="trailingPlate"
	/>
	<p>
		Do you buy rolled oats and feed them with chaff? Give your lazy horse oats to get him excited? Feed a bran mash once a week to help clean out his insides? Store your hay for six months before feeding it out? If so, read on - you might be surprised to learn that some of the feeding guidelines you've been following may contain more fiction than fact.
	</p>
<!-- .contentPaneOpen --></div>

In terms of markup. Provides MORE than enough hooks for styling it.