Template Upgrade

Since Google announced the Blogger Template Designer I've been meaning to rework my site. There was a fair amount of hackish stuff in my template HTML, including a bunch of monkeying around to make my main post column wider yet still use the rounded corners on the old table based layout.

The new template I picked out is much simpler and cleaner looking. Amazingly, pretty much everything came over with no effort on my part. I did end up spending some time reworking the color schemes of my Tumblr and Flickr widgets. And I cleaned up some minor CSS and Icon annoyances.

I also took a look out at Flickr to see if they've upgraded their Badge Widget generator anytime recently. They have not, so my Flickr badge generator is still valuable. Looking at it again after all these years, it basically just hides the default Flickr table, draws my 2x5 table, then uses some script to pull the InnerHTML of the the Flickr cells containing 10 random images, and poke them into my cells. Like so:


<td class="robCell"><div id="rob1"></div></td>

. . .

document.getElementById("rob1").innerHTML
= document.getElementById("flickr_badge_image1").innerHTML;


I'm sure there are much more elegant ways to do this (one of these days I'll get off my ass and finish learning JQuery and/or Prototype), but for now, this is still working. No need to fiddle with it now that I've updated the colors and fixed the margin/padding/border issues that were bugging me.

The Tumblr Badge was even easier, that was just a few color tweaks, though again I messed with the margin/padding/border settings to bring things in a bit tighter.


/* Rob Styles*/
.tumblr_photo
{
width: 125px;
height: auto;
float: right;
margin: 3px;
padding: 0px;
border: 3px #444444 solid;
}

.tumblr_posts
{
float: left;
margin: 0px;
padding: 0px;
margin-left: -10px;
}

.tumblr_post
{
font-size: x-small;
list-style-type: none;
width: 215px;
margin: 0px;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
max-height:210px;
overflow: hidden;
border: thin black outset;
background-color: #222222;
old-background-color:#78a;
}
.tumblr_caption
{
padding: 2px;
margin: 2px;
}


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;
  }