Hawidu CSS

Makes browsers play nice, with some eye candy.

Why Use Hawidu CSS?

It's a respectably-small CSS file that does a few important things right off the bat:

This is a fieldset
  1. This is a pillbox:

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.


As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

Not really quoting a block of text; please forgive me. I just wanted to point out that the quotation mark shows up on browsers that recognize blockquote:before, and all mention of the mark is within that selector. So, if you have an old or crummy browser, you see a plain blockquote with just the left border and background.
As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

	This is a <pre> element.
	   See three spaces?
	Is this on a new line?
	Yeah, PRE is pretty cool like that. Why don't we just make our webpages as just one big PRE element?

As Eric Meyer shows in his blog post, Formal Weirdness, form elements are pretty much impossible to target and style consistently across browsers. However, CSS2.1 selectors like can give some expected results. In cases of inconsistency, form controls in Hawidu still resemble their OS-inserted counterparts enough that usability should not be affected.

When I wake up, before I put on my makeup; I say a little pray for you. While combing my hair now, and wondering what dress to wear now, I say a little prayer for you. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

code{color:#ffcc44;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Good Table

Col OneCol TwoCol Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three

Shitty Table

Data OneData TwoData Three
Data OneData TwoData Three
Data OneData TwoData Three

Text-level markup

Some of the elements tested above are typically displayed in a monospace font, often using the same presentation for all of them. This tests whether that is the case on your browser: