Archive for the ‘firefox’ tag
web design, and differences in browser rendering
Admittedly, it has been a while since I last really truly developed a website.
Funding at Columbia University page screenshot, 27Aug2009
The FaCU site wasn’t so much of a site as it was a page, and really, I feel I could have done a better job if I weren’t so ridiculously busy Senior year, and if I were more up to speed on using CSS to lay out websites.
Every time I’ve done this, beginning seven years ago, I’ve hit this block around how to manage the layout of a site. The old way, working with browsers that didn’t correctly render CSS styling code, a lot of people dealt with the problem by using <table> hacks, using these tags to generate a website layout composed of “invisible boxes”. All fine and good, except that it made changing even the smallest design element on the site was a huge undertaking, because every box was made to align and fit together like intricate pieces of a puzzle, and adjusting the thickness of one border or the geometry of one cell within the table, even by one pixel, required tweaking of every element around it, sometimes even going back and re-generating images or other graphics.
Current Garfield Messenger website screenshot, 27Aug2009
My first effort at using CSS to lay out a website was in high school, when it became my project to design and build a website for the high school newspaper. I used it to learn not only PHP and how to interact with a MySQL database, but really everything that would be involved in developing a website. It never became as full-featured as I wanted it to be, and it was eventually wiped out in favor of something less complex, and then again more recently for a WordPress-backed system.
Long story short, I tried to learn CSS in high school, found it supported by the various browsers available at the time in a very inconsistent manner (between browsers), and ditched it because it was too confusing to figure out how do exactly what I wanted with it.
Capstone Industries - iQueue Dispenser System
I came back to CSS during my Senior year at Columbia while I was working on not only the FaCU website, but also the website for my Senior Design Project. I tried to adhere to only the most widely available fonts, and the lowest common resolution for both sites. The result: fairly ugly sites, but they get the job done.
Fast forward to today, when I’m now working on moving all of the lab’s most commonly used inventory books into a user-friendly digital form. CSS has better support across every browser, and everything just makes more sense now. No idea why.
Still, CSS is still rendered with quite a few annoying quirks. Take, for instance, the following page layout:
Lab inventory site
Renders just fine in Chrome, Firefox, and IE8. The left navigation panel and the main content to the left are spaced and positioned properly. In IE7, the main content title renders where it should, but the table appears at the bottom, under the navigation block. In Opera, the positioning offset I used to place the content area to the right of the navigation pane doesn’t appear to be necessary, so there’s a giant gap where there shouln’t be one.
A better situation than I was working with seven years ago, but still irritating.