Use CSS display:table for Layout

For a few years now, web developers doing CSS-based layouts have used floats or absolute positioning for layout web sites to avoid using non-semantic HTML <table>s.

While doable, extra hoops often have to be jumped through (mostly for IE) and some seemingly simple things can be harder than necessary (like equal height columns).

However, for a simpler solution, CSS-based display:table, display:table-row, display:table-cell etc are all usable today across Firefox 2+, Safari 3+, Opera 9+ and IE8. Continue reading

Hiding Content on Web Pages for Accessibility

Web pages often benefit from some text that may not be necessary from a visual design perspective, but offer additional context to say blind users using a screen reader. Some CSS techniques to achieve this include moving text off the screen in such a way that screen readers will still read them out. However, there is a concern that search engines may not like this technique as it could be abused for keyword stuffing and other such practices. What are the implications? Continue reading