Tumblr Badge for Blogs and CSS Troubleshooting

My post on how to use CSS to restyle Tumblr's default blog widget has been quite popular. One commenter pointed out that it wasn't displaying properly in IE6 or IE7 (surprise). After a bit of investigation, it turned out to be the Usual Suspect: browser differences in default Box Model behavior.

Specifically, it appears that IE versions lower than 8 use a large amount of default margin to move elements to their default starting position in a container.  Firefox, Chrome, and Safari, on the other hand, seem to use about the same amount of space, but in Padding. You can see the difference in the two screen captures below.   The Red border is the Tumblr_Posts div.

Note that in Firefox above, the whitespace is on the inside of the Div, it's "Padding" of about 50 pixels. In IE below, it's also about 50 pixels, same resulting position, but caused by outside the Div "Margin" space.

My goal with the stylesheet was to keep a minimum of whitespace between the outer container (Green border), and the little photo boxes (inside the red box). I did that with the first CSS property that came to mind: Margin-Left. I raised that number until it looked how I wanted it in Chrome, doublechecked it in IE8, Firefox, and iPhone Safari, then published it. Unfortunately, since IE6 started with Margin-Left at about 50px, the impact of setting Margin-Left to -30px was a 80px move in IE (compared to 35px in most other browsers). The result was the posts were chopped off about halfway across by the border of the sidebar.

The solution, as with most things in computing, is to reboot. ;-) Specifically, set all the box model numbers to the one number that puts all browsers on equal footing: zero.

Zeroing out both margin and padding did exactly what I wanted in the first place: let the Tumblr Post boxes fill the containing div. Any number would work actually, as long as you set them all explicitly, rather then letting the browsers use their assorted defaults.

.tumblr_posts
  {
    margin: 0px;
    padding: 0px; 
  }

Anyway, hope that helps. If you went and read up on the CSS Box Model, or have wrestled with this stuff before, you'll probably find this amusing:

CSS is Awesome! Mug on Zazzle


Here's the current, corrected CSS:

.tumblr_photo
  {
    width: 110px;
    height: auto;
    float: right;
    margin: 7px;
    border: 2px black solid;
  }
  .tumblr_posts
  {
    margin: 0px;
    padding: 0px; 
  }
  .tumblr_post
  {
    font-size: x-small;
    list-style-type: none;
    width: 210px;
    padding: 7px;
    margin: 5px;
    max-height:200px;
    overflow: hidden;
    border: thin black outset;
    background-color:#78a;
  }