XFN (XHTML Friends Network) is a microformat which represents relationships between people with hyperlinks and the use of a simple HTML tag.
They can represent colleagues, contacts, sweethearts, friends and more!
Based on the XFN icon set by Wolfgang Bartelme I have created a small set of mini icons (9×10 pixels) to represent these links between people. I have also made a CSS file which shows the relevant icon when the correct XFN rel tag is present.
Continue reading “miniXFN Icon set & XFN CSS implementation” »
This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.
Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.
Continue reading “Using Image replacement techniques” »
When developing websites there is one thing I have never kept consistent; the method of clearing floats. It seems every project I take, I seem to do it a different way, well Its about time I sorted it all out in my mind.
For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.
To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.
There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:
- The extra markup
- The Amount of CSS
- Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
- Ease to implement
Continue reading “Experiments with floats: whats the best method of clearance?” »
Most sites on the web are coded using pixels for widths, which is acceptable, however these sites make it harder for users with poor eyesight to increase the text size whilst keeping the layout in place and usable.
That is where ems can help. This guide will explain ems, and show you how to convert a layout to utilize ems.
Continue reading “Going elastic with ems, layout techniques” »
Conditional comments have been part of internet explorer since version 5, but a lot of programmers ignore them.
This article teaches the basics of using conditional comments, and shows some examples of their uses.
Continue reading “How to…use conditional comments” »
As you may well be aware, this has been a pretty hectic week for me, trying to finish all my projects before I leave to go on a well earned holiday.
The main thing on my agenda was the blue anvil redesign I’ve been working on. It all went pretty smoothly, excluding the few set-backs I encountered (see my last blog entry), but all in all it went well and the website was looking fairly nice…in firefox.
Yes, I left the cross browser stuff until last, it would only take an hour or two, right? How wrong was I. This was my day from hell and I have the coffee breath and bad temperament to prove it. With any luck the problems and solutions I used may be
helpful, and save others from a hellish day that I experienced.
Continue reading “My day of buggy hell with IE - a css story” »
This article has a wealth of links to web design tools and utilities you WILL find useful. These are tools I have found, and use myself, not ones I have created! All these tools run in the browser, and don’t require you to download any files.
Continue reading “Web design tools listings” »
