Some web dev I am–thanks to google adwords I on this very site I only just noticed an advert by microsoft for downloading IE8… Not how I should have found out about it but it beats not knowing at all, I guess.

I wonder how many issues this will introduce and how complicated my life will soon become… grab it if you have to (no follow link via google)

*update* as I went over to my Microsoft Virtual PC in order to test IE8, I accidentally loaded this site in IE6 and IT WAS HORRIBLE. In particular, it failed to inherit the width of the main content div so it spilled and defaced the site each time any code got posted (affected were code, blockquote and pre tags). Sigh… apologies, reparations have been done now, I just tend to ignore IE6 even though it still amounts to almost 15% of visitors… Even though it has been fixed in part, I should perhaps think of a gentler degradation for IE6 users, one that offers them a chance to upgrade what is now an 8 years old system…

Speaking of IE6 quirks, I had to do a semantic tab system for mootools 1.11 the other day and discovered how IE6 completely messes up the display of LI elements in an ordered list when having nested elements, spilling to the whole available space on the current line instead. The only fix for this is to float the children elements as well… For example:

<li style=”float: left”><strong>this is some text</strong></li> won’t just assume the text’s width, it will span over the whole available width and will push down a line the next LI. You need to float the strong as well in order to achieve the desired effect… Pants!

This week I am doing some CMS changes that are likely to warrant image cropping on the fly, so I had a look around for any mootools classes / plugins that can help with this.

First, I stumbled upon a nice mootools based image cropper, or shall I say ‘kroppr instead. What’s nice / special about it is that in addition to being able to crop images, it can rotate, zoom and so forth – and WITHOUT flash or java applets.

I’d pimp it more but it’s also not free, there a cost of &eurol29.00 per subdomain for this to run. Still, if you are ever after such a tool, it’s worth knowing about it.

*EDIT* removed link from this script as its reported as a rip-off.
*update* makelele sends word of his own ‘mootools cropper’ _link removed_ which is just as capable, a solution mix of PHP (imageMagick php ext) and javascript, with the licensing cost of €25.00. It’s a market economy so the choice is yours.

If you don’t fancy spending, you can always use Nathan White’s FREE and excellent mooCrop (you can also follow NW on twitter, he tweets a lot )

And another free one that seems to have similar features, UvumiTools Crop. Just click and pick…

Lately I have been playing with the RC1 release of IE8 and to my shock-horror, it makes a total mockery of many of the pages I administer and run. To the rescue is the so called ‘compatibility’ mode, created as a layer that allows your sites to look, feel and function exactly as they did in IE7. Allegedly, the magic code is:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

My initial testing concluded that it seemed to do the job and I let it rest, hoping to have survived yet another Microsoft blunder on the cheap… Not so. Turns out that you still get differences and issues in CSS. This is non-fatal but the fact that certain JS scrolling modules I had written now seemed to output nothing at all worried me. A google search revealed that Microsoft are managing a list of 2500+ sites, submitted by testers and reported to still have problems despite of the compatibility layer! Nice… I guess I will be submitting my own entries — and so should you… As if the Safari 4 beta was not bad enough…

Word to the wise, do not install a RC (release candidate) on a machine that you value – to be safe, download a copy of the Microsoft Virtual Machine and an XP image, then install on it.

Stubbornella, who fancies herself as a bit of a CSS guru, has some up with a concept that has thus far received nothing but praise from all sorts of people. You can check it out on her blog, not the worst of ideas… Only wish the slidecast had audio with it…

The old fable of tables vs “pure” CSS is at the centre of a heated flame war (I mean, a discussion) again. This time, due to Ron Garett’s post on his blog. Naturally, the story got picked up on ajaxian and the CSS ‘know-it-alls’ jumped at the chance to rubbish it all without giving the bloke a chance. And a chance he deserves for what he essentially says–and illustrates via examples–is that CSS for layout is too flawed, quirky and not-that-semantic, whereas tables are can be used to organise your data more reliably and easily as the ‘framework’ upon which you build the site, leaving CSS for styling on top.

Worth the read anyway. Like I always say, the best tool for the job. Never shy away from using tables when your project / data structure justifies it. To be fair – I used to prefer table based design until not so long ago when I discovered the benefits of shuffling content via CSS for SEO in order to get the more relevant text further up the source code of the page. And that’s just not something you can muster via tables…

It makes sense to standardise your CSS layout and styles development just as you come to rely upon frameworks for javascript and PHP, I guess. I came upon Elements V2, a nice and tight CSS framework that does not try to do too much but does it well.

I you are in a hurry to produce a new site, it can help you get started on the right path by literally laying down the framework for your content. There is always the danger of such projects to try and be too-helpful at times–the included Lightbox/prototype is overkill. But the mass CSS reset seems to standardise and level the playing field for all browsers so it’s worth grabbing just for that feature alone. Naturally, not a first: css reset.

And of course, from a SEO standpoint – you can then take Elements V2’s layout, move main content div to the top of the source code and the header div to end of the file. You then reposition via CSS and some nested layers… The end result? First bit of text that Google sees on the page is the specific body content – H1/2, titles and so forth. Bits that are repetitive like header and side menus simply do not need to be there at all. This technique is also known as Source Ordered Content or content before navigation. Here is an example SEO content shuffle on a search engine optimisation project I am tinkering with.

A snippet of this non-linear approach to source ordered content content shuffling (takes a while to get your head around the idea):

...
</head>
<body>
    <!--Main Container - Centers Everything-->
    <div id="mainContainer">
        <!--Main Content-->
        <div id="mainContent">
            <div class="content" id="main">
                <h1>Welcome to <strong>ASAP Cleaners</strong>...
                ...
                ...
            </div>
            <!--Footer-->
            <div id="footer">
                ...
                ...
            </div>

        </div>
        <!--Header-->
        <div id="header">
            ... links here
            ... more links
        </div>
...

and here is what it looks like in reality:

I am not going to go into details and bore you with tedious explanations on how to float elements. Just visit the source ordered content example and view the source.

To an extent, I already do this on the http://fragged.org blog itself – what you see as left side menu actually follows behind all the posts in the source code. I cannot really measure how this works in comparison to a normal linear source. I guess some experimentation will be required but that’s for another post

Word to the wise: if your pages’ source code gets to be quite big in size, you may consider not using the “content before navigation” method as your page links may be disregarded by some crawlers (with a 100k or so limit for source size on each page). Also, there is an accessibility consideration–some say source ordered content is being harsh on people with disabilities (er, blind) who use reader software (it cannot find the menus, allegedly) so be careful.