By gonefishing on

Hi, I'm trying to get padding around an image using CSS. The page output code looks like this:

<div class="info">Submitted by <a href="/user/1" title="View user profile.">...</a> on Mon, 2006-11-27 15:56.<span class="terms"></span></div>
  <div class="content">
    <p><img src="

So far I have try the following in the style.css;
.content p img (
padding: 20px 20px 20px 20px;
)

#content p img (
padding: 20px 20px 20px 20px;
)
content p img (
padding: 20px 20px 20px 20px;
)

None of the above adds padding to the img.
Any ideas?

Thanks

⋅ Categories: Drupal 4.7.x

Comments

pbolduc’s picture

pbolduc commented

Try using the margin attribute.

#content img {margin: 20px 20px 20px 20px}

This will place a 20px margin around all the images that come up in #content.

pete

Has it ever occured to you that nothing has ever occured to God!

mariagwyn’s picture

mariagwyn commented

Um...you actually want the following:
'.content img {margin:...}' rather than '#content' since you are dealing with a class (which uses a '.') rather than an id (which uses a '#'). Note that this will put a margin around ALL images which appear in any div class="content".

Maria

gonefishing’s picture

gonefishing commented

I Just tried:
.content img {
margin: 20px 20px 20px 20px;
}

and
.content p img {
margin: 20px 20px 20px 20px;
}

The code doesn't add a margin to the image.

Thanks

gonefishing’s picture

gonefishing commented

I tried it and it doesn't make any difference. I added a semicolon after the last 20px but , no change either.

This is what controls the padding for <p>;
#content p {
padding-left: 10px;
)

So I have also tried:
#content p img {
margin: 20px 20px 20px 20px;
}

Didn't work either.

The img tag is inside the <p> tag:
eg= <p><img src=...................

Thanks

pbolduc’s picture

pbolduc commented

Sorry fishing, I read your post too quickly. Maria was correct.

Try:
<div id="whateveryouchoose" class="content"> on the page.tpl.php and

#whateveryouchoose img {margin: 20px 20px 20px 20px;}

on the css page. The semi-colon is optional if the attribute is the last one in the string.

Sorry about the confusion, I go through it myself
pete

Has it ever occured to you that nothing has ever occured to God!

pjutter’s picture

pjutter commented

Hi, I have this same problem with IE. I'm working on this page:

http://www.vehiclefinanceconference.com/speakers.html

All those speaker images have padding around them that works great in Firefox, not at all in IE. I've tried using a div tag, I've tried placing the elements in a class on a stylesheet, and everything else I can think of. Anybody have any more suggestions? I couldn't get the stuff listed above to work.

Thanks, Phyllis

pjutter’s picture

pjutter commented

Specifically I'd like to know how to write this simple statement:

<img src="photos/haines-john.jpg" width="80" height="115" align="left" style="padding-left: 0pt; padding-top: 1pt; padding-bottom: 1pt; padding-right: 4pt">

That displays padding in Firefox but none in IE. Any suggestions?

Thanks, Phyllis

WilloD’s picture

WilloD commented

Thats exactly what i want to find out.
Now, that code is deprecated according to http://www.w3schools.com

tb123’s picture

tb123 commented

http://www.alistapart.com/stories/doctype/

You are probably operating in quirks mode because you have the wrong doctype (or none).

You probably need a proper doctype on top of your page to make that page conform to the chosen
standard, and IE6 in standard compliant mode will render as you want.

WilloD’s picture

WilloD commented

I have had a tweak with my code that I used before:


<div id="content" class="content" />
<img src="htmlimg/trans.png" style= "padding-left: ______px;" />
</div>

This worked for me in Firefox (Version 5.0)

(I know this is an old post, but it is the top google result, and it helped me, so I hope it will help everyone else too)