You’re reading all articles tagged 'howto'

Removing MLB from the Apple TV 2 menu

08 Jun 2011

If like me, you have no interest in MLB, will never use it, and would rather you didn’t have it so prominent in your Apple TV menu, this tip is for you.

It’s a bit of a rigmarole, but if you’re really keen to remove it, here are the steps you need to take:

  1. First of all, if you haven’t already done so, jailbreak your Apple TV with Seas0n Pass
  2. ssh into the Apple TV (in something like Transmit, Flow, Cyberduck etc.) using apple-tv.local as the server, root as the username, and alpine as the password. You can of course do it Terminal, using ssh root@apple-tv.local but I find the file editing part a right faff personally!
  3. Navigate to /private/var/stash/Applications/
  4. Open info.plist (I used xcode)
  5. Find ‘FRApplianceCategoryDescriptors’, and delete Item 1, and save.
  6. On the Apple TV, restart lowtide via Maintenance > Settings (or just pull the plug out and pop it back in again)

…and it’s gone!

How to setup a Textpattern playlist

18 Mar 2007

There was once a time when my most-asked-question was “can you send me the Firefox logo vector originals please”. Nowadays, it’s “How did you do the playlist bit – is it a plugin?”. So to save repeating myself, I’m writing this up as a blog post.

First of all, I’m afraid it isn’t a plugin. While there are ways of using the Amazon API to pull out album cover images automatically, I’ve had mixed results. Sometimes its wrong, and sometimes it doesn’t stock the album., which as an anal cover fetishist, just isn’t acceptable.

So, before I go further, bear in mind that with Textpattern, you can add anything, and send to anywhere, and display it how you like it. While not completely automated, my system does at least allow me to update the playlist fairly quickly.

Here are the steps if you want to try to setting one up yourself:

  1. Create a new custom field called “Amazon URL”. This is used to store the link (My own setup is slightly different as it uses the ASIN instead)
  2. Create a new section called ‘Playlist’. Turn all the radio button options to ‘no’. This will give us a specific section to post to.
  3. Create an ‘article’ form called ‘covers’, and add the following:
    <li><a href="<txp:custom_field name="Amazon URL" />" title="<txp:title />">
          <txp:article_image />
  4. In your page template, where you want the playlist to appear, add the following:
    <txp:article_custom form="covers" limit="9" section="playlist" sortby="Posted" sortdir="desc" />

    The article_custom tag is the key here. It isn’t context-sensitive like <txp:article /> and allows you to output content from a different section anywhere you like.

Then I add the content. So being the aforementioned anal cover fetishist, I upload these manually via Content > Images. I then take a mental note of the image ID, go to the write tab, and enter this number in the ‘article image’ field.

Then all that needs to be done is add the Title, and choose the correct section. Done!

Textpattern Notes: New Tag goodness

03 Dec 2005

Back when Texpattern was still gestating, many plugins were written to fill holes in its templating options, but its come a long way since then. Every day I’m finding new tags that allow me to keep plugins down to a minimum.

If you haven’t already, you really need to bookmark these pages: Alphabetical Tag Listing and Attributes Cross Reference on the Textpattern wiki documention, called “TextBook”. This an amazing resource, especially if you adopted Textpattern back in the days when it had no documentation. There are lots of gems in here, so I thought I’d dig some out, in case they’re new to you as well.

Conditional Comments

I think the area where the 4.0-4.02 releases really shone were in the wealth of conditional tags. Here’s an example:

&;ldquo; <txp:excerpt />”

There are also conditional tags to test for categories, comments, whether comments are open, whether you’re viewing the last article and more. Check out all the tags that start with txp:if_ on the list. The section conditionals are very handy, as you can specify either a single section, or a range (make sure that you don’t have any spaces inbetween the section names, just commas). Here’s one from my templates:

<txp:if_section name="journal,destinations,archive">

I use this one to output the correct submenu in each section. If you want to specify the homepage (or ‘default’ page as its known), leave the attribute blank like so:

<txp:if_section name="">

To specify the homepage as part of a list, use a comma at the start:

<txp:if_section name=",journal,archives">

Also Very Useful™, are the custom field conditionals. In my portfolio section, some of the entries are websites and have a URL associated with the information. This is done using a custom field (set up in preferences > advanced preferences) and used in the article form like this:

