Posted by dorayme on 10/31/07 02:10

In article <fg8g1u$1oo$1@lust.ihug.co.nz>,
"KiwiBrian" <briantoz@ihug.co.nz> wrote:

> "dorayme" <doraymeRidThis@optusnet.com.au> wrote in message
> news:doraymeRidThis-897805.08261231102007@news-vip.optusnet.com.au...
> > In article <fg7rei$k8i$1@lust.ihug.co.nz>,
> > "KiwiBrian" <briantoz@ihug.co.nz> wrote:

>
> Thanks D.
> I have just checked my html again and also re-upoaded it to eliminate
> possible confusion.
> My IE7 and IE6 are both displaying only 20 px between the inside of the
> green border at the top and the outside of the top black border of the first
> contained div.
> However FF displays 30 px.
> They all display 30 px at the corresponding bottom location.
> I would love an explanation that makes any sort of sense.
> Brian

OK, I can see the bigger gap (I think I better change the res on
my winbox screen!) now, sorry. New arrangement and the screen is
further (than my Mac screens) away from me...)

In spite of a proper doctype and all. All I can say is that IE
does some strange things with padding and margins that are not as
laid down in the recommended rules at W3C. Someone may have a
more detailed general explanation that shows a consistent rule
for IE? I know this though, it is easy enough to be rid of by
making a rule that IE only can see, to make IE6 and 7 add an
extra 10px at the top where you want by adding 10px top margin
*just* to the first of your three contained divs. You can do this
via a conditional that only IE (6 and 7) can see.

If it was just IE 6, this would do it I think:

* html .firstContainer {margin-top: 30px;} at the end of your css
and in the html for the first conatiner:

<div class="container firstContainer">

--
dorayme

[Back to original message]