IE cannot put padding on IMGs?

[delerious@no.spam.com]

I'm trying to add some simple padding to an IMG by using a padding-right
style, but it doesn't work in IE. Works fine in Mozilla and Opera, though.

Here's a link to a page which displays this IE problem:

http://home.comcast.net/~delerious1/index12.html

I do know that I can solve the problem in IE by changing padding-right to
margin-right, but then the links cannot be clicked when the mouse is over that
margin area. So I would really like to get the padding working in IE. Any
ideas?

[Evertjan.]

Re: IE cannot put padding on IMGs?

wrote on 21 dec 2003 in comp.infosystem s.www.authoring.stylesheets:[color=blue]
> I'm trying to add some simple padding to an IMG by using a
> padding-right style, but it doesn't work in IE. Works fine in Mozilla
> and Opera, though.[/color]

Padding is IMHO putting a spacing between a container and its contents.
But an img is NOT a container, so IE is right not to construct that.
It is like padding a string of letters instead of its container.

+++ You cannot padd(?) something around itself,
padding is an inside job. +++

If you want padding AROUND an image, that is called a margin.


<span style="padding: 3px;"><img src=".."></span>

is about the same as

<img style="margin:3 px;" src="..">

so never use the same class for img and containers, if you want to use
things ike padding in it.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Anne van Kesteren]

Re: IE cannot put padding on IMGs?

Evertjan. wrote:
[color=blue]
> Padding is IMHO putting a spacing between a container and its contents.
> But an img is NOT a container, so IE is right not to construct that.
> It is like padding a string of letters instead of its container.[/color]

Padding is spacing between the border and the contents. Margin is
spacing between the total width (width+padding+ border) of the element
and the container.
[color=blue]
> +++ You cannot padd(?) something around itself,
> padding is an inside job. +++[/color]

That is incorrect. Especially for images the W3C box model makes sense.
[color=blue]
> If you want padding AROUND an image, that is called a margin.[/color]

Again, incorrect.
[color=blue]
> so never use the same class for img and containers, if you want to use
> things ike padding in it.[/color]

:?


--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[SwissCheese]

Re: IE cannot put padding on IMGs?

<delerious@no.s pam.com> wrote in message
news:3fe56110.3 857923@news.md. comcast.giganew s.com...[color=blue]
> I'm trying to add some simple padding to an IMG by using a padding-right
> style, but it doesn't work in IE. Works fine in Mozilla and Opera,[/color]
though.[color=blue]
>
> Here's a link to a page which displays this IE problem:
>
> http://home.comcast.net/~delerious1/index12.html
>
> I do know that I can solve the problem in IE by changing padding-right to
> margin-right, but then the links cannot be clicked when the mouse is over[/color]
that[color=blue]
> margin area. So I would really like to get the padding working in IE.[/color]
Any[color=blue]
> ideas?
>[/color]

The problem lies in trying to make the A element display as BLOCK while
including an image as part of the link. See my previous examples from your
other questions. There are better answers i'm sure but I get identicle
output in both IE6 and Mozilla, Opera is another story...

[delerious@no.spam.com]

Re: IE cannot put padding on IMGs?

On Sun, 21 Dec 2003 13:39:25 GMT, "SwissChees e" <SwissCheese@cf l.rr.com>
wrote:[color=blue]
> The problem lies in trying to make the A element display as BLOCK while
>including an image as part of the link. See my previous examples from your
>other questions. There are better answers i'm sure but I get identicle
>output in both IE6 and Mozilla, Opera is another story...[/color]

Thanks for the replies, SwissCheese.

[Evertjan.]

Re: IE cannot put padding on IMGs?

Anne van Kesteren wrote on 21 dec 2003 in
comp.infosystem s.www.authoring.stylesheets:[color=blue]
> Evertjan. wrote:
>[color=green]
>> Padding is IMHO putting a spacing between a container and its
>> contents. But an img is NOT a container, so IE is right not to
>> construct that. It is like padding a string of letters instead of its
>> container.[/color]
>
> Padding is spacing between the border and the contents. Margin is
> spacing between the total width (width+padding+ border) of the element
> and the container.
>[color=green]
>> +++ You cannot padd(?) something around itself,
>> padding is an inside job. +++[/color]
>
> That is incorrect. Especially for images the W3C box model makes
> sense.
>[color=green]
>> If you want padding AROUND an image, that is called a margin.[/color]
>
> Again, incorrect.
>[color=green]
>> so never use the same class for img and containers, if you want to
>> use things ike padding in it.[/color][/color]

Beste Anne,

I put to you that saying that something is incorrect or makes sense will
give you a moral obligation to tell us why you think so.

I state that a IMG has no content, because it is the content itself.
IMG is no container, it cannot have a inside child, the displayed image
is just a property [or perhaps value] of the IMG.

That's why the idea of padding makes no sense. IE acts on that notion.

Border is something around the img, that can have a size of zero or
bigger and a color or other graffics, and is inside a possible margin
area. Border does not define a container.

Padding is like putting a margin around the children of an object,
remembering that the childs own margin is inside that again.

btw: If the IMG is inline [default] or box [is that possible?] should
have nothing to do with that.

Als je het er niet mee eens bent, leg dan aljeblieft uit waarom.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Brian]

Re: IE cannot put padding on IMGs?