<txp:if_custom_field name="URL"> 
<a href="<txp:custom_field name="URL" />" title="Visit <txp:title />"><txp:article_image /></a>

This creates a link to the site around the main portfolio image.

Finally, to complete the usefulness, the devs have added a <txp:else /> conditional, to help keep code down. Here’s an example:


    <txp:excerpt />

    <txp:else />

    Sorry, I couldn't be bothered to write an excerpt...


Permalinks & Single Tag mode

Until recently I was using the zem_link plugin to allow custom class names and title attributes on permalinks. It was one of the things that I didn’t like about TXP compared to Moveable Type – it outputted the XHTML for you. However, I found this on the description page for the permalink tag:

By default permlink returns only a very basic link, which doesn’t allow for customizing the link title, or adding a CSS class, etc. Using the tag in its Single Tag capacity opens up a lot more possibilities. For example, to have the permanent link have an HTML title attribute of the article’s title, and also apply a class to it named “orange”:

<a href="<txp:permlink />" title="<txp:title />" class="orange"><txp:title /></a>

Thats what I’ve been wanting! I had no idea that the tag could be used that way.


Another feature I missed from Moveable Type days was the ability to output a list of articles, offset by a specified number first. This is now part of the article tag attribute options:

<txp:article form="recent" sortby="Posted" sortdir="desc" offset="3" limit="5" />

I use this on my journal homepage, showing the last 3 posts in full, and then the 5 posts thereafter as just links. The list of previous articles can now exclude the last 3, as these are shown in full. For individual article pages however, we need to show all the articles, so of course I use conditional tags :

<txp:article form="recent" sortby="Posted" sortdir="desc" offset="3" limit="5" />

    <txp:else />

    <txp:article form="recent" sortby="Posted" sortdir="desc" limit="5" />

Which neatly wraps it all up! One of the reasons I love Textpattern over other options so much, is its templating tags. The xml style makes so much sense, and easy to grasp.

Return of the iPod

27 Jan 2005

hicksdesign iPodLast December, you might remember that I was having problems getting my iPod to mount on my G5. Having tried all manner of fixes – resetting firewire ports, restarting iPod, rubbing Marmite into the play/pause button whilst simultaneously placing a paper clip into the headphone socket for 3 seconds, singing The Safety Dance at half speed. Nothing.

After giving up hope of ever getting the little bugger to show itself to iTunes, Finally I’ve found a solution that works, thanks to this post on the Apple forums. Thank you Stefano Stefani, you rock (as the kids say).

Textpattern notes part 4

21 Sep 2004

A few more Textpattern odds and sods.

Finishing off the hacks to the comments.php file in Textpattern (see also TXP notes 3)textpattern-notes-part-3 is the introduction of a small feature from MovableType that I miss. When receiving email notifications of comments, they always had the relevant entry URL in them. You see the comment and want to reply, so just click the link to go straight there.

Here’s how to do this in TXP. In publish/comment.php find this line near the end (should be line 374 if you haven’t already hacked it):

<pre> $out = "Dear $RealName,\r\n\r\nA comment on your post on your post \"$Title\" was recorded. </pre>

Change it to this:
<pre> $out = "A comment on your post \"$Title\" ($parentid/ ) was recorded. </pre>

Just change the URL to suit your site, and the parentid will add the relevant id into the URL. Incidentally, if you’re upgrading textpattern to the latest RC, and you’ve installed these hacks, then you just need to change 1 line of code in order to keep your customised version.


Integrating Textpattern with Photostack was another goal. I wanted to keep all my ‘include files’ (footer, navigation etc.) as forms within Textpattern, as this makes life so much easier. However, I also want to insert these in pages outside of Textpattern. To do this, open up the index.php file in Photostack, and change the small chunk of php to read:

<pre><?php // include Textpattern first include '/full/path/to/textpattern/config.php'; include $txpcfg['txpath'].'/publish.php'; ob_start('parse'); // Then pull in the photostack.php program. include("photostack.php"); // Load photostack. load('config.php'); ?> </pre>

And then all your Textpattern tags, such as <txp:output_form="header"> will parsed. This also works for static pages.


One of the shortcomings of Textpattern that I mentioned previously, no control over the XHTML output in permalink tags, has been solved by this excellent plugin by Zem. It allows attributes such as class and title to be specified. Nice.


