I collect and publish a lot of photos and videos at GodSpeed Car Club events. This is all starting to get very spread out so as a project I've started designing a GodSpeed Car Club Media microsite using HTML 5 and CSS 3.0 to keep up with the times.
I'll go through a few of the links I've used for this but first, behold renderings in Firefox (version 3.6.8) pictured on the left and Safari (version 5.0.1) pictured on the right. This is how it was designed and how it is supposed to look. We do not live in a perfect world which leads me to:
The massive load of fail that is Internet Explorer (version 8) is pictured on the left. Do me a favour, people. Please use a REAL browser. I have yet to come up with a solution to fix this. Setting the background-color property does not fix this unfortunately. More research, experimentation and testing will have to be done... Or Microsoft could make a proper browser? But seriously: more work.
Resources used:
- HTML5 on W3Schools
- CSS on W3Schools
- RGBA colouring [The Basics of CSS3 from WebDesignerWall]
- Footer at the bottom of the screen [How to keep footers at the bottom of the page from Art and Design by Matthew James Taylor]
- Gradients [Quick Tip: Understanding CSS3 Gradients from NetTuts+]
- Resizable background [How To: Resizeable Background Image from CSS Tricks]
I also had a lot of trouble lining up all the floating images in this post... But here it is now!