CODEWITHSUNDEEP
cssfirefoxgoogle-chrome
ripper234
ripper234

Reputation: 229988

Why does this render differently between Chrome & Firefox 3.6?

http://jsbin.com/ohuwu4/5

(The example is taken from Google's CSS walkthrough)

BTW, I tried to make this pass validation, but I couldn't get jsbin to put a type attribute on the <script> tag.

Upvotes: 1

Views: 654

Answers (1)

andyb
andyb

Reputation: 43823

I think it's this collapsing margin bug.

Changing the CSS to:

#wd-c div { margin: 0 1em 1em; }

seems to fix it (and for me confirms it's the margin-top CSS as mentioned in the bug report). However, you lose the margin on all the <div>s which isn't desired.

To fix that, I then added:

#wd-1 { margin-top:1em !important; }

to put it back on the first one and it renders the same in both browsers.

Upvotes: 2

Related Questions