BytesizeCSS

RSS feed

What is BytesizeCSS?

As a front end developer I've come across all kinds of XHTML & CSS challenges and have also unintentionally become a reference guide to those that know me. I found myself answering the same questions over and over, so I decided to create BytesizeCSS. You will find the answers to these questions as well as my solutions to various challenges all blogged here.

Image replacement for h1 logos - semantic or not? 05.01.2009 @ 12:30pm 146 comments

For years I have used the well known image replacement technique for my logos and placed them within an <h1> tag but I recently started to wonder exactly how semantic (or not) using that technique actually is...

Read on

The #id.class selector in IE6 28.08.2008 @ 02:11pm 76 comments

The ability to style an element using it's #id and several associated classes is often something that people believe is not possible in IE6. In some ways, that is true but it is possible to get this working with XHTML and CSS alone.

Read on

Teaching back-end developers to code semantically 24.08.2008 @ 11:45am 39 comments

While working on a large application in my full-time role, I created a generic stylesheet to handle form styling and came across a few problems with the developer/designer split within the company. Developers often need to write HTML for forms but do not always know/care about semantics/accessibility and this sometimes means inaccessible/non-semantic forms go unnoticed throughout the app.

I wondered if there was a way I could force the developers to code semantically without having to sit over their shoulder and walk them through it each time they needed to mark up a form, and then it came to me.... use more specific CSS selectors.

Read on

Fix hasLayout with one line of CSS 10.08.2008 @ 08:16pm 34 comments

First of all, if you have no idea what hasLayout is, take a look at this excellent explanation and then we can begin!

As that page explains, there are several ways to fix the issue by setting height/width/position etc. on a particular element that is missing hasLayout but when coding an XHTML & CSS layout this can amount to several selectors containing whatever hasLayout fix works/you pick at the time. It can get messy and is only really necessary for IE.

Soooo... why not create ONE style that fixes all your hasLayout problems, by default, for IE only?

Read on

The clear fix 10.08.2008 @ 06:51pm 61 comments

If you often create layouts with XHTML & CSS and end up appending the <br style="clear: both;" /> or <div class="clear"></div> 'fix' to your markup when a containing element does not wrap it's floated children, then now is the time to stop! There is a much more efficient way to acheive this with CSS alone.

Read on

1. Older entries »