CSS margins displaying differently on Firefox/Ie/Chrome

Your problem was that you set #rakebox to 25px high and added the round background on it (which was 25px high) and then you nested an h2 that was only about 20px high and then you nested rackebackbox which is 275px high.

To move rakebackbox down you would therefore need a margin of six pixels.

There are two errors here. First #rakeback cannot only be 25px high because it holds an h2 and a box that is 275px high!!

What you should have done was set a height to the h2 of 25px and removed the height from rakeback and then a margin-top would only needed to be 1px and would be consistent between browsers.


#rakeback{height:auto}
#rakeback h2{height:25px}

A better solution as mention above would be to avoid heights altogether and then just use an oversize image on the h2 so that text can scale as required.

Your content boxes with fixed heights are going to be very fragile and you would be better off with faux background images and no height (or a min-height) or display:table for ie8+ to keep columns equal.

Any time you cram text into a box of fixed height it will set up an escape committee and find ways of breaking out at the earliest opportunity :slight_smile: