A good friend of mine is getting married to his girlfriend of 7-years. I know both of them very well, and offered to put together a wedding web-site for their family, friends, and guests.This was my opportunity to do something I haven't tried before: to build a beautiful and functional cross-browser compatible web-site using only CSS (no unnecessary tables, pixel blocked styling, etc.). Ultimately, the site has to look perfect in IE6, IE7, Firefox 2+, and Safari. If you've done any type of web-development, you know that making a functional site look good in all browsers can be a nightmare. Let alone, making a site that looks good in all popular browsers using only CSS. With a few CSS browser hacks, I finally got everything styled and positioned perfectly. It took a while, but it was worth it. I'm not a graphic designer, but I think the site (jpandmeghan.com) looks great. And best of all, the entire framework is built using only CSS!
Continue reading if you're interested to find out how I built jpandmeghan.com ...
For starters, the entire site is built on PHP. In fact, I'm using the Gagawa PHP HTML generation engine to build all of the HTML for me on the fly. This ensures that all of the HTML on the site will be well-formed; no missed closing tags, improperly formatted attributes, etc. As a result, I can declare the site HTML 4.01 Strict using !DOCTYPE ...
Once I had the back end framework in place, I started working on the styling. The first major styling issue I dealt with was the transparent starfish image in the upper right of the page. The starfish image (http://jpandmeghan.com/images/starfish.png) itself is a transparent PNG floating in a relatively positioned DIV. You may or may not know that IE6 does not like transparent PNG's. So, I had to try a few things to get the transparent starfish PNG to actually float transparently in IE6. I ended up using the Supersleight hack as described here. This involves using IE's conditional comments to souce supersleight-min.js on any pages that requires the IE6 alpha transparency hack ...
Once I had the Supersleight IE6 alpha transparency hack in place, the starfish looked great on IE6. Here's a before and after snapshot:
Once the design was in place, I began building the rest of the site. Specifically, I need to put together a photo gallery and a few other things. I hand wrote the photo gallery PHP, but decided to use a unique JavaScript thumbnail viewer for the pictures themselves. I chose Highslide JS which creates an awesome "zoom-in-and-zoom-out" effect when clicking on a thumbnail. Best of all, Highslide is a free open-source project.
For my JavaScript and DOM manipulation needs, I'm using the stable and popular JQuery library. My document.ready and window.load handlers can be found inside of the site's core JavaScript here. You can also find the site's full CSS here.
That's it! I even impressed myself with this one. It turned out much better than expected; jpandmeghan.com is truly a work of CSS art. Enjoy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Once I had the back end framework in place, I started working on the styling. The first major styling issue I dealt with was the transparent starfish image in the upper right of the page. The starfish image (http://jpandmeghan.com/images/starfish.png) itself is a transparent PNG floating in a relatively positioned DIV. You may or may not know that IE6 does not like transparent PNG's. So, I had to try a few things to get the transparent starfish PNG to actually float transparently in IE6. I ended up using the Supersleight hack as described here. This involves using IE's conditional comments to souce supersleight-min.js on any pages that requires the IE6 alpha transparency hack ...
<!--[if lte IE 6]>
<script type="text/javascript"
src="supersleight-min.js"></script>
<![endif]-->
Once I had the Supersleight IE6 alpha transparency hack in place, the starfish looked great on IE6. Here's a before and after snapshot:
Once the design was in place, I began building the rest of the site. Specifically, I need to put together a photo gallery and a few other things. I hand wrote the photo gallery PHP, but decided to use a unique JavaScript thumbnail viewer for the pictures themselves. I chose Highslide JS which creates an awesome "zoom-in-and-zoom-out" effect when clicking on a thumbnail. Best of all, Highslide is a free open-source project.
For my JavaScript and DOM manipulation needs, I'm using the stable and popular JQuery library. My document.ready and window.load handlers can be found inside of the site's core JavaScript here. You can also find the site's full CSS here.
That's it! I even impressed myself with this one. It turned out much better than expected; jpandmeghan.com is truly a work of CSS art. Enjoy.
Did you find this post helpful, or at least, interesting?