Finally, I’ve only recently discovered what ‘override form’ in content>write>advanced options can be used for. I now have 2 forms for using with entries, a default one which only displays an excerpt on the main journal page (for long entries), and another which displays the full entry (for very short entries). I can then choose to override the default when posting or editing an entry for instance, when the entry is short. If the option to override form isn’t visible (under ‘Advanced Options’), the you may need to open up textpattern/lib/admin-config.php and change the ‘allow_form_override’ to equal 1.

Some Omniweb 5 tricks you might not know

09 Sep 2004

Forcing scrollbars (now even better)

17 Aug 2004

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

Here are a few solutions, and as you would expect, they each have their own pros and cons:

html>body { height: 800px; }

For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway.
Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.

html>body { overflow:scroll; }

For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content.
Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.

#Content p.bstext {

This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.


Thanks to Patrick Lauke who came up with this genius solution:

html { height: 100%; margin-bottom: 1px; }

This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.

Textpattern notes Part 2

24 Jun 2004

Please note the information in this entry is now superceded

For the second of my notes on Textpattern conversion, I’m going to cover just one subject : hacking the txp comment system.

Purpose of this hack:
Change the recorded comments to display as <div>’s rather than <li>’s, with alternating background colours and sequential numbering. Change the comment form to allow live previews to be used.

What you need to know first:
Upgrading Textpattern is a simple process, you simply upload all the new files (apart from the config.php file) and load _update.php in your browser to make sure all your database tables are updated. Its so quick. What I’m doing here is hacking the /textpattern/publish/comments.php file – a lot. This means that when you update, you’ll have your work cut out for you.

Still want to do it? Make a backup of that comments.php first, and then read on.

Textpattern, handles commenting a little differently to systems like Movable Type. A lot of the work is carried out behind the scenes, away from the page templates and forms, making personalisation harder. The comment form is laid out in presentation>forms>comment form, the display of comments is found in presentation>forms>comments. Then, as long as you have the <txp:comments_invite /> tag inside your article form (presentation>forms>default), Textpattern will add these elements together, along with the preview and remember details functions.

Step 1 – Change the existing preview method.

Dean Allen designed txp’s preview-first/submit-last routine to avoid spam flooding. This hack removes that safety net, and allows comments to be submitted directly, but I think this is less annoying for users. If we want to implement live comment previews, we have no choice – it has to go.

Justin Low worked out how to change this situation. Work through his instructions here, and you’re done.

Step 2 – changing the comments to display as <div>’s rather than <li>’s

I wanted to do this in order to have more control over my CSS. The ordered lists add comment numbers without any fancy coding, but restrict what markup can go inside the comment, and how much can be changed with CSS. Changing it to <div>’s gives that flexibility.

Still in /textpattern/publish/comments.php find the following code (around line 34):

<pre>f ($darr) { $out.= '<ol>'.n; $out.= formatComments($darr); $out.= n.'</ol>'; } </pre>

and change it to:

<pre>if ($darr) { $out.= '<div id="comment">'.n; $out.= formatComments($darr); $out.= n.'</div>'; } </pre>

then find this (around line 132):

<pre>$out .= n.t.'<li id="c'.$discussid.'" style="margin-top:2em">'.$temp.'</li>'; </pre>

and change it to:

<pre>$out .= n.t.'<div id="c'.$discussid.'" class="'.$class.'">'.$cno.' '.$temp.'</div>'; </pre>

There are 2 php values in here, which we’ll use in the next step:

Step 3 – alternating background colours and sequntial numbering

Obviously, I can’t use the MTFlipFlop plug-in here, so I had to find a different solution. There’s also no tag in txp to output a comment number (because it used the ordered lists – which I removed!).

Once you’ve set up your 2 CSS classes for the alternating rows (I’ve used ‘odd’ and ‘even’), find the end of the php function – function formatComments($darr) (around line 75) and insert this code:

<pre>// set up div class and numbering $class=odd; $cno=1; </pre>

These are our 2 values, $class for inserting the div class, and $cno for the sequential comment number. Then, returning to the line where we changed the <li> to a <div>:

<pre>$out .= n.t.'<div id="c'.$discussid.'" class="'.$class.'">'.$cno.' '.$temp.'</div>'; </pre>

place this after it (but before the closing brace):

<pre>// change the values $cno=$cno+1; if("odd" == $class) { $class="even"; } else { $class="odd"; } </pre>

This adds 1 to number count, and the decides whether the next time it loops, the div class should be odd or even. We’re almost there…

