Web development

30
Jun 10

HTML5 video codec support

Since Google and friends announced the VP8 codec stuff, I decided to throw together a simple page using the <video> element to test which codecs a browser supports. In order, your browser will try to play WebM (VP8), OGG (theora) and MP4 (H.264).


Me getting hit in the face with a water balloon

The video was shot by Gordon at 210 fps so it looks pretty slow. No attempt was made here to encode the videos in a very smart way – don’t use this page for codec comparisons!


9
Feb 06

The future of web apps summit

My work were kind enough to send me to the Carson Workshops “The Future of Web Apps” conference in London yesterday. It was a really good day, with some excellent talks. I particularly enjoyed listening to Tom Coates (Yahoo) and Cal Henderson (Flickr). Although it was Steffen Meschkat from Google who took quote of the day for me when comparing software to music: “AJAX is pop software”.

Simon Willison seems to have taken better notes than me.

Update: the guys from Carson Workshops still haven’t made the podcasts available, but another attendee has:

I don’t think he bothered with the Flex advert from the guy from Adobe. Don’t blame him – Flash is dire pish.

If you only want to listen to one or two, I’d go for Cal Henderson and Tom Coates.

Update 2: there are also slides from Tom Coates’ talk available.


11
Jan 06

Moving targets and the benefits of agile development

I’m working on a site at work that had a reasonably well laid out specification. At face value it seems like a pretty straightforward online shop, but when you delve deeper the complexity just keeps unfolding: different user types, wholesale accounts, special cases and little flags here, there and everywhere… A few weeks have gone by and we’ve made some important decisions about how things are going to work. It was OK though and we’ve got a nice user, products and permissions system in place. Everything was going to plan. Then we met the client again, partly to re-confirm some functionality. The project has undergone a meteoric shift, with most of the important parts having some major changes and more than half of the work so far has been made obsolete. Now, while this is without doubt a change to the original spec (and we can therefore re-spec and re-quote the work) it’s still incredibly frustrating to see wasted time and code.

Such massive spec changes are thankfully pretty rare, but it does highlight the inefficiencies in our traditional approach to developing applications and I’m wondering how much of a difference a more agile approach would make. Would showing initial builds of the application to the client much earlier and more often have caught these changes before now? I believe so. This may sound like we have some real problems with our approach, but I don’t think it’s really all that different to the large majority of other web development companies out there and, for a lot of projects, it works pretty well. Also, while we’re definitely becoming more convinced that it’s a better way to develop, implementing a more agile approach isn’t all that straightforward. It requires a big shift in attitude and process and I’m not sure there’s much value in trying to move over incrementally. Like any large change, there is some risk involved.

While our actual programming processes are improving all the time, one of the next, and possibly biggest, hurdles is getting over the fact that we would need to show clients not just unfinished code, but barely started code – and that’s intimidating! As developers, we’re happy working with a really empty shell of a site, understanding that it actually works much better under the hood than it appears and that making it look really nice is a pretty straightforward job. But would our clients understand that? Or would they just think it’s crap, freak out and get all jumpy? My own opinion is that they’d be quite happy with it, but probably only after having it all clearly explained to them – which makes this a client management problem as well as a technical one. Another aspect I haven’t quite got my head around is how quoting for work fits with the agile approach. Historically, I find accurate quoting difficult at the best of times and I’m keen to learn how it fits with the agile idea of being adaptive and reacting to change rather than predictive.

I’m not sure what I’m saying here other than “I think agile approaches are better and I would like us to move that way, but I realise it’s not as simple as just making a decision”, maybe I’m just thinking out loud.


19
Aug 05

Templating engines

I’ve been working on a PHP template engine over the last couple of weeks. As with a lot of things, there are mixed views about templating. I used to advocate not touching them – they’re slower, sometimes restrictive and sometimes make you learn a new language. I just couldn’t see the point. But after working with a few different designers/HTML coders, the clouds started to clear – although some were completely fine with with PHP, some got confused and some even got scared of doing very much at all – I decided that a template engine was the way to go, especially as if you the right one you get free presentation and business logic separation (a Good Thing – use Google if you want an explanation).

