Moved to WordPress

Because Blogger is dropping FTP support as of May 1st, I’ve finally been motivated to switch all my blogs to WordPress.  I’m using the great Virtual Multiblog, which seems to work perfectly; I’d be done except that the Blogger2Wordpress converter is having a buffer problem right now, and this is the only blog I’ve managed to send over so far.

Then I get to start messing around with themes!

IE7 recent fixes

Man, do I hate IE! For my own future reference:

Floated images are cut off when next to text with italic tags (related to guillotine bug?): assign hasLayout by adding zoom:1 to a containing element.

Absolutely-postioned elements inside a relatively-postioned div inside a margin:auto layout pops to the left: wrap the problem element with something absolutely positioned.

And thank you, Browsershots.org!

Stubborn craziness: centering an image horizontally and vertically with CSS in IE7

So, I’ve been telling everyone how learning CSS is totally worth it and not as hard as it seems. But today I spent probably 2 hours trying to get one simple image vertically aligned without using a table. I should have just put in a table, but I’m crazy stubborn. I guess it was educational… The breakthrough was finding this site for vertical centering, but then I had a hard time making it center horizontally too. You can see the ultimate solution at Jonathan’s new website (just a forwarder right now, so the code is simple), but here it is for anyone searching. There are a zillion solutions out there, which SEEM to be collected at SuzyUK’s thread, but I couldn’t get any of those to work for me. I fully admit my approach to CSS still has a lot of superstition!

Style sheet:

<!--
body {
    background-color: #000000;
    margin: 0;
    padding: 0;    
    }
#outer {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position: fixed;
     display: table;    
     }
#middle {
    display: table-cell;
    height: 540px;
    vertical-align: middle;
    text-align: center;
    }
img {    
    border: 0;        
    margin: 1em auto;    
    }
-->

<!--[if IE]>
<mce:style type="text/css">
<! 
#middle {
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto
    }
#inner     {
        position: relative;
        top: -50%;
        left: -50%;
    }
-->
<!--[endif]-->

and the code:

<div id="outer">
<div id="middle"> 
<div id="inner">
 <a href="http://home.epix.net/~hce/jhumor.html"> 
<img title="Click to enter" src="JCEcom.jpg" alt="Jonathan Caws-Elwitt, humorist and playwright" width="720" height="540" /> 
</a>
</div>
</div>
</div>