eightdotthree » XHTML/CSS

HTML5, CSS3, Microformats and Disqus

Ryan — Sun, 23 Jan 2011 19:24:39 +0000

I can add captions to photos

I spent the weekend updating this site to HTML5, CSS3 and Disqus in an effort to refresh things and learn more about the new technologies for work. I haven’t made any effort to test for IE compatibility yet, and I don’t know when I will.

I created this theme in 2008 so it needed a fresh coat of paint and the hope is that with this update I can move forward with a couple ideas I’ve had for a long time now. No pressure though.

I also updated my sidebar to support WordPress widgets and marked up my contact page with the hCard microformat.

some of the tools I used

Critique my code and design in the comments.

HTML 5′s “real deal” video player

Ryan — Tue, 02 Feb 2010 22:32:59 +0000

update, 2010-02-03 – Tried it again this morning and had the same results. CPU spikes well over 100% and the UI is unusable.

John Gruber writes,

Seriously, this is the real deal — full-screen H.264 playback with no Flash, no browser plugins, full iPhone OS support, and sane CPU usage, better in every single regard than any video player ever made with Flash.

Have a look for yourself.

What I experienced is nothing like Gruber describes. I saw my browser lock up and my CPU usage spike and stay spiked while the video played. I sent it to Matthew and he experienced the same performance issues.

I look forward to better implementations and support from browsers. Better performance, real full screen, sharable implementations.

BarkleyREI Launches VisitAnnapolis.org

Ryan — Thu, 03 Apr 2008 14:21:52 +0000

I only worked on the homepage Flash piece and a small interactive map but I really like the way it all turned out. Props to everyone at BarkleyREI who worked on it.

VisitAnnapolis.org

IE7 Floats Not Clearing?

Ryan — Sun, 23 Mar 2008 14:09:56 +0000

I ran into an issue this weekend with IE7 not clearing my floats correctly. I had a wrapper with a background applied to it and then a content div with floated elements in it. The background was not repeating all the way down the page, and was ending before the content div. I was using my normal methods of clearing floats and of course the page worked fine in Firefox and Safari on the Mac.

After some searching around looking for why this was happening I discovered an article at Position Is Everything that introduced me to a new clearing method which is far more elegant than the solution I was using previously.

You apply the .clearfix class to any div containing a float and its cleared!

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */

Roger Johansson also suggests adding the following code to a <=IE6 specific CSS file in order to make sure it works in earlier browsers.

clearfix {height:1px;}