Ian Leitch’s post on templating popped up on Gentoo Planet today and he seems as confused as a lot of people are. He points out that templating systems usually go one of two ways – allow a limited set of commands or allow loads of commands. I agree that if you want to enable a lot of commands, you should probably scrap the whole templating thing and give full access to PHP or whatever, although this has a whole new set of considerations. Some people say that if your designer can’t learn PHP you should find a different designer. Unfortunately, in my world, this isn’t always an option. I have to work with a variety of designers/HTML coders and often have no control over who they are. Occasionally, if God is feeling particularly unkind, I have the unparalelled joy of working with HTML dreamweaver table based designers or other such scum. What would you rather these clowns had their hands on – PHP/Ruby/whatever or a limited set of operations of your choosing? In the end, what you use probably depends on circumstance as much as anything else. If you are lucky enough to only work with designers who are comfortable and proficient with your scripting language of choice, then templating gives you far fewer gains than if you have to work with people who you’d rather not give access to the filesystem to. But I still think there are gains to be had.

I looked into some template engines – there are hundreds of them – but couldn’t find one that seemed right (I guess that’s why there are hundreds of them), so decided to write my own. I might write more about my own template engine in another post, but to whet the appetite (or not, as is probably the case) I based my engine on the following:

  • Not all designers are stupid and crap with code. But some are.
  • The template code should be easy to read and write.
  • You should be able to load a template file in a browser (without a web server) and view the placeholders.
  • Should be easily maintainable and extensible.

While developing my system, an added bonus has been that I’ve found it way nicer to code templates now than using foreach, echo, etc. This wasn’t really part of the main plan, but it’s lovely that it’s worked out like that. Maybe I’ll write more about it later.

I get the impression that he likes the idea of separating presentation from business logic but that he doesn’t want to restrict what developers can do.


9
May 05

SVK

I brought my laptop on this mountain biking trip because this seemed like the perfect opportunity to take SVK for a real test drive. How geek is that? I’m using SVK to get over one of the problems that had me a little puzzled about version control – on open source projects, like KDE, non developers sometimes like to help test (or just be on the bleeding edge) by running the latest CVS/SVN version, so it makes sense for developers to at least try to keep the repository code reasonably solid. But how do developers use version control while developing unstable codefor their applications? The obvious solution is to use a second, non-public repository and merge changes into the main repository when things are reasonably stable, but these merges seem like a real pain. I guess you could do the same sort of thing with branches, but that doesn’t seem like the right sort of use of them to me.

SVK is a pretty elegant solution for doing exactly that – it mirrors repositories on your local machine, allowing you to work locally, without a connection to the main repository, commit changes and generally mess about until you’re happy and then merge the changes back into the main repository using a single commit (and an auto message generated from your local commit messages). I’m no expert at version control (and I may be missing major stuff here…), but this seems like a really nice way to do this. Of course, the real test will be how well things work when I get back and merge the changes I’ve made tonight back into the main Subversion repository! I won’t be telling the designer/project manager at work about SVK, it adds a extra level of complexity to version control that he’s just getting to grips with now (after some prodding ;)).

Here is a very good three part SVK tutorial that desperately needs turned into a one part affair!


8
Jan 05

Bad weather reports and Worldpay customisation hell

Stuart and I had a wicked looking bike route in mind for today up at Blair Athol. The weather forecast was rubbish though, and the news has been full of severe weather warnings and tales of flooding all over Scotland. Still, we decided on a pussy out option of going to the woods at Dunkeld to avoid some of the wind. Today arrived but Stuart called me to cancel, citing illness, so I decided to be a wise boy and get some web work done.

The job I’m working on at the moment involves using WorldPay for processing payments online. Unfortunately, I’m tied into using some pages that are hosted on their server. The defaults are terrible WorldPay branded affairs so I’m using their “Payment Page Editor” to bring it into line with the rest of the site. It’s a shame that the “large amount of flexibility” that their system offers doesn’t actually allow you to do anything useful. Oh look, I can change the text colour and even that button over there. What does that do? Ah, I see, it spits out some lovely nested tables and loads of <font> tags – great, exactly what I was after. I can also add a header and footer, but since there’s no access to the <head> of the document I can’t link to a CSS file. Great, so I need to bash in all the styles inline. OK, now I need to save the file and preview it. Getting there, let’s go back to edit again – AAARRGGGH, it’s mashed all the whitespace. XHTML and inline CSS all on one big line – magic, just magic.

