border around img works in mozilla not in ie

[mark x]

hello
why
img.funny{
float: right;
margin-left: 12px;
margin-bottom: 6px;
margin-top: .5em;
border-color: #ccc;
border-width: 1px;
border-style: solid;
padding: 5px;
}

gives a funny border around images in mozilla and not in IE? how can I get
the same effect on IE? thanks

 

[Barry Pearson]

hello
why
img.funny{
float: right;
margin-left: 12px;
margin-bottom: 6px;
margin-top: .5em;
border-color: #ccc;
border-width: 1px;
border-style: solid;
padding: 5px;
}

gives a funny border around images in mozilla and not in IE? how can
I get the same effect on IE? thanks

I'm not sure how to do this without any special preparation in the HTML. I
just tested this locally, and IE 5 always shows no padding, while IE 6 shows
no padding exactly as predicted by use of DOCTYPEs to force "quirks mode". So
it looks like an aspect of the IE 5 box-model problem.

In order to get a border round an image with padding round the image, I wrap
the image in a <div> then apply the styles to the <div>, including padding.
The only style I apply to the image is then { border: 0}.

 

[Mitja]

hello
why
img.funny{
float: right;
margin-left: 12px;
margin-bottom: 6px;
margin-top: .5em;
border-color: #ccc;
border-width: 1px;
border-style: solid;
padding: 5px;
}

gives a funny border around images in mozilla and not in IE? how can I get
the same effect on IE? thanks

I don't know how Mozilla renders it, but the way it SHOULD look doesn't seem
funny to me... a simple, grey, 1 pixel wide border, with 5px space between
it and the image. IE, by the way, does not honor the padding, so the border
is shown right next to the image itself.

Mitja