I can't seem to affect my image?

Padding not working

[Cienwen]

Hello All,

I have a little squiggle image that flanks the right and left of my h1 title. I need to add some padding but nothing I do seems to affect it. This what I have, (the CSS is linked to in a separate file)

<div id="textBody">
<h1><img src="/images/squid.gif" width="40" height="17"/>location<img src="/images/squid.gif" width="40" height="17"/></h1>
</div>

#textBody img {
padding: 5px;
}

I even tried applying a class to the image itself like this:

<div id="textBody">
<h1><img src="/images/squid.gif" width="40" height="17" class=”squid”/>location<img src="/images/squid.gif" width="40" height="17" class=”squid”/></h1>
</div>

img.squid {
padding: 5px;
}

This too is on a linked to style sheet.

Alas, nothing affects the image. Note, I have no other styles relating to img tags anywhere in my css.

Does anyone know what is happening?

Thanks,

Cienwen

[Dabrowski]

This looks similar to a problem I had which Fotiman fixed for me. Can I see any other CSS relating to #textbody, DIV's, H1's or IMG's.

You may need an extra storm trooper or something.

[SilverLining]

Have you tried using margin instead of padding?

I had a similar problem this morning and moved an inline style (padding-right) out to my stylesheet and used margin-right instead, which fixed my problem, but your issue is very different.

You could try replacing

<img src="/images/squid.gif" width="40" height="17"/>

with a div and then setting it as a background-image in the CSS, where you could also set background-position.

Another suggestion would be to keep your

<h1>location</h1>

tidy and add the surrounding bg image divs around your h1 tag, would be better from an optimization point of view. Could be that the margin and padding of the h1 tag is interfering with the images.

[Fotiman]

I would suspect that either your external style sheet is not getting included (perhaps a typo), or that some other style is overriding your style. Also, you're viewing this through a webserver and not directly in the filesystem, correct? That is, you're not just opening some folder and double clicking on the page (because your styles might not be included if you try accessing it that way).

If that's not the case, then it could be a problem with some other style overwriting it. Here's how I would suggest you debug it.

1. Install Firefox (if you don't already have it).
2. Get the Firebug extension for Firefox.
3. Open the page with Firefox and use Firebox to see exactly what style rules are being applied to your image and where they're coming from.

[penders]

Are you testing on IE? Do you have a valid DOCTYPE?

After a bit of testing... IE6 does not seem to apply the padding on IMG elements in quirksmode (ie. without a DOCTYPE), but does in standards mode. Not sure why (other than it being an "IE quirk"), anyone?

[Xapti]

I don't like using padding for the very reason that it's buggy on IE (or other browsers). Just use margins instead, it's pretty rare you actually would need padding instead of just changing the margin of the containing objects (granted, if ever it's the case, you can then use padding, just best to be careful).

Oh and one more thing you'll hopefully love:
You can use the before and after pseudo-elements on your H1 tag to save you time. I know what you're thinking though, what about IE support?
for IE, you can use a JS fix, such as this: [dean.edwards.name...]

[edited by: Xapti at 5:55 am (utc) on April 14, 2007]

[Cienwen]

Thank you all for your suggestions. After reading them thoroughly and trying a few things I came to the conclusion that I need to change the image. I have 12 of these things on this page so I want to avoid that many div tags but by putting the image in the <h1> tag I can’t effect the <img> and <h1> padding separately. Dang it!

So the easiest thing was to just change the image.

Thank you all for your help.

Cienwen

[Xapti]

Explain to me why it can't be done, and what your problem is.
I still don't fully understand what your goal is, but whatever it is it certainly seems doable.

[edited by: Xapti at 3:41 am (utc) on April 19, 2007]

[penders]

...but by putting the image in the <h1> tag I can’t effect the <img> and <h1> padding separately.

Hhhmmm, it shouldn't matter whether it's in an <h1> element or not. Just to reiterate my post above... IE will only apply padding to the <img> element if you have a valid DOCTYPE, whether the <img> is in an <h1> (or <div>) or not.