Right, so I’ve worked out that you need to edit the XHTML/inline CSS mess in a text editor and copy it over to the WorldPay panel for each change if you want to stay sane, and I’m trying to fudge all these CSS rules to try to work, because I can’t declare anything on the <body>, when I happen upon something in the documantation that has an example where the <body> is redeclared in the header. Thank God – now I can apply the same sort of CSS as on the rest of the site. Going on that logic I add <head> to the header, but it get’s redeclared rather than merged! EH? WTF is going on? I must be missing something, there must be a better way than this.

Surely, surely, surely when they developed this system there must have been someone, somewhere with just a teeny bit of web development savvy who they could have employed to get this done properly. It’s embarrassing, in fact it’s worse than that – it’s a barely usable piece of shit, and that’s exactly what I’ll tell WorldPay when I e-mail them some of my comments later on today (OK, so I’ll moderate it a bit). Maybe the scariest thing is that I’ve got a couple of Royal Bank of Scotland bank accounts, and RBS own WorldPay. If they can’t even do this without screwing up, what’s going to happen to my money?

Maaaaan, what a way to spend a Saturday. To make matters worse, I don’t see much evidence of the terrible weather here. In fact it’s sunny, and Aviemore has been getting a frighteningly windy 13MPH. And, relax. It’s bound to be good weather tomorrow, it’s just got to be…

Note: in all fairness, I’ve been very impressed with RBS banking so far, it just seemed like a cool thing to write :).


6
Dec 04

Worldpay intergration documents

Just in case anyone else has as hard a time as I did finding information about the Worldpay API, I thought I’d provide an embarrassingly obvious link. Was I just being blind and stupid? Very possibly. Although I do still find it strange that Google didn’t help me find any tutorials on the matter. And, yes, I do still find their product range confusing. N’mind!


21
Sep 04

MVC for web application architecture with PHP

Warning: techy post alert, but if you’ve got past the title, you might just be interested. I’m just experimenting with MVC in a web environment at the moment, so please don’t take anything I’ve written here as gospel. I’ve written this mostly because it could be interesting to read it again in six months – “What was I was doing that for?”. There are several good sites to read about this stuff if you’re interested, although the nature of it means that it’s all open to interpretation and modification.

I’ve been messing around with MVC as a framework for SC3 recently. Mostly I’ve just been trying out ideas and getting a feel for how things work to see if I want to use MVC at all. Because it was the first site I had developed with any sort of database interaction, ScottishClimbs currently runs almost completely on procedural code. Recently however, I have been frustrated by looking at the spaghetti mess of code that was left over from SC2. At university I did a lot of work with Java, and have a decent understanding of object-oriented programming, so it made sense to start looking at object-oriented frameworks for the development of the new site.

I already knew a bit about developing applications with MVC and have recently done a lot of reading about converting that to web applications. MVC is a great way of separating business logic from presentation logic and data logic, and this is the aspect of MVC that I really like. However, it has some features that seem awkward for web development. In order to stick to the MVC model a lot of people are having a single controller (FrontController) and limiting access to the entire site to one page (usually index.php). The controller then takes various $_GET parameters and determines what view (page) to display. I daresay a single entry point for the app has some advantages, but for me it seems to lack flexibility and certainly complicates the code. The alternative is to simply structure the site into pages as normal (index.php, viewpost.php…) and have a controller per page (PageController).

Once I’d implemented a couple of pages though, it was apparent that the PageControllers were doing little more than running some procedural code, so I scrapped them and moved the code to the page itself, which simplified things again. I think object-oriented programming is great, but I’m not sold on the idea that we need to make everything into objects just for the sake of it.

At the moment I’m at the stage where I’ve implemented a few pages, all of which access data only, but the trickyness and ambiguity of MVC is starting to show. Plenty of ‘Where does this belong?’ type of thoughts are floating around my head. I’m not sure the situation is helped by the structure of the new SC3 site – by it’s very nature accessing the data almost always involves multiple joined tables (how should models be separated: by table? Some sort of logical grouping?) and often displaying the data involves a call to fairly nasty XHTML generation function of some sort (that I wrote last year, thankfully!).

