I have a CSS rule:
.cell_r0_c1{position:absolute;left:4px;top:0px;width:924px;height:88px;z-index:1001;}

QUESTION #1 . . . In IE6 . . .
When the class is applied to a div tag surrounding an image, the element following this div runs up against the top of the view-port, even though it has a margin-top=228px applied to it.

When the same class is applied directly to the image, the element following, with the margin-top applied, sits 228px (as far as I can tell) from the top of the view-port, where it's supposed to sit

Why does one situation behave differently than the other?

QUESTION #2 . . . In FF2 . . .
Whether the class is applied to the first div tag or to the image directly doesn't matter, the image sits 228px below the top of the view-port when I think it should be right up against the top.

BUT, if I change the margin-top="228px" rule in the second element to just top="228px", then the image resides at the top and the following element 228px below the top.

Why does the IMAGE, which is outside the element with the margin-top/top rule applied to it, move around in this way?

I wouldn't really care, except that the behavior is reversed in IE6 - "margin-top" works but "top" doesn't - and that would be question 3, wouldn't it?

See these interesting behaviors at:
www.cofcteencamp.com/test1-style-in-img.html
www.cofcteencamp.com/test1-style-in-div.html

MAS

Of all head-scratchers . . .

I read somewhere, make it work in FF first, then IE. Yes, I KNOW this is good advice.

I added the other graphics that I needed above the div with the margin-top=228px. FF Problem remains, no surprise.
I removed all of the extra div tags (one was around each graphic) so that one div tag goes around all of the graphics. No change (FF still pushed the graphics down to meet the next element's margin rule).

I added margin=0 and padding=0 to the div surrounding the images. (The div containing this one and the div following it both have margins and padding set.) No change.
I added a border to the div surrounding the images. Huzzah! The div full of images popped up to the top of the view port. The div with the big top margin stayed down where it belonged. The page looks the same in IE6.

See these modifications here:
www.cofcteencamp.com/test1-style-in-div-2.html

Now, why does that work?

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>

See these interesting behaviors at:
www.cofcteencamp.com/test1-style-in-img.html
www.cofcteencamp.com/test1-style-in-div.html

<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>