padding squishes image in Opera 7

[Erik Sandblom]

Hello all,

I made a nice frame around an image, using padding and border like
this:

<img style="padding: 5px; margin: 5px; border: 1px solid gray"
src="./stuff/gde.gif" alt="Gewerkschaft der Eisenbahner" align="right"
border="0" width="201" height="43">

But Opera 7.2 squishes the image. I think it's because I've sized the
image properly and Opera is trying to squeeze the padding into the
space taken by the image.

Safari, Mozilla/Camino, MacMSIE5 and Opera 6 do not do this and it
comes across as being a bug or at least counterintuitive.

I would love to hear your thoughts on this.

The page is here and it validates:
http://eriksrailnews.com/

Thanks!

Erik Sandblom

[Andrew Thompson]

"Erik Sandblom" <er***@operamail.com> wrote in message
news:5c**************************@posting.google.c om...

Hello all,

I made a nice frame around an image, using padding and border like
this:

<img style="padding: 5px; margin: 5px; border: 1px solid gray"
src="./stuff/gde.gif" alt="Gewerkschaft der Eisenbahner" align="right"
border="0" width="201" height="43">

Are not the 'border: solid 1px gray' and...
'border="0"' contradictory?
(and yes, I am asking, rather than being sarcastic)

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

[Erik Sandblom]

"Andrew Thompson" <an******@bigNOSPAMpond.com> wrote in message news:<LU*******************@news-server.bigpond.net.au>...

"Erik Sandblom" <er***@operamail.com> wrote in message
news:5c**************************@posting.google.c om...

Hello all,

I made a nice frame around an image, using padding and border like
this:

<img style="padding: 5px; margin: 5px; border: 1px solid gray"
src="./stuff/gde.gif" alt="Gewerkschaft der Eisenbahner" align="right"
border="0" width="201" height="43">

Are not the 'border: solid 1px gray' and...
'border="0"' contradictory?
(and yes, I am asking, rather than being sarcastic)

I don't know either, but removing that part doesn't change anything in Opera 7.2.

Erik Sandblom

[Stephen Poley]

On 4 Nov 2003 06:22:37 -0800, er***@operamail.com (Erik Sandblom) wrote:

I made a nice frame around an image, using padding and border like
this:

<img style="padding: 5px; margin: 5px; border: 1px solid gray"
src="./stuff/gde.gif" alt="Gewerkschaft der Eisenbahner" align="right"
border="0" width="201" height="43">

But Opera 7.2 squishes the image. I think it's because I've sized the
image properly and Opera is trying to squeeze the padding into the
space taken by the image.

Safari, Mozilla/Camino, MacMSIE5 and Opera 6 do not do this and it
comes across as being a bug or at least counterintuitive.

I would love to hear your thoughts on this.

Well I *think* you're getting bitten by the problem that it isn't always
very well defined how HTML and CSS cohabit. This use of the width and
height attributes is an exceptional case where you want to use HTML
attributes to define sizes, but I don't think it's clearly defined
whether they should then be used as the CSS width/height properties for
the box in question. Apparently Opera thinks so, and the other browsers
don't. Not actually a bug AFAICT.

Sticking a DIV around your image should get it working in all browsers.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Henri Sivonen]

In article <5c**************************@posting.google.com >,
er***@operamail.com (Erik Sandblom) wrote:

But Opera 7.2 squishes the image. I think it's because I've sized the
image properly and Opera is trying to squeeze the padding into the
space taken by the image.

The problem would make sense in the quirks mode where padding intrudes
width. Your page has a doctype that is supposed to activate the
standards mode, though.

--
Henri Sivonen
hs******@iki.fi
http://iki.fi/hsivonen/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html