473,322 Members | 1,473 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

IE cannot put padding on IMGs?

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?

Jul 20 '05 #1
17 29202
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)
Jul 20 '05 #2
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/>
Jul 20 '05 #3
<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...


Jul 20 '05 #4
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.

Jul 20 '05 #5
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)
Jul 20 '05 #6
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

Jul 20 '05 #7
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

Jul 20 '05 #8
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/>
Jul 20 '05 #9
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)
Jul 20 '05 #10
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.

Jul 20 '05 #11
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>&nbsp;</span>link</a>

and in the css:

span {
font-size: 0.7
}

Jul 20 '05 #12
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>&nbsp;</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/>
Jul 20 '05 #13
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>&nbsp;</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.

Jul 20 '05 #14
delerious wrote:
span {
font-size: 0.7
}


0.7hobnobs or 0.7jaffacakes?

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

Jul 20 '05 #15
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/>
Jul 20 '05 #16
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>&nbsp;</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>&nbsp;</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!)

Jul 20 '05 #17
<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?

Jul 20 '05 #18

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: geniolatenio | last post by:
Hello guys, I have a rather strange problem with IE (googled for it to no avail) I have these two styles in the css file, right? #menu { left:13px; padding:13px 0 14px 247px;...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
1
by: rdlauer | last post by:
For some time now we've been seeing seemingly random errors thrown by an application "Padding is invalid and cannot be removed". Everything I've read about this online suggests that the machine key...
3
by: floppyzedolfin | last post by:
Hi there. I'm coding an encryption / decryption program. At this very moment, I think I should be pretty close from the end, but there's something blocking me on my way. There's a "Padding is...
1
by: lilOlMe | last post by:
I'm really starting to lose it on this problem. I have created 2 <div> tags that will server as boxes. While explaining my problem I will refer to these <div> tags as Boxes...to keep things...
0
Screaming Eagle
by: Screaming Eagle | last post by:
I haven't recieved any information that I could use, and researching this issue hasn't turned up any worthy results. Hence my reposting. Since I have had no reply, and my associates wish to move...
13
by: aarklon | last post by:
Hi all, arrays are guaranteed to be contiguous with no padding before or after any array member , but what about enums ..???
3
by: vippstar | last post by:
Hey comp.lang.c I'm somewhat confused with bit padding. I tried searching the FAQ, but there isn't a search feature, so I used google and the search query: site:c-faq.com padding. I did not...
1
by: dkoro | last post by:
I have a very simple page with a left menu column, and for some reason I just cannot tighten up the spacing between the <p>'s in the left column (the "Item #1" etc)...setting both margins and padding...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.