Property development in NW11 London

Callisti has been helping Glentree new homes with their new Aylmer Place apartment development in north west London. The luxury apartments are at the Hampstead Garden Suburb area near Hampstead Heath so there is access to urban parkland.

The website is a customised wordpress child theme based on the twentyten theme so takes advantage of the custom menu feature and widget sidebars. CSS3 was used to create background gradients in the main content container area and the featured thumbnails were used to give each page a unique header image (required a minor functions.php tweak)

2 of the 5 apartments (prices starting at around a cool £1.15m!) have already been reserved ...

Rotate text in Internet Explorer using CSS and Matrix transform...

Not sure about Internet Explorer 9 yet but there is an excellent online tool for calculating the correct values for Internet Explorer 6, 7 and 8 css filters:

Enter the degrees of rotation and click 'Set'

This will generate CSS for the equivalent values for Firefox, Safari/Chrome and Opera but these can now be more simply stated using, e.g.

-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);

The basic filter for IE only allows 90 degree rotations (0, 90, 180, 270) so if you want text or images at a jaunty angle it's not enough. It's worth the extra effort to keep text as text and not resort to imagery.

However, don't expect the text to be as smooth as in other, more capable browsers...

The maths

Vertical text

CSS3 is providing a selection of memes. The old age problem of browser rendering and cross-browser testing heads up again though.

ScottGale.com gives a working solution.

The axis of rotation can vary between browsers and pre Internet Explorer 8 offerings are jippy.

Waste of public money?

Callisti has been using the BuddyPress plug-in for WordPress to set up community frameworks (notably Dumfries and Galloway For Sale Free and Wanted) and recently revised the phpBB forum experiment on Wasting Public Money with a similar WordPress and BuddyPress installation for a more pleasant user interface.

There is also the added feature of being able to use the WP-FB connect tool (recently updated after Facebook's change to acceptable authentication methods) which allows greater accessibility to those already familiar or at home in a Facebook environment.

Visitors are welcome to contribute to the website with relevant content...

White noise resignation

This is the sort of pish that gives SEO a bad name. Clutters up inboxes as well.

Also have been getting variations of attempted blog posts on client site. Tedious.

Google is meant to be penalising content farms that produce low quality crap, maybe this will change the course of spam river. For a while.

Must be practising - trying out a typo pattern generator using stock phrase, search engine URL (email addresses suppressed for this blog post)

Maybe these are some of the stumbling steps that will lead to true AI :)

Web Site (if any entered):
http://www.google.com/ [Valid URL: True]
Comments:
Cool! That's a clever way of loonkig at it!

Web Site (if any entered):
http://www.bing.com/ [Valid URL: True]
Comments:
Home run! Great slugging with that aswner!

Web Site (if any entered):
http://www.yahoo.com/ [Valid URL: True]
Comments:
AFAIC that's the best aneswr so far!

Facebook frustration

Gah. Nothing is free with Facebook. Money doesn't always change hands but information does.

Dependencies also are affected so anyone using WP-FB AutoConnect will be getting an email something like this: (Justin Klein developer of WP-FB AutoConnect is aware of this recent Facebook issue as of 15th May 2011!)

Dear Developer of Dumfries And Galloway - For Sale Free And Wanted,

Our automated systems have detected that you may be inadvertently allowing authentication data to be passed to 3rd parties. Allowing user ids and access tokens to be passed to 3rd parties, even inadvertently, could allow these 3rd parties to access the data the user made available to your site. This violates our policies and undermines user trust in your site and Facebook Platform.

In every case that we have examined, this information is passed via the HTTP Referer Header by the user's browser. This can happen when using our legacy authentication system and including < iframe >, < img > or < script > content from 3rd parties in the page that receives authentication data from Facebook. Our legacy mechanism passes authentication information in the URL query string which, if handled incorrectly, can be passed to 3rd parties by the browser. Our current OAuth 2.0 authentication system, released over a year ago, passes this information in the URL fragment, which is not passed to 3rd parties by the browser.

Please ensure that you are not allowing this data to be passed immediately. Accessing your site as a test user while running a HTTP proxy/monitor like Charles or Fiddler is the best way to determine if you are allowing this information to be passed. If you discover the issue, you can do one of two things:

1. Migrate your site to use our OAuth 2.0 authentication system. We are requiring all apps and sites to update to this mechanism by Sept. 1, 2011. Migrating now will address this issue and ensure that you are one of the first to meet the deadline. For more details, please see our Authentication Guide.

2. Create and use an interstitial page to remove the authentication data before redirecting to your page with 3rd party content. This approach is used by many of our largest developers today (although they are all migrating to OAuth 2.0 shortly). This is a simple and straightforward change that should have minimal impact on your site. For more details on this approach, see our Legacy Connect Auth doc.

Because of the importance of ensuring user trust and privacy, we are asking you to complete one of the above steps in the next 48 hours. If you fail to do so, your site may be subject to one of the enforcement actions outlined in our policies.

If you have any questions or believe you have received this message in error, please contact us.
Facebook Developer Relations

Print CSS for Internet Explorer 7

Well. What better way to spend time on a bank holiday weekend after the recent "Royal Wedding".

An Internet Explorer 7 (IE7) feature was preventing the page content beyond the first page from printing properly for Albany UK property projects. In the browser's print preview option, the first page was displaying but with content truncated at the foot of the page. The second page onwards showed only the css background color/image but no page content.

Interestingly, Firefox, Safari and Internet Explorer 8 printed out the pages correctly, although some of the property listings were getting cut in half at the end of the page. Not pretty.

The fix was to invoke the less well known CSS feature "display:inline-block;" for the outer box (div) containing the property listing divs, the property listing divs themselves, and (because of the WordPress structure) the .article class (each property listing is technically a post.)

Sounds straightforward? Well, no. The other part of the fix was to use a CSS hack, or IE7 selector, so that the styles would only be applied in IE7 browsers.

e.g.
#main {position:relative; *position:static; *display:inline-block;}
.article {*display:inline-block;}

Applying the changes to affect all browsers broke the print layout in IE8 and Firefox.

There are some general guides for avoiding CSS print issues:

Beware floats
Stay mindful of absolute or relative positioning
Watch the use of height and width defined in px
Keep an eye on overflow

Ideally the print layout should display all content inline and with auto properties (width, height, position, overflow, etc.) and the browser rendering engine should never be confused by boxes within boxes (nesting of block level elements) but when does that happen, eh?

Some google results that helped...
The Blog of Ben Nadel
ServerFault