Evertjan. wrote:[color=blue]
>
> I state that a IMG has no content, because it is the content itself.
> IMG is no container, it cannot have a inside child, the displayed image
> is just a property [or perhaps value] of the IMG.
>
> That's why the idea of padding makes no sense.[/color]

I'm sorry, but padding for an img element does make sense, at least to
me. I fail to see why that element should be accepted from the box model.
[color=blue]
> IE acts on that notion.[/color]

I didn't know that. But MSIE fails to implement the specs, is that
evidence of anything other than the failures of MS?
[color=blue]
> Border is something around the img, that can have a size of zero or
> bigger and a color or other graffics, and is inside a possible margin
> area.[/color]

And if the padding is 0, the border will be snug with the image data;
if the padding is > 0, there will be space between the image and its
border. Is there some reason why you want there to be no option here?
[color=blue]
> btw: If the IMG is inline [default] or box [is that possible?][/color]

Do you mean block? display: block can be applied to an img element.

--
Brian
follow the directions in my address to email me

[Toby A Inkster]

Re: IE cannot put padding on IMGs?

Evertjan. wrote:
[color=blue]
> I state that a IMG has no content, because it is the content itself.
> IMG is no container, it cannot have a inside child, the displayed image
> is just a property [or perhaps value] of the IMG.
>
> That's why the idea of padding makes no sense.[/color]

It does make sense -- you just have to image that the picture itself is an
anonymous child element of <img>.
[color=blue]
> IE acts on that notion.[/color]

IE acts wrong then.

If I write:

<img src="foobar" alt="Foo Bar" style="margin: 1em; padding: 1em; border:
thin solid black;">

the correct rendition is to draw the picture itself (anonymous child of
<img>), surrounded by 1em of blank space, surrounded by a thin solid black
border, surrounded by another 1em of blank space.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Anne van Kesteren]

Re: IE cannot put padding on IMGs?

Toby A Inkster wrote:[color=blue]
> IE acts wrong then.[/color]

AFAIK, it works in IE6. Standard compliant mode on.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
body{
margin:2em;
}
img{
padding:1em;
border:2em solid red;
}
</style>
<img src="" alt="padding + border test image" height="20" width="20">


--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Evertjan.]

Re: IE cannot put padding on IMGs?

Anne van Kesteren wrote on 22 dec 2003 in
comp.infosystem s.www.authoring.stylesheets:[color=blue]
> Toby A Inkster wrote:[color=green]
>> IE acts wrong then.[/color]
>
> AFAIK, it works in IE6. Standard compliant mode on.[/color]

Point for you, Anne.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[delerious@no.spam.com]

Re: IE cannot put padding on IMGs?

On 21 Dec 2003 09:11:01 GMT, "Evertjan." <exjxw.hannivoo rt@interxnl.net >
wrote:[color=blue]
><span style="padding: 3px;"><img src=".."></span>[/color]

This solution works in IE 5.5 and 6, but not IE 5.0.

[delerious@no.spam.com]

Re: IE cannot put padding on IMGs?

On Tue, 23 Dec 2003 07:44:09 GMT, delerious@no.sp am.com wrote:
[color=blue]
>On 21 Dec 2003 09:11:01 GMT, "Evertjan." <exjxw.hannivoo rt@interxnl.net >
>wrote:[color=green]
>><span style="padding: 3px;"><img src=".."></span>[/color]
>
>This solution works in IE 5.5 and 6, but not IE 5.0.[/color]

Looks like I am going to have to use the really ugly solution of:

<a href="..."><img src="..."><span >&nbsp;</span>link</a>

and in the css:

span {
font-size: 0.7
}

[Steve Pugh]

Re: IE cannot put padding on IMGs?

delerious@no.sp am.com wrote:
[color=blue]
>On Tue, 23 Dec 2003 07:44:09 GMT, delerious@no.sp am.com wrote:
>[color=green]
>>On 21 Dec 2003 09:11:01 GMT, "Evertjan." <exjxw.hannivoo rt@interxnl.net >
>>wrote:[color=darkred]
>>><span style="padding: 3px;"><img src=".."></span>[/color]
>>
>>This solution works in IE 5.5 and 6, but not IE 5.0.[/color]
>
>Looks like I am going to have to use the really ugly solution of:
>
><a href="..."><img src="..."><span >&nbsp;</span>link</a>
>
>and in the css:
>
>span {
> font-size: 0.7
>}[/color]

0.7 what?

And is it not possible to edit the image to inclue the extra space you
want? Sometimes the simplest option is the best.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[delerious@no.spam.com]

Re: IE cannot put padding on IMGs?

On Tue, 23 Dec 2003 10:21:21 +0000, Steve Pugh <steve@pugh.net > wrote:[color=blue][color=green]
>>Looks like I am going to have to use the really ugly solution of:
>>
>><a href="..."><img src="..."><span >&nbsp;</span>link</a>
>>
>>and in the css:
>>
>>span {
>> font-size: 0.7
>>}[/color]
>
>0.7 what?[/color]

Oh, I forgot to put in the "em" :)

[color=blue]
>And is it not possible to edit the image to inclue the extra space you
>want? Sometimes the simplest option is the best.[/color]

I guess I could add in some transparent space... but then that extra space
wouldn't scale if the text size changed.

[Toby A Inkster]

Re: IE cannot put padding on IMGs?

delerious wrote:
[color=blue]
> span {
> font-size: 0.7
> }[/color]

0.7hobnobs or 0.7jaffacakes?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132