Last few days I devoted to learning the CSS table layout technique and implementing it on my main site. The idea is pretty straight forward, the only “mind-bending” part of it was that browsers don’t accept margin attribute on elements with table related display property and I had to find other ways of arranging white space.
On my site I used the above technique to, among else, nicely line up the Twitter Profile Widget with two other boxes. Now, the tricky part. Firefox, Opera, IE8 and Konqueror showed everything perfectly ok. But Chrome and Safari just didn’t load the widget at all. All I got to see was a green empty box. What does it have to do with CSS table layout?
I had applied
display: table-cell to the twitter container overwriting it’s default display as block. That change made the widget invisible in Chrome and Safari. Removing the display property and letting the widget use the default fixed the problem.
Now, I’m very happy it didn’t take me long hours to fix it, but I must admit, I’m stunned and have no idea why that tiny bit of code makes webkit browsers skip the twitter widget completely. Any ideas why it happens?