Currently I’m using several models equating to my logical grouping of the site data, the actual page as the controller and one view per page. Some of the models, like the PostModel – used for getting, wait for it… data about posts – have an associated helper class. This class simply provides a set of functions, used by more than one view, for helping to display the data – like generating a list of areas and categories nested in a list of posts. A view builds a page by creating a template object, calling on a helper (if necessary) and setting some variables in a multi-dimesional array (currently $content, $sidepanel, $title and $heading). When the view is rendered by the page it simply displays the XHTML file associated with the template and fills in the variables. I’m really happy with the way the XHTML is isolated from the rest of the application like this and I think the template system I’m using is simple and elegant.

MVC was designed so that the presentation, data and business logic could be easily separated and it does a great job of this. However, it’s not entirely clear what should go where sometimes, and other times things just don’t make sense when fitted into MVC. The model and view certainly make quite a lot of sense to me, the controller just doesn’t fit as nicely. The major drawback for me is the added complexity – there are a lot of different classes floating about – and this is an area that I really want to see if I can improve in my MVSomething system. MVC isn’t the perfect architecture for web development but, so far, I’ve not seen anything better and I think I’ll continue to use some form of it with my development work in PHP.


2
Jul 04

Running PHP in WordPress posts

To display photos from the gallery section of this site in posts, I use PHP to call a function that grabs the details from a database. WordPress doesn’t natively allow you to do this due to the obvious potential security issues so I searched for a plugin to allow me to do it. I found Stevarino and also Pascal’s Hack, but I couldn’t get them to work (despite some help – big thanks Pascal!) so I just started from scratch with my own. Thanks to Stephen and Pascal for demonstrating how to apply filters to stuff in WordPress – I still have much to learn about the workings of WordPress. Spookily we came up with pretty damn similar code.

This is version 0.1, I can’t stress this enough 0.2 0.2.2, an early version – I developed it enough to get it working for my needs and then stopped. It hasn’t had any testing beyond that. In the winter, when I fancy using my computer more, I’ll try to improve it all. Not promising awesome support or anything, but feel free to leave comments and stuff as I do intend to maintain the code at some point. Obviously you should think about who has access to your blog and the code you’re going to be running when using this plugin.

Using WordPress 1.2, copy this code to a file named “runphp.php” and upload it to your “wp-content/plugins/” directory, then enable it in the admin panel. Use &lt;phpcode&gt;echo "hello mum!";&lt;/phpcode&gt; to run some php.


&lt;?php
/*
Plugin Name: Run PHP
Version: 0.2.2
Plugin URI: http://mark.scottishclimbs.com/archives/2004/07/02/running-php-in-wordpress-posts/
Description: Allows PHP to run in posts by using custom HTML style tags
Author: Mark Somerville
Author URI: http://mark.scottishclimbs.com/
*/

/*
run_php
This function runs and outputs PHP code that exists within <phpcode></phpcode> tags.
*/

function run_php($data) {
$tag = "phpcode";
$taglength = strlen($tag);

//html_entity_decode doesn't work! These lines change ' and " instead. Maybe other entities needed?
$data = str_replace(array("&#8216;", "&#8217;"), "'",$data);
$data = str_replace(array("&#8221;", "&#8220;"), '"', $data);
$data = str_replace("&Prime;", '"', $data);
$data = str_replace("&prime;", "'", $data);

while($phpstart = strpos($data, "<".$tag.">")) {
$phpend = strpos($data, "</".$tag.">");
$phptrueend = $phpend + $taglenth + 3 + $taglength;
$before = substr($data, 0, $phpstart);
$after = substr($data, $phptrueend);
$phpcodelength = $phpend - ($phpstart+2+$taglength);
$phpcode = substr($data, $phpstart+2+$taglength, $phpcodelength);

//remove the <br /> and <p></p> tags that WP adds to the code
$phpcode = str_replace('<br />', ' ', $phpcode);
$phpcode = str_replace('<p>', '', $phpcode);
$phpcode = str_replace('</p>', '', $phpcode);

ob_start();
eval($phpcode);
$data = $before.ob_get_clean().$after;
}
return $data;
}

add_filter('the_content', 'run_php');
?&gt;

Changelog

0.1
Initial release, scrappy.
0.2
Fixed problem that meant PHP could only be on one line.
0.2.1
Fixed an HTML entity problem with &Prime; (really need to get html_entity_decode working!)
0.2.2
Fixed another HTML entity problem with &prime; (still really need to get html_entity_decode working!)

Problems with Textile or Markdown?

Jeff suggests that you try changing the last line to:
add_filter('the_content', 'run_php', 5);

