You would think that we could simply replace pixels with percentages and call it a day, but things get complicated when you switch your good old static pixels with percentages. I’ve recently run into these problems and though I don’t have a solution yet, I would like to share my experiances with you. I’m doing this for two reason, firstly to make sure you don’t have to waste as much time as I did discovering the same as me and secondly to create a debate that might foster a solution.

The pixel rounding problem

This problem at it’s core is that 10 percent might translate into 96,7729 pixels and your desplay can’t show 96,7729 pixels without blurring the edge. This obviously has to be worked around somehow by your browser, the problem is the way to do this havn’t been difined in any specifiaction so every browser has it’s own approach.

If you would like to read more about the problem heres some links to more knowledgable people.

• “Sub-Pixel Problems in CSS” – John Resig

Example

Here are 4 divs with a width of 25%. If you resize you browser window you will see the yellow container showing through. This “bug” is fixed in Firefox but it should be their in all other browsers.

The floating point rounding problem

The second problem is that browser rounds floating points differently. The reason for this is much the same as for rounding of pixels, the specification simply doesn’t say how this should be implemented. Some browsers might not round at all, others might round up and some might round down it’s all up to them. This means you can’t use floating point widths in you grid if you wan’t your site to be cross-browser compatible.

If you would like to read more about the problem heres some links to more knowledgable people.

• “Why Percentage-Based Designs Don’t Work in Every Browser” – Wired

Example

I have the same four columns from the last example, but this time I’ve added a second row of 12,5% wide columns. Some browsers will first of all round 12,5% to another value creating a gab or rouining the layout and the on top of that handle the pixel rounding creating even larger change for differnces between browsers.

The problems with margin

Okay so exept for Firefox browsers isn’t exactly good at displaying procentage widths, but you can make the problem exponentially complicated by adding margins into the mix.

Example

Here is the same basic structure except I’ve added 1% margin of the left and right side of every div. (And subtracted the marign from the widths so the divs don’t overflow).

The solution

The floating point rounding is easy to circumvent, all you have to do is to only use integers as widths. This 1000px grid is a good example of how this can be done.

Another solution would be to write a js script that would set the get the width of elements and resize and then convert it into pixels and set that to be the width. This however might be slow.

If you know of a solution to this problem please let me know by writing the solution in the comments.

Lion has been released, and I wanted to make a theme that felt native to the new system, So I created Growling Lion based on the Safari 5.1 downloads window.

You can download it here!

A big thanks to the creater of Mono – Christopher Lobay. I used his theme as the foundation for mine, so this is more of a remix than a completely new theme.

There is a little bug in Growl however, so I couldn’t quite get the animation I wanted. You see if I choose to animate stuff, the shadows goes away, and using css shadows in Growl style simply isn’t a good idea.

UPDATE #1
I have added priorities colouring to version 1.1 – thanks to Christian for making the code

I know a lot of people want’s me to change the font size, however I have chosen not to since I like it this way. You can however do it your self by right clicking the style (in Finder) and choose “Show Package Content”. Afterwards open the default.css (GrowlingLion.growlStyle/Contents/Resources/default.css) and edit the last couple of lines.

I have been adding some functionality to script since then, but it really took of when I contacted Don the second time. I contacted him in the search of help, I had an idea for a way to implement a progress indicator right in to Alfred, and I knew how I would implement it, but I didn’t know how to write the code. Don helped me out, and wrote the code for me. And by the help of our combined efforts we have made a working script, that in my opinion works quite well.

The script has the following feature set:

• Growl notifications
• Status updater (it shows queue data, ETA’s and percentage of completion).
• Queue support
• And removal of the old files

I’m posting this version of the script on my own site, since Don and I don’t share the need for the same feature set, so mine has some added functionality.

I hope I will inspire you as much as Don inspired me!

#Update Alfred has added support for a new extension format called… oh you guessed it .alfredextension so I thought I would update the script. As i bonus all you have to get this working on you machine now is to downlaod the script and double click it:-)

If you haven’t heard of Alfred before, go checkout his website

You can get the same setup by downloading my script, and make a shortcut to it in the alfred preferencepane.as shown below.

Either way I created a custom search for alfred that searches “Browse by Name”.

alfredapp://customsearch/Browse By Name/bbn/ascii/url=http://www.google.com/search?sourceid=navclient&gfns=1&q={query}

The concept of my clever hack is in fact quite simple. I have made a automator service that takes a url, makes a html page with the link in it, and then saves that link to a dropboxfolder. I can then get to that page through a bookmark on every device I own.

The interface is optimized for a tv, but you could basicly use it for any device.

Installation
Step 1: Download the automator service

Step 2: Set it up

Open and install the file you just downloaded. Then choose “Service” from the template chooser. Then search for “Make HTML Tags” drag that to the right pane, then search for “New Text File”. You then have to change the settings for the “New Tex File”, so they match the ones in the picture above (“Where:” has to point to your dropbox folder). At last save the automator service as “Beam to Tv”.

Step 3: Bookmark it
Open the link on your tv and bookmark it!

Well thats it, you know have a great way of beaming links onto your tv, without the need of a keyboard. You can send any link from any application by right-clicking it and choosing “Beam to Tv.

Demo Page and Credits
I would like to give credit to Peter Dekker who made the code on which I based my script. I made a demo page that look like the one you would see on your tv that links to his page.

Update:

I have made a new version of Peter Dekkers automator action, so you don’t have to click any bottuns any more. If you choose do download this new script, it will simply redirect you to the site you have beamed as soon as you load the link. I didn’t replace my original instructions since this script has a flaw in my opinion, though it’s nicer when you have it set up, it’s a little harder to get it working. Why might you ask, well how do you bookmark a page that keeps redirecting you to a new one? The solution I have found is to run the script, then delete line number 6 (the one that redirects the site) and then load the the file in your tvs browser and then finally bookmark it.

UPDATE: Version 4.2

• 700 icons

UPDATE: Version 4.1

• 6 Docks
• 6 Wallpapers
• 200 icons
• iOS4 fix tutorial

A new release of the pack is out! I have added the following:

• 1 Dock
• 5 Wallpapers
• 3 App Splash Screens
• 1 Color choosing template
• And mind blowing 400 new icons.

Update: It has been brought to my attention that I forgot to pay tribute to Thyraz. It is and have never been my meaning to dishonor this great artist by the name Thyraz who made this theme, I simply wanted to spread the word and contribute to the great theme.

It’s a simple way of sharing you files using the your pogoplug. This is what it does, it asks you to name a new folder that will automatically be created, it then copies the selected files to this newly created folder. Then it’s simply set to open the my.pogoplug website, and all there’s back for you to do is click the “Share” button in the web interface.The only thing you have to do, to make this work on your computer, is to open the files in Automator, change the folder in witch all the new subfolders will be created and move the files to “username”/Library/Services. I have it set to a folder called “Shareed”, but you can do what ever you like with it. It may seem a little overkill to have make a folder every time you share a file, but I like to have structure. By the way this service has both a iPhoto and a Finder version. Hope you enjoy!

Download the finder version

Download the iPhoto version

Download