|
P: n/a
|
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? | |
Share this Question
|
P: n/a
|
wrote on 21 dec 2003 in comp.infosystems. www.authoring.stylesheets: 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.
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:3px;" 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) | |
|
P: n/a
|
Evertjan. wrote: 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.
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.
+++ You cannot padd(?) something around itself,
padding is an inside job. +++
That is incorrect. Especially for images the W3C box model makes sense.
If you want padding AROUND an image, that is called a margin.
Again, incorrect.
so never use the same class for img and containers, if you want to use
things ike padding in it.
:?
--
Anne van Kesteren
<http://www.annevankesteren.nl/> | |
|
P: n/a
|
<de*******@no.spam.com> wrote in message
news:3f**************@news.md.comcast.giganews.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?
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... | |
|
P: n/a
|
On Sun, 21 Dec 2003 13:39:25 GMT, "SwissCheese" <Sw*********@cfl.rr.com>
wrote: 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...
Thanks for the replies, SwissCheese. | |
|
P: n/a
|
Anne van Kesteren wrote on 21 dec 2003 in
comp.infosystems. www.authoring.stylesheets: Evertjan. wrote:
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.
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.
+++ You cannot padd(?) something around itself,
padding is an inside job. +++
That is incorrect. Especially for images the W3C box model makes
sense.
If you want padding AROUND an image, that is called a margin.
Again, incorrect.
so never use the same class for img and containers, if you want to
use things ike padding in it.
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) | |
|
P: n/a
|
Evertjan. wrote:
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.
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.
IE acts on that notion.
I didn't know that. But MSIE fails to implement the specs, is that
evidence of anything other than the failures of MS?
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.
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?
btw: If the IMG is inline [default] or box [is that possible?]
Do you mean block? display: block can be applied to an img element.
--
Brian
follow the directions in my address to email me | |
|
P: n/a
|
Evertjan. wrote: 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.
It does make sense -- you just have to image that the picture itself is an
anonymous child element of <img>.
IE acts on that notion.
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 | |
|
P: n/a
|
Toby A Inkster wrote: IE acts wrong then.
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.annevankesteren.nl/> | |
|
P: n/a
|
Anne van Kesteren wrote on 22 dec 2003 in
comp.infosystems. www.authoring.stylesheets: Toby A Inkster wrote: IE acts wrong then.
AFAIK, it works in IE6. Standard compliant mode on.
Point for you, Anne.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) | |
|
P: n/a
|
On 21 Dec 2003 09:11:01 GMT, "Evertjan." <ex**************@interxnl.net>
wrote: <span style="padding:3px;"><img src=".."></span>
This solution works in IE 5.5 and 6, but not IE 5.0. | |
|
P: n/a
|
On Tue, 23 Dec 2003 07:44:09 GMT, de*******@no.spam.com wrote: On 21 Dec 2003 09:11:01 GMT, "Evertjan." <ex**************@interxnl.net>
wrote:<span style="padding:3px;"><img src=".."></span>
This solution works in IE 5.5 and 6, but not IE 5.0.
Looks like I am going to have to use the really ugly solution of:
<a href="..."><img src="..."><span> </span>link</a>
and in the css:
span {
font-size: 0.7
} | |
|
P: n/a
| de*******@no.spam.com wrote: On Tue, 23 Dec 2003 07:44:09 GMT, de*******@no.spam.com wrote:
On 21 Dec 2003 09:11:01 GMT, "Evertjan." <ex**************@interxnl.net>
wrote:<span style="padding:3px;"><img src=".."></span>
This solution works in IE 5.5 and 6, but not IE 5.0.
Looks like I am going to have to use the really ugly solution of:
<a href="..."><img src="..."><span> </span>link</a>
and in the css:
span {
font-size: 0.7
}
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 <st***@pugh.net> <http://steve.pugh.net/> | |
|
P: n/a
|
On Tue, 23 Dec 2003 10:21:21 +0000, Steve Pugh <st***@pugh.net> wrote: Looks like I am going to have to use the really ugly solution of:
<a href="..."><img src="..."><span> </span>link</a>
and in the css:
span {
font-size: 0.7
}
0.7 what?
Oh, I forgot to put in the "em" :)
And is it not possible to edit the image to inclue the extra space you
want? Sometimes the simplest option is the best.
I guess I could add in some transparent space... but then that extra space
wouldn't scale if the text size changed. | |
|
P: n/a
| de*******@no.spam.com wrote: On Tue, 23 Dec 2003 10:21:21 +0000, Steve Pugh <st***@pugh.net> wrote:
And is it not possible to edit the image to inclue the extra space you
want? Sometimes the simplest option is the best.
I guess I could add in some transparent space... but then that extra space
wouldn't scale if the text size changed.
That is true. I was going by the example you posted in the first
message, <URL: http://home.comcast.net/~delerious1/index12.html> which
used padding-right: 10px;
And, of course, the images themselves won't resize if the text size
changes unless you specify their sizes in ems which is not a good idea
unless the images are very simple.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net> <http://steve.pugh.net/> | |
|
P: n/a
|
On Tue, 23 Dec 2003 09:57:33 GMT, de*******@no.spam.com wrote: On Tue, 23 Dec 2003 07:44:09 GMT, de*******@no.spam.com wrote:
On 21 Dec 2003 09:11:01 GMT, "Evertjan." <ex**************@interxnl.net>
wrote:<span style="padding:3px;"><img src=".."></span>
This solution works in IE 5.5 and 6, but not IE 5.0.
Looks like I am going to have to use the really ugly solution of:
<a href="..."><img src="..."><span> </span>link</a>
and in the css:
span {
font-size: 0.7
}
I have a better solution now involving conditional comments in IE:
<a href="..."><span style="padding-right: 0.3em"><img src="..."></span>
<!--[if IE 5.0]><span> </span><![endif]-->link</a>
Of course I can't verify that this works right now as I'm encountering that
multiple IE installation version number problem, but I'm pretty sure it will
work. (famous last words, I know!) | |
|
P: n/a
|
<de*******@no.spam.com> wrote in message
news:3f***************@news.md.comcast.giganews.co m... On Sun, 21 Dec 2003 13:39:25 GMT, "SwissCheese" <Sw*********@cfl.rr.com>
wrote: 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
yourother questions. There are better answers i'm sure but I get identicle
output in both IE6 and Mozilla, Opera is another story...
Thanks for the replies, SwissCheese.
Maybe you could wrap the IMG in a <p> element? | | This discussion thread is closed Replies have been disabled for this discussion. | |  Question stats - viewed: 28662
- replies: 17
- date asked: Jul 20 '05
|