Dev note – I couldn’t get html_entity_decode to work at all and ended up just searching for single and double quotes. There are almost certainly some HTML entities that will screw things up. Has anyone had any luck with html_entity_decode?

Regarding html_entity_decode – a recent user contributed note (14/11/04) for html_entity_decode on the PHP documentation sheds a little light on the subject. The function doesn’t work with numeric encodings (which is the first type of error I encountered) and also doesn’t work with UTF-8 encoded text (which I use). I’m going to have a think about character sets and PHP versions to see what the best overall solution is.


11
May 04

Book shopping list

Here are a few books I’m quite keen to buy/read. This list is as much for myself as anything else, but I’m always open to suggestions.


8
May 04

Why it’s bad that Dreamweaver exists

I dislike WYSIWYG HTML editors. They generally create poor code (although the most recent version of Dreamweaver has made steps to improve this), but this is not the real basis for this post.

WYSIWG editors allow almost anyone to very easily create a web site. It will very possibly be complete rubbish, but it will be a web site. WYSIWG editors, no doubt helped on by other factors, have created an image of web development that makes many (non geeky!) people think that it is childsplay to create a web site, and consequently don’t see the worth in contacting a proper web design company. Most people haven’t heard of standards, accessibility or usability and don’t think about fluid designs, link consistency and browser compatibility – yet these are the some of the many little things that can turn a great design into a great web site. Most web users, and many of those responsible for sorting out company web sites, haven’t heard of, or don’t care about, some of the issues that make the difference between the good, the bad and the unbearable.

I have a friend who is a graphic designer and who has just been given a freelance web site to do for one of his clients. Although his graphic design skills are very good, I find it scary that he will be getting paid to create this site – something he very clearly doesn’t have the skills to do. Images will be sliced in photoshop and stuffed onto the screen in Dreamweaver until it looks right in Safari. Different browsers, screen resolutions and standards won’t even get a thought. I’m not saying this as a way of knocking him or his work and I’m certainly not saying that he shouldn’t do the work (I would if I was him), I’m just illustrating my point. Web design is not graphic design, it’s just a shame that people don’t realise it.

If this post sounds like I’m a little bitter, then maybe I am. Mike and I at Visual Output wouldn’t take a job where we had to create and prepare a brochure for print because we don’t have those skills. It’s a pity that very often the same doesn’t seem to apply in reverse.


14
Apr 04

Visual Output web design

I don’t write anything for two weeks, then two new sites are out on the same day!

Mike and I have finally got a website sorted for Visual Output, our web design and development outfit. There’s not much there until we have time to get some more stuff written, but it’ll do for now. If anyone spots any problems or errors, please let me know!

If anyone’s interested we can design and develop most sites, whether they are small or very large with complicated data structuring and user interaction. We aim for clean, accessible sites that are easy to navigate and develop mainly using XHTML, CSS, PHP and databases when required. We don’t create Flash-only websites but we do work closely with another small company to provide Flash and printing services.

Visual Output, VO, seems to work really well. Mike and I both quite like working on the data structuring and usability side of things and tend to come up with some good ideas. I’m a coder and lack the creative design skills needed to make things look pretty. Give me a Photoshop file and I love turning out some well structured code to make it work, but ask me to design a site and you’ll get something geeky like this blog. Mike, on the other hand, couldn’t code his way out of a paper bag, but saves us both by coming up with some wicked ideas as well as being an arty type and damn hawdy at the ol’ Photoshop.


24
Feb 04

Opera 7.5 Preview 2

I’ve been using Opera 7.5 Preview 2 since it’s release a week ago. This is pre-beta software so bugs and some instability are to be expected. Having said that, I’ve found it to be very stable and I use it as my main browser and mail client. I certainly won’t go into all the features here, just a couple of customisations I’m particularly fond of just now. There are too many skins to recommend any in particular.

The in-built RSS reader will now (sometimes) automatically add a newsfeed to your subscribed list if you click on it. It doesn’t seem to work on this site for some reason so hopefully that will get fixed. Newsfeeds are treated as mail in Opera which doesn’t bother me, but it could be nice to have the option of putting them in their own panel.

