AMAZING CSS website

http://www.stunicholls.myby.co.uk/

I ran across this website while debugging a horizontal navigation menu that used <LI> elements to hold the data and CSS to apply the horizontal formatting.  The old menu was great - but we needed to modify it to support RTL.  When we flipped the page, the menu didn't flip with it. :-(  Thanks to this webreference tutorial for a reference to that AMAZING CSS website!  And the answer to today's puzzle. 

Along the way, I also picked up this reference that explained the padding/margin property shortcuts.  As well as one of those simple box pictures to remind you exactly where the margin, padding, border and content really sit. 

And this reference for browser-specific CSS hacks and references to interesting websites like browser stats for the internet (81% for IE6 and 10% for Firefox), an archive of installers for old versions of browsers, and this tool for sending you screenshots of your website as viewed by different browsers & platforms. 

posted on Tuesday, September 19, 2006 5:46 PM by snyholm

Comments

# re: AMAZING CSS website

Great collection of CSS releated links Steve. My favorite is BrowserCam. We should use that for our site :)

I think I'll install Navigator 1.0 tomorrow. Heck, I just used lynx the other day.
Tuesday, September 19, 2006 8:56 PM by Scott Stanfield

# re: AMAZING CSS website

Interesting set of links, Steve.

One thing I disagree with. Browser hacks are evil because they won't work with new versions of the browser the hack was intended for. Don't learn them! This post sums it up nicely http://www.thinkvitamin.com/features/css/stop-css-hacking

Use IE conditional comments instead.
Tuesday, September 19, 2006 9:05 PM by Alan Le

# re: AMAZING CSS website

Thanks for the link, Alan. Interesting read! I agree - IE conditional comments are A LOT cleaner than browser hacks! See http://blogs.vertigosoftware.com/alanl/archive/2006/09/08/IE_Conditional_Comments.aspx. We use them on our current project. I'll keep using them except for the rare problem that conditional comments can't solve.

Whether we use the hacks or not, it is good to be aware of browser hacks and bugs in browser rendering. Knowledge = power!
Wednesday, September 27, 2006 7:38 PM by snyholm

# re: AMAZING CSS website

So the new "web standards" for "web 2.0" are table free, right? Well, sometimes using tables is completely appropriate... if you are presenting some truly tabular data.

For reference, read the "W3C Techniques for Web Content Accessibility Guidelines 1.0"
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-table-headers

and also read the "Web standards checklist"
http://www.maxdesign.com.au/presentation/checklist.htm
Thursday, October 05, 2006 5:09 PM by snyholm

# re: AMAZING CSS website

... and thanks to Rob M for pointing this out ... the article "Accessible Data Tables" gives some clear examples on how to properly make your tables (summary, caption, th, abbr, thead, tfoot, tbody, colgroup, rowgroup, and more)

http://www.usability.com.au/resources/tables.cfm
Thursday, October 05, 2006 5:22 PM by snyholm