<style>
a {
  background:url('16x16icon.png') no-repeat left center;
  display:block;
  height:16px;
  line-height:16px;
  padding-left:20px;
}
</style>
<a href="#">Link Text</a>

But what if the link text needs to span more than one line for the given width? What if the icon is taller than the text height?

This is where display:inline-block comes in.

<style>
.container {
  width:192px;
}

.container img {
  border:0;
  vertical-align:middle
}

.container span {
  display:inline-block;
  width:128px;
  vertical-align:middle;
}
</style>

<div class="container">
  <a href="#"><img src="64x64icon.png" alt="an icon" /><span>Link text that is really, really long that it takes up more than one line.</span></a>
</div>

Because the span is a block, text will wrap if longer than the width, but since the span is also inline, vertical-align:middle will align the img and the span. The only bug I’ve noticed so far is that text-decoration:underline doesn’t render properly during the hover state.

Initially, the problem was the autodiscover URL was not accessible. That was an easy fix by adding a DNS entry. The tough nut to crack, however, was a 401 error. I went through the usual suspects of disabling the loopback check, setting back-connection host names, etc. None of which had an effect. It wasn’t until I tried logging into Remote Web Workplace directly did I get a huge clue:

This user account does not have permissions to access your network remotely. Contact your network administrator to enable remote access for this user account.

That was a very strange error indeed since users could access all other resources including Outlook Web Access. I finally decided to look through Active Directory, specifically the Windows SBS Remote Web Workplace Users security group. As soon as I added the main user group that contained all users, everything started to work.

CS5 is thisclose to release and the iPhone compiler is the flagship feature in this version of Flash. They’re pretty much royally fucked.

Plus Apple has already made its position clear on Flash. Personally, since I’ve never been a slave to brands, I don’t have much of a stake in either company unless one of my mutual funds happens to invest in one. Yet, the way I see it, Adobe can really give Apple the big “Fuck You” if it wanted to, simply by no longer producing any of its Adobe software for OS X. Now seeing how designers and design houses invest heavily in Macs simply to run Adobe software, should that platform no longer become available, what do you think is going to happen? Is the entire graphic design, web, print, and publishing industries going to abandon all its invested know-how and simply pick a new defacto industry standard, or are they going to switch to Windows?

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

I tried Firefox and Chrome using their respective user-agent switcher plugins, but didn’t get very far. So go into Safari and select Develop->User Agent->Other… Paste in the above string, click OK, and make sure it’s active. Next navigate to iPad User Guide and check it out. Here’s hoping Apple will be releasing it independently or as a part of the SDK. Here’s also hoping it’s iPhone-compatible.

<div id="gallery1" class="gallery">
    <a rel="gallery1" href="/path/to/fullsize1.jpg"><img src="/path/to/thumbnail1.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize2.jpg"><img src="/path/to/thumbnail2.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize3.jpg"><img src="/path/to/thumbnail3.jpg" width="50" height="50" alt="" /></a>
</div>

The HTML is rather straight forward. You’ve got a <div> as a container for a bunch of thumbnails, each linked to a matching fullsize image. The CSS on the gallery has fixed dimensions matching the dimensions of the thumbnails with overflow set to hidden.

$(".gallery").cycle({ 
    speed:      0,
    timeout:    0
});

$(".gallery").mousemove(function(e){
    var n = $(this).children().length;
    var w = $(this).width();
    var x = e.pageX - this.offsetLeft;
    var i = Math.floor(x/w * n);

    $(this).cycle(i);
}); 

$(".gallery a").fancybox();

As for the JavaScript, it’s refreshingly short, which just goes to show how much heavylifting jQuery and the two plugins do. Let’s start with the Cycle activation. The speed parameter is set to 0. This means that the transition is instantaneous when an image flips. Setting the timeout parameter to 0 prevents the Cycle plugin from auto-advancing. So far nothing new for anyone who’s used the Cycle plugin.

The next part actually sets up the effect. Just like when you mouseover an Event group in iPhoto, whenever the mouse moves within the gallery div, the position of the mouse determines the index of the image to display. First we count the number of images within the gallery. Next, we get the width of the gallery. Then we get the horizontal position of the mouse within the gallery’s coordinate system. Finally, we use those three values to calculate the index. Using this index, we tell the Cycle plugin which image to display.

Now that the iPhoto effect is working, all that’s left is to activate the Fancybox plugin and we’re done.

RewriteRule ^.*/myskin.swf$ /pathto/myskin.swf

Any request ending in myskin.swf will be redirected to /pathto/myskin.swf under the public folder.

1. sudo apt-get install xmonad
2. Create a file /usr/share/xsessions/xsession.desktop with the following

   [Desktop Entry]
   Name=Xsession
   Comment=This runs ~/.xsession
   Exec=/etc/X11/Xsession
   

   The file can also go in /etc/X11/sessions/.

3. Create a file ~/.xsession with the following

   export WINDOW_MANAGER="/usr/bin/xmonad"
   exec gnome-session 
   

4. Using gconf-editor or gconftool, change /desktop/gnome/session/required_components/windowmanager from “metacity” to “gnome-wm”. If you don’t do this, Gnome will ignore the WINDOW_MANAGER variable.