Opera is just as customisable as ever. Here is the PHP search engine for you to add (by Virtuelvis). As a map freak, I recently added the Streetmap search engine to my list. I couldn’t be bothered working out how to create a new ‘static’ search engine so I replaced whatever was at number 5 as I never used it anyway. A guide to editing the search.ini file is here. If you’re interested, stick this is in the search.ini file in your Opera profile.

The developer’s menu by Dan Booth is very cool for web developers. Sometime soon I’ll create a mega SC menu or something equally sad.

7.5 works with Aspell, for spell checking in textboxes, emails and the like. It’s a little nippy to install, this should sort you out.

Here are some useful links for doing stuff with Opera:

This is only scratching the surface, no doubt there will be another post about Opera at some point.


22
Jan 04

Authentication security

Both Simon Willison and Adam Kalsey have made excellent posts about authentication security. This has come at a very appropriate time as Mike and I are developing an admin panel for SC3 just now. I’ll definitely be implementing a delay in the login script (for starters) as there are only three of us using it and I’m sure we won’t mind. Definitely something I’m going to have a good think about. Any thoughts Mike? (those posts are code free ;)


16
Dec 03

Wind Things re-code

I’m so bored I’ve just re-coded (now offline – it was only some XHTML and CSS!) the Wind Things home page in XHTML and CSS. It only took a couple of hours (most of which was on the left menu – I’ve never really used JavaScript before and was just hacking) so it’s not very optimised or fine tuned, but was an interesting wee experiment. IE, Opera EDIT – Opera 7.5 preview has sorted this and is now spot on – and Firebird all make good efforts at getting it right – the most noticable problem is IE missing the ::s on the top menu because of it’s lack of support for the pseudo selector :after. There’re probably loads of other bugs too, but the point wasn’t to get it perfect.

This isn’t meant to knock Wind Things (they’re shit hot, they sponsor me!) or anything like that just something for me to practice on. I managed to reduce the file size of the page from 20k to 7k, (plus there’s a 4k CSS file and a 2k JavaScript file, both of which would be cached after getting downloaded for the first time). Not to mention the forward compatibility web standards provide…

Mike – would be interesting to see what this looks like on the Mac browsers.


28
Nov 03

Notes on our latest site

This is as much documentation for me as anything else. Mike and I are practically finished our latest site for a kitesurfing school on the Isle of Tiree which is part of the Inner Hebrides off the west coast. The task was to create a clean, good looking static site that is both usable and accessible in a fairly short time (we weren’t getting paid very much for this so wanted to get it done pronto, hence some of the wee errors) – I think we’ve succeeded, but I’m bound to say that, nobody likes to admit defeat. There are still a few tweaks that I want to make, and I’m not 100% convinced about some of the accessibility implementation, but I’m still learning about that.

If you don’t like the graphics, blame Mike. If you don’t like the coding, blame me. If you don’t like the general layout and design, blame us both and we’ll probably blame you. The site is (hopefully) semantically rich XHTML and CSS. The most interesting bit of markup (don’t be surprised if it’s not that interesting) is on the contact page where I used a couple of definition lists to markup the contact info. I hadn’t used definition lists before and I think it’s a pretty fair use of them. I think I’ll continue to use them like that until I see a convincing argument to the contrary. Anyway, nobody likes to read about success so… onto the bugs!

1. The main navigation menu is an unordered list of links. In an ideal world the items would simply be displayed inline and it would be a lovely horizontal list. Due to IE5.0/pc not being able to cope with margin and padding of inline elements I needed to declare them as block elements and float them to the right. This worked well but highlighted a IE5/Mac float bug which displayed the list vertically. The CSS was lovely and hack free until this :(. A IE5/Mac comment parsing hack was used so I could display the menu items as inline. Things weren’t lining up so I used that hack to also remove the fadey line leaving it usable but not over pretty.

2. The second hack came into play when I removed an unnecessary DIV and put the lower header image as a background to the H1 tag. IE5.0/5.5/pc couldn’t cope with adding up the padding and height so I needed to use a box-model hack.

3. The page is set to 94% of the viewport and has a maximum width of 75em (75 times the standard font height) (seems like a decent line length as most lines are cut short by either a photo or a table). This means the actual width of the page will vary as the text is resized. IE/pc doesn’t understand max-width so is always 94% of the viewport. There is a way to set max-width using the proprietry IE feature expression() but it isn’t valid CSS so I decided against it.

4. IE/pc can’t handle alpha-transparency in PNGs so Mike had to rustle up a nifty GIF in it’s place. PNG would have been ideal, buy hey…

5. At the bottom left of each page there is another list (this one needed no padding or margins so could be displayed inline) whose contents are separated with a full-stop which is inserted using the :after pseudo class in CSS. IE/pc (all versions) and possibly IE/Mac doesn’t recognise this so the full-stops are missing. Works fine in real browsers.

6. The “Skip development list” link at the start of the footer list is being a pain in the arse. In the top menu I’ve hidden the accesskey link by setting it’s width and height to zero and setting overflow:hidden;. For now I’ve made the link disappear by going for display:none; but this isn’t an acceptable solution as some screen readers don’t read items like this! EDIT: Donald alerted me to an obvious change (putting the menu above the footer) which meant I could get rid of this link.

7. The footer is, to put it nicely, a bit
screwed in IE/Mac. I really should try to fix this (I haven’t tried properly), but it’s a slow process using Mike as a remote tester. Maybe sometime.


21
Nov 03

CSS transparency and IE

This entry is out of date now, the file I was playing with has gone away!

I’ve come across a nippy little problem when coding the menu for a new site. I’ve got a full width div with a background-image which is a curve, one side of which is transparent. There’s an absolutely positioned menu div which I’d like to slide ‘under’ the image.

CSS:

#menu {
position:absolute;
top:20px;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
width:50em;
max-width:800px;
border:1px solid green;
text-align:right;
}

#lower-header {
position:relative;
z-index:2;
background-color:transparent;
background-image:url(../images/bottom.png);
background-repeat:no-repeat;
height:65px;
margin:0;
padding:3em 0 0 0;
border-right:1px solid #000000;
}

Looks pretty much as it should in IE5+, Op and Firebird but, as usual, doesn’t work as it should in IE – the links are visible, but not clickable.

Any clever ideas for solving the problem without changing the XHTML considered ;-)

EDIT: background image is normally a PNG, but it’s gone funky for some reason so that page is using a GIF.


7
Nov 03

Multiple versions of IE on one box!

Joe Maddalone of Insert Title Web Designs has found a way to run multiple versions of IE on one XP/2000 pc – very handy. I’ve tested them and all seems well, although it does appear that at least one valid box model hack (which I’m using on a site we’re doing just now!) fails in these versions of IE as they still think that they are IE 6.

I didn’t bother to follow his instructions, choosing to be lazy and just grab the necessary files from Skyzyx.com. I don’t imagine the files will live there for long though, must be something wrong with re-distributing Microsoft files like that.

As it’s actually proved so simple to run multiple version of IE on one box you have to ask why nobody (Microsoft!) hadn’t released this sooner. I’m not the only one asking this.

Edit: IE 3 and IE 4 are also now available at the same site. It also turns out that some people have done this for a while now, yet it’s only just become common knowledge – strange.


5
Nov 03

CSS only rounded corners

I found Rounded corners with CSS – Virtuelvis today. Yet another neat little CSS thing that gets stuffed by crap browsers, IE in particular. I know I’m not the first to say this, I’ll bet I’m not even in the first 10, I’m just getting more and more frustrated with browser inadequacies as I learn more CSS.


3
Nov 03

Funky CSS Part 2

The second part of the Sliding Doors CSS article is now on A List Apart. Not read it all properly, but I imagine it’ll build on the excellent first article.


28
Oct 03

Exceptionally funky CSS tabbed navigation

A List Apart, the web site every developer loves to love, was relaunched a few days ago and have started off with an awesome article – Sliding Doors of CSS. The article describes a very nifty use of CSS to create the sort of tabbed navigation system that is usually only achievable with text-images, while of course keeping all of the accessibility and load time advantages of CSS. This has come at an appropriate time as Mike and I are just getting into discussions about nav systems and layouts for a client’s site.

Basically the technique involves creating a horizontal list of links, like the main menu system over at ScottishClimbs and applying a background image to both the list item and the link itself. These images overlap each other but have room to ‘slide’ if the text, and therefore the tab, is increased in size. If you can’t be bothered reading the whole article and just want to see what I’m talking about, check out the final version.

I’m really wanting to improve my average CSS skills over the next few months, hopefully by getting stuck into developing a few more new sites, and things like this really help. This really is using CSS in ways I had never thought of. Very impressed.