Step 4. Implementing Live Previews

The original post on how to do this can be found here. Now that we’ve done all the changes listed above, we can hard code the comments form.

In presentation>forms>comment form change this tag:

<pre><txp:comment_name_input /> </pre>


<pre><input type="text" id="name" name="name" tabindex="1" onkeyup="ReloadNameDiv();" value="<?php echo $aname; ?>" /> </pre>

and then, back in comment.php, we need to change the <textarea> tag to:

<pre>$textarea = '<textarea name="message" id="message" onkeyup="ReloadTextDiv();" cols="1" rows="1" tabindex="4"> '.htmlspecialchars($message).'</textarea>'; </pre>

If users have already been on your site, chances are that a cookie has been set, allowing their details can be inserted automatically. By hard coding the name input, we have to do a bit more jiggery-pokery to get this working again. When we changed the <input> tag we added value="<?php echo $aname; ?>". This will output the cookie value into the text field, but we also need to grab the cookie values. To do that, place this somewhere above the form (I put this at the very top of my page template):

<pre><?php $aname = $_COOKIE['txp_name']; ?> </pre>

(Thanks to Justin for that bit). Then, still on that page template, you just need to add the preview div at the bottom, after the <txp:article /> tag:

<pre><txp:if_individual_article> <div class="odd">preview :<a href="#" id="NameDisplay"> <?php echo $aname; ?></a> on <?php $today=date("d.m.y"); print "$today"; ?>: <div id="TextDisplay"></div> </div> </txp:if_individual_article> </pre>

The conditional tags stop the preview being displayed on the homepage where there are a number of articles, restricting it to a single entry page.

Step 5 – Textile preview

If you want to really finish things off, how about implementing Textile parsing in the preview? Jeff Minards javascript solution does exactly that, based on code by Stuart Langridge. Its genius!

You’re done at last. Have a drink, you deserve it!

Textpattern notes Part 1

22 Jun 2004

As and when I get time, I’m going to post some more information about this site’s conversion over to Textpattern. I’m going to evangelise it until I’m blue in the face.

There were quite a few little tweaks I had to make, but here are just a few notes to be getting on with…

Clean URLs for the news feeds

Create your folder structure (such as /feeds/rss/) and place the following code in an index.php file in that last directory:

<pre><?php header('location: /?rss=1&section=journal'); ?> </pre>

Just replace ‘rss’ for ‘atom’ if you need that feed too. I’ve also specified that the feed should come from my journal section, but you if you just run Textpattern as a blog you leave this out. Thanks to Drew McLellan of Allinthehead for this one.


In order to get Texpattern and Shaun Inman’s Shortstats working in harmony, I placed the shortstat include at the bottom of each of the section text files in the root. For example, in the ‘article’ file you would have :

<pre><?php include "./textpattern/config.php"; $s = "article"; include $txpcfg["txpath"]."/publish.php"; textpattern(); include($_SERVER["DOCUMENT_ROOT"]."/shortstat/inc.stats.php") ?> </pre>

Mixing hard coded and txp driven pages

In the about section, I needed to do something clever for the ‘about hicksdesign’ page, wheareas the colophon and the contact pages would essentially be just articles.

Using the If_category plug-in by Matthew Moss, I set up the ‘about’ section page to show the hard coded content if the category=hicksdesign, and just a plain article for the others:

<pre><txp:mdm_if_category category="hicksdesign"> ....hard coded content in here.... </txp:mdm_if_category> <txp:mdm_if_category category="colophon,contact"> <txp:article limit="1" form="about" /> </txp:mdm_if_category> </pre>

This method is also used to alter the layout between the desktops page and the other downloads pages.

Safari menu separators

11 Mar 2004

screenshot of the menu separators

I’ve come up with a very lo-fi hack for creating bookmark menu separators in Safari. By combining a grey line favicon, with the most minimal page title I could find (unfortunately, Safari doesn’t allow blank titles) you can get a passable separator. If you like the look of example above, simply go to, and bookmark it. Once in your bookmarks it can copied into other folders by alt-dragging.

Updated: As clever clogs Shaun Inman has pointed out in the comments, you can remove the title completely by editing the bookmarks.plist file and changing <string>·</string> to <string></string>. Safari accepts this and just leaves with the grey line.

Updated again: If you prefer to use a plain-as-possible favicon (a single-pixel of pinstripe colour) then go to instead.

Playing iPods via iTunes

08 Jan 2004

My ‘working away from home’ kit consists of just 2 things. My worn but trusty G4 Powerbook and my iPod. The iPod means I can play music in the car, as well as backup work to it. I’ve been trying to find a way of playing the music on my iPod through the Powerbook, without losing the link to my G5 where the music library is kept. There are plenty of apps that enable you to copy the iPod library onto your computer (such as PodWorks) – but I just don’t have the HD space for such a task. It also seems a little overboard – why copy everything when I should be able to just playback from the iPod?

I tried an app called iPodRip, but was less than satisfied with its ramshackle, ugly-relative-of-iTunes interface, tendency to crash regularly, and inability to display tracks in the right order. A better solution, was a free little app called Music Publisher which shares your iPods music library, allowing it to be played through iTunes. This also works across networks.

Even better however is an undocumented feature that I found after prompting by Shaun Inman. When you plug in your iPod you’ll be asked whether you want to break the existing link with the other iTunes database, and sync with the powerbook’s. Select no, and click the iPod icon at the bottom of the iTunes window. Click ‘Enable for Firewire use’ if you haven’t already, and change updating to manual (deselecting all automatic options), and lo! The tracks and playlists from your iPod show up in iTunes!

grow some garlic

16 Dec 2003

December is the perfect time of year to start growing crops of garlic ready for next summer. Traditionally, garlic is planted on the shortest day – December 21st, but can be planted anytime from late November onwards. It needs a long growing season and a cold snap to mature properly.

You can use garlic from a supermarket, or even better, from a garden centre. All you have to do is:

  1. Remove the outer skin, and separate the bulb into individual cloves.
  2. Plant each of these with the pointed end upwards, just about sticking out of the soil, in a sunny spot.

If you’re planting in the ground, you need good drainage, so if the soil tends to stay wet for a long time after rain, then just add a bit of grit to improve drainage. The other option is plant each one in a 3 or 5 inch pot with compost- If you just have a sunny windowsill, try that. All they should need is watering and the occasional feed of fertiliser with something like Tomato Feed. How do you know if a pot needs watering? Stick your finger into the top, if you get bits of soil sticking to it – water it. If you don’t – don’t.


Next July, when the long, thick, grassy leaves have turned yellow, your garlic will be ready to take out. If you want to use it dried (as you get in shops) tie them up by their leaves and hang them to dry out for about a month. If you’re feeling brave, do as the French do and eat some fresh on toast! It’s a wholly different taste…

Flip Flop

01 Dec 2003

A few folks have asked me how I created the alternating background colours in the comments sections. I use a Movable Type plug-in called ‘Flip Flop’, written by a chap called Gavin Estey. I’d been wanting to use this for a while, and finally got around to implementing it.

All you need to do is create the 2 alternating styles (an odd and an even) in your css, and then put the following code into your MT template. In this simplified example, I’ve used ‘green’ and ‘white’ as my 2 options.


/* MT Flip Flop styles */
.green {
	padding: 8px;
	background: #EEF7DD;
.white {
	padding: 8px;
	background: #fff;

Movable Type:

&lt;div class="&lt;$MTFlipFlop odd="green" even="white"$&gt;"&gt;

The Flip Flop plug-in then decides which style it needs to use. Thanks Gavin!

MT author comment notification

17 Oct 2003

If you’ve ever left a comment-reply to users who’ve left comments on your site – you’ll get a email notification the same as you do for every commenter. This can prevented however.

Go to lib/MT/App/ in your MT folder and find the line that reads:

MT::Mail-&gt;send(\%head, &lt;&lt;BODY); 

This is on line 152 if you’re using MT 2.64. Change it to:

MT::Mail-&gt;send(\%head, $body) unless $author-&gt;email eq $comment-&gt;email;

And you’re done. However, if you’re using Jay Allens MT Blacklist plug in, you’ll need to change the code in the file instead. ScriptyGoddess shows you how.

I know what I said!

02 Oct 2003

Quick Movable Type hack. If you ever reply to users who’ve left comments on your site – you’ll get a email notification the same as you do for every commenter. Via the Movable Type support forum, I found a way of stopping it. Go to lib/MT/App/ in your MT folder. Find the line that reads:

MT::Mail-&gt;send(\%head, &lt;&lt;BODY); 

This is on line 152 if you’re using MT 2.6. Change it to:

MT::Mail-&gt;send(\%head, $body) unless $author-&gt;email eq $comment-&gt;email;

And you’re done.

a links database with MT

04 Sep 2003

Inspired by recent articles on how to use Movable Type for more than just blogs, I’ve been trying this out on more areas of the site. The news, articles and album cover playlist sections are MT powered, and now the links database is too. This means I can now add content to the site from either the web or from my weblog editor in NetNewsWire.

The technique has been well documented on many blogs, (wholelottanothing’s is very well written) so I’ll skimp a bit. First I created a new blog called ‘links’ and removed templates I wouldn’t need (such as the stylesheets and individual entry archives). I also set archiving to ‘category’ and turned comments and convert line breaks off. Then I decided which MT tags to use for which piece of data:

I inserted these tags into the main MT Template:

<h3><$MTCategoryLabel$> (<$MTCategoryCount$>)</h3>
  <MTEntries lastn="100" sort_by="title" sort_order="ascend">
	<p><a href="<$MTEntryKeywords$>" title="visit <$MTEntryTitle$>">
	  <$MTEntryTitle$></a> // <$MTEntryBody$></p> 

This then creates a page, listing all the links within their categories. The tags in the category archives page (where just one category of links is shown) needs to be slightly different:

<h3><$MTArchiveTitle$> (<$MTArchiveCount$>)</h3>
  <MTEntries lastn="100" sort_by="title" sort_order="ascend">
	<p><a href="<$MTEntryKeywords$>" title="visit <$MTEntryTitle$>">
	<$MTEntryTitle$></a> // <$MTEntryBody$></p> 

To get the links to display in alphabetical order, add sort_by=“title” sort_order=“ascend” to the MTEntries tag. I used

tags to list each link – you may prefer an unordered list. ‘MTCategoryCount’ shows the number of entries in that category. To make adding links easier, you can customise the ‘new entry’ form in MT, so that it only shows the fields you want to use – Title, Category, Entry Body and Keywords. The last thing I needed to do was create the list of link categories for the main menu. I created a new index template called ‘droplinks.php’ in the links blog, which just contained the following:

<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$> links">
<$MTCategoryLabel$> (<$MTCategoryCount$>)</a>

This is then called up an include in the main navigation under ‘destinations’. Job done.

Next – how to build your own house and landscaped garden using MT…

How to: vertical centering with CSS

18 Jul 2003

For a long time I'd wanted to achieve a vertical centering effect with CSS that I used to achieve with tables or frames. A fixed size block that floats dead centre in the browser window, no matter what its size. Techniques for horizontal positioning have been known for some time, with the 2 methods described on Blue Robot. Then I found across a piece on Web Page Design for Designers, outlining how to do this. Nirvana! It uses absolute positioning to put find the exact centre point of the window, and then uses negative margins to 'shift it all back halfway', producing the effect. It works, but there are 2 problems with this:

the problems

the solutions:

the cut-off content problem

The WPDFD technique uses 2 container divs - #horizon for the vertical and #content for the horizontal. Originally, these 2 divs were needed due to a bug in Opera. While this has since been fixed in version 7, there is another use for the extra container div.

Instead of using absolute positioning to center horizontally, use the auto margin method to centre the second <div> within the first. This is the best way, as it stops trying to centre the content when the window is too small. This still cuts of the the left hand side in Mozilla/Camino/Firebird, but all it needs is a 'min-width' value adding to the containing <div> to stop this.

Here's the new CSS:

#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;

The addition of position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats, which makes life easier and accurate. You may not need this however. This solves the problem of content being cut off horizontally.

As for the vertical - you just have to make sure that you specify a height that will fit in your target market's lowest screen resolutions. I used 380px, which should fit in most browsers at 800x600 (once you've allowed for all that browser chrome).

IE5 mac and the commented backslash hack

To solve the IE5 mac problem, you need to use the commented backslash hack. First you add your style rules to work in IE5 mac, then you add your real styles rules, beginning with a backslashed comment and ending with a normal comment. IE 5 Mac ignores everything between the 2 comments, and these override the previous rules, providing the centering effect for all the other browsers:

 /* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 /* end IE 5 hack */ 
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;

As we've already stated rules like 'position: absolute' in the first set of style rules, we don't need to repeat these, only redefine rules that we want to change. So far I haven't been able to replicate the vertical centering effect, but at least it centres horizontally.

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom