Archive for CSS

Adjusting Column Height Using CSS

// February 20th, 2010 // No Comments » // CSS, Design

by Chuck

If CSS was supposed to be a big improvement over the early years of HTML-based websites, why is it still so challenging to design websites using CSS? Some of us who have been making websites since the early days of the web are often left wondering why CSS doesn’t easily do some layout tasks. CSS is supposed to separate the layout and style of the pages from the content of each page and for the most part CSS is a welcome standard. But CSS does a poor job of handling some obvious layout tasks, such as making the height of columns in a multi-column layout match. I know I’m not the only one who has been trying to figure this out.

This blog will be featuring tip and techniques that address annoyances like the CSS column height problem. Today, we’ll share a link to a tutorial at TutWow about this problem: CSS 100% Height

Solving Once and For All Cross Browser Compatibility

// October 22nd, 2009 // No Comments » // CSS

by William

I’ve done some thinking about how to approach this better…Here’s what I’ve come up with. It starts with the worst and gets better, not the other way around.

This method also accounts for browser usage stats.

1. Get a workable second computer with IE installed. Nothing special. Just something that turns on and loads/reloads Explorer.

2. Create 1st Design on/with IE. Go for 6 (19.6%). Now you can finally >:XX (get rid of designing for) IE5 (0.1%). By my quick calculations, IE6 could be with us for another 3-4 years. Unless usage trends change dramatically with Firefox/Chrome/Other new Browser. Kinda depends on the rate at which people are buying new computers.

3. Check to make sure code validates.

4. After first version is done/concluded, name the CSS “explorer.css” and put it away. That’s your IE version and should only be changed when absolutely necessary.

5. Create filter system for CSS to steer IE to explorer.css (Watch out for Linux going to that file). May need javascript. When loaded with other OSs, the page should be unstyled.

6. After transferring file, turn off old computer. Design now for firefox (44.4%), with all the bells and whistles you want. Css Code can be new or different or whatever you want. One programmer even creates different versions for “modern browsers” and provides a basic/less-pretty version for IE6 (Transcending CSS book).

7. Check again that new code validates.

8. Check for Safari (2.7%) and other OSs like Chrome (3.6%) and Opera (2.4%). Some give and take might be necessary here, but tweaking should be minimal, since they’re all good browsers.

9. Final check for IE7/Vista (Find a machine that runs it). If it needs tweaking, use IE conditional comments. Could just skip to #10 if you can’t get it.

10. Go to browsershots.org and cross your fingers.