If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
So I was in the middle of setting up this site from scratch and was planning out a layout. I could simply use one of the other online web layout generators but this time it would not be. What's so complicated about these layouts? If I know CSS I could design one myself. Right? …somewhat.
It's not as simple as it sounds. I discovered it the hard way. I am one of the persuasive lot and I made it. The result? Well, unlike the expected I ended up programming a layout generator myself. It's a (biological) culture of PHP mixed with XHTML mixed with CSS garnished with some JavaScript to display Adsense.
The main problem is basically due to the difference in rendering of various browsers. White Internet Explorer 7 claims to have leaned towards W3C standards, it's far from reality. Not a personal favourite of mine, I prefer it over Internet Explorer 6 in absence of Firefox. Firefox works for me and more than 90% of my visitors use Firefox.
The main issue people face is because of the buggy box-model rendering of Internet Explorer. The only way is to strip all the margins and padding of the box that you want to render and specify them on a per-element basis. Even the borders sometimes cause issues. The box-model may be a good topic for another day.
Another one if because of the UTF-8 BOM that tends to drive people nuts. It's simply tricky to figure out. And once you've got this one figured out you come across another one.
Sticking to standards. A subject for another post, standards are at the bare minimum the justify why things don't work in the visitors' browsers as expected.
Finally once I had the CSS issues figured out, I realised the difference between the column heights make it look odd. So I dug into the realms of php.net to explore the powers of GD Image library to generate a colored PNG with colums the size as specified in the input. So essentially the colors that you see in the three columns are in face the background-image generated by a php program real-time.
The 3 column CSS based layout generator finally came live and Binary Turf is the first site to use that. I hope you find the layout generator of use and utilise it to design your own website.
{ 0 comments… add one now }