Tag Archives: css

Making Mailplane steezy

After about 8 years of using Apple Mail on the Mac (that is if you don’t count NeXTMail on my NeXTstep back in CMU), I finally got fed up with it and had to find a better solution to access my Google Apps gmail accounts. It pretty much came down to Mailplane and Sparrow. I went with Mailplane for reasons I don’t really want to get into here. Very happy with it so far. One thing is that there are a lot of stuff in the gmail web interface that doesn’t make sense to have in Mailplane, most of which actually open up in your default browser when you click on them.

To make Mailplane a little bit more minimalistic, you can include your own stylesheet, and it’s super easy to do coz you can inspect the page right there with the webkit inspector inside Mailplane.

Minimal changes, but makes the experience a lot better. I’ve put up the stylesheet here, mostly for @seoulfully to grab and keep up with my changes easily: https://github.com/ayn/Mailplane-Steez

How to get display:block links working over images in IE

One of my clients at work wanted different parts of the header and footer images to link to different pages, I used a CSS trick to have transparent a links to get and image map type thing to work, it worked great in Firefox, but didn’t work in IE6/7, here’s what I had:

#header a,#footer a {
  display: block;
  text-decoration: none;
  position: absolute;
}
a#header_link{top:17px;left:481px;width:166px;height:69px;}
a#footer_link_1{top:35px;left:0;width:450px;height:51px;}
a#footer_link_2{top:35px;left:453px;width:125px;height:51px;}
a#footer_link_3{top:35px;left:577px;width:63px;height:51px;}

Notice I used position:absolute, it works fine if you wrap them inside a position:relative div. To get it to work in IE6 and IE7, I had to specify a background color and set opacity of that element to 0:

#header a,#footer a {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  background-color: #ffffff;
  display: block;
  text-decoration: none;
  position: absolute;
}

Not a huge fan of IE.

steez changes

If you look at my blog in your browser, you might notice subtle styling changes. I had the default stylesheet since I changed the theme, but some things never looked right, so I messed with it with Firebug and TextMate and now it’s a little bit better. Like now the code blocks get smaller font-size and they won’t overrun the div.