Apparant discrepancy between IE and FF browsers

[KiwiBrian]

I welcome confirmation and elucidation on the following experience of CSS
behaviour.
In IE6 and 7 if an image is within a div, and the div has padding, and the
image has margins, the margins on the image are ignored where they butt up
against (are adjacent to) the div's padding.
In FF the image margin is obeyed.
If this is correct is it conditional upon other factors?

 

[dorayme]

I welcome confirmation and elucidation on the following experience of CSS
behaviour.
In IE6 and 7 if an image is within a div, and the div has padding, and the
image has margins, the margins on the image are ignored where they butt up
against (are adjacent to) the div's padding.
In FF the image margin is obeyed.
If this is correct is it conditional upon other factors?

Tell me what you observe with this test case in your different
browsers and I will fire up my Winbox if you surprise me:

http://members.optushome.com.au/droovies/test/kiwi.html

 

[rf]

I welcome confirmation and elucidation on the following experience of CSS
behaviour.
In IE6 and 7 if an image is within a div, and the div has padding, and the
image has margins, the margins on the image are ignored where they butt up
against (are adjacent to) the div's padding.
In FF the image margin is obeyed.
URL?

If this is correct is it conditional upon other factors?

Quirks mode?

 

[KiwiBrian]

Tell me what you observe with this test case in your different
browsers and I will fire up my Winbox if you surprise me:

http://members.optushome.com.au/droovies/test/kiwi.html

Thanks for the wonderful test page.
I will use it to research this matter further.
It displays identicaly for me in IE6 and IE7 and FF 2.0.0.8
I should have mentioned that my page where I noticed the behaviour that I
reported and queried was using the same strict doctype as you have used.
The plot thickens.
Brian Tozer

 

[Nik Coughlin]

I should have mentioned that my page where I noticed the behaviour that I
reported and queried was using the same strict doctype as you have used.

You might be doing something else to trigger quirks mode in IE.

Type this into the address bar in IE while viewing your page and it will
tell you:
javascript:alert(document.compatMode)

 

[KiwiBrian]

Quirks mode?

Hi Richard.
Thanks for your reply.
I should have mentioned that my page where I noticed the behaviour that I
reported and queried was using the same strict doctype as dorayme used in
his example page.
As there has not been a flood of replies confirming my results, I suspect
that I may have encountered a red herring.
I spen several hours testing, as I find it so very easy to form the wrong
conclusion, but I will visit the situation anew.
If I seem to have a valid example of the suspect behaviour I will put a page
online for perusal.
Brian Tozer

 

[KiwiBrian]

You might be doing something else to trigger quirks mode in IE.

Type this into the address bar in IE while viewing your page and it will
tell you:
javascript:alert(document.compatMode)

Thanks Nik. Didn't know about this test.
Your idea was a good one, but test confirms standard/strict mode with a
"CSS1" indication.
I will revisit the original scenario.

 

[dorayme]

Thanks for the wonderful test page.
I will use it to research this matter further.
It displays identicaly for me in IE6 and IE7 and FF 2.0.0.8
I should have mentioned that my page where I noticed the behaviour that I
reported and queried was using the same strict doctype as you have used.
The plot thickens.

Just one thing perhaps I should draw your attention to Brian, I
do not know if you noticed that at the test page I gave, there is
a "zeroing" of all margins and paddings in the styles in the head
of the document. I assume you know that this means every margin
and padding is set to zero and the author is then obliged to
supply all of them for all his elements, he is unable to rely on
the default stylesheets that browsers use (different ones in
different browsers).

I am not recommending to zero all in practice, some do this and
some do not, it has its pros and cons which we can leave for now.
But it is sometimes a great diagnostic weapon. Put it in and
start setting a few margins and paddings of your own on your
elements and see if your problem comes up, along the way, you
might twig to what is being inherited by what in your original
page...

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Tue, 30 Oct 2007 00:44:59
GMT KiwiBrian scribed:

Hi Richard.
Thanks for your reply.
I should have mentioned that my page where I noticed the behaviour
that I reported and queried was using the same strict doctype as
dorayme used in his example page.
As there has not been a flood of replies confirming my results, I
suspect that I may have encountered a red herring.
I spen several hours testing, as I find it so very easy to form the
wrong conclusion, but I will visit the situation anew.
If I seem to have a valid example of the suspect behaviour I will put
a page online for perusal.
Brian Tozer

I do _a lot_ of image work and have not experienced that problem myself (-
not saying it couldn't be under some circumstances, though.) Floats, of
course, _will_ make a difference.