View Comments

Are you a browser elitist?

There are two parts to an interesting overall article over on Derek Featherstone’s Box of Chocolates. He poses the questions: Are there browser elitists? If so, why are we that way?

For instance, most of us know that Firefox is a better browser. We have all heard about the better security, but as web designers, some of us know that Firefox also obeys more of the rules and tricks in CSS. Featherstone, like me, and like most other standards-focused web designers will implelement little tricks and “features” into a site. It will work great with Firefox, but for IE it might not. Instead of using javascript or a small hack to get the effect to work in IE, we just brush it off saying “IE sucks.”.

Although “IE sucks.” is a very true statement, shouldn’t we suck it up and make the effect work in IE? I think so. I’m not perfect, but I do try to get most of the features and tricks that I find “important” to get to work in IE. For instance, the Quick Hits section on the right of the front page, didn’t always change to black text when moused over in IE. Why? Because IE doesn’t support the :hover pseudo class in anything other than a < a > tag. If fixed it my incasing the who block of text in a < a > tag. Not perfect, but now it works in IE.

Whether we like it or not people still use IE (As of yesterday 53.7% of the visitors to this site, still use IE) so we need to do something. However there must be a careful balance in place. I have spent too much time at work trying to get a simple effect to show up in IE…there needs to be a limit where you need to stop. Not just for your own sanity, but as Joe from Gadgetopia wrote, it could be costing your clients money too.

Links: Browser Elitism Part 1 | Part 2

View Comments

Firefox Extension: Aardvark

So as I causally stroll through the new featured sites on CSS Beauty today, I stumbled across a firefox extension called Aardvark. This is a neat little extension. What it does is nothing…until you activate it on a page and then it will place a red border around each CSS element on that page when you mouse over it. It also displays a label on what the tag is and what is the ID or CLASS is for that element. Don’t understand what I’m saying? Go to their page, and click the demo link on the top of the page.

Now, the site says its “for everybody” but I really don’t see my girlfriend using this extension. However web designer, or hobbists, especially those just getting into CSS, can and should use this alot. I still will go into my CSS file and add a red border around objects so I can get a better handle on the spacing, with this nice little extension, I won’t have to.

There are also some keystrokes you can make to remove or move an element within the page, but I just really like the border thing.

View Comments

A Simple CSS 3-Column Display

I’m currently redesigning a the front of a website for my employer and I decided to try a get going with a 3-column display within a block on the page with CSS. For those that aren’t familiar with CSS, doing a 3-column layout can be a real pain in the ass.

I, as all good netizens do, went to Google first to find a nice way to implement this. I figured that I could avoid reinventing the wheel if I could just find nice examples on the web. However all I came up with were display techniques that were for the whole page to be a three column layout. This is not what I wanted and scalling their techinques to a sub-block version wasn’t producing nice results.

I decided to go off on my own to solve this problem and I ended up finding a more elegant way to do this than any of the other examples on the web I could find.

… Continue Reading

View Comments

PHP Sessions Weirdness

I was having one of those insanly frustrating problems with PHP scripts, my new Shopping Cart, and sessions the other day. I finally figured it out with the help of new favorite php function.

Turns out it was kind of a weird problem, so I wrote it up for the collective learning of the world.

Already got my good deed out of the way for today! ..did you?

… Continue Reading

View Comments

Ajax: Who says you can’t just make up a name for something?

You’ve seen Google Suggest and the new Google Maps right? (If not, check them out.) Well then you have been playing with, and probably hearing about the new cool web technology: XMLHttpRequest, or as Adaptive Path has recently decided to call it: Ajax

If you would like a good article about how this new technology works, give it a read. If you would like a good example of a company just slaping a name on a technology that has been around for a while now, well give that same article a read again.

I know, I know. If you know about web development, there are about 30 of these “Here is what XMLHttpRequest is…” popping up daily, but this is the first one that named it, so I thought I would give it a little attention.

View Comments

MSN & CSS

If you haven’t noticed, MSN has gone through a bit of a redo. I am squarly in the camp that doesn’t like it, I think it looks a bit ugly. Ugly might be a bit too strong a word, but my overall feeling is that it looks unfinished. In fact when I first saw it, I thought that they had messed up and accidently made a testing site live. Any way, my thoughts aside, there is a good article discussing their new redesign at Stop Design. The article is good, but like most good sites, the comments are better. There is some good discussion going on there and they say that they have been read and linked to by people in Microsoft’s design team.

Let your voice be heard by Microsoft, go read a bit, then post something intelligent.

Link: MSN goes CSS

View Comments

The Flickering Problem Google Adsense

If you have been to this site in the day and a half since I made the switch to the new design, then you might have noticed a very weird problem that I have been battling today. “The Adsense Flicker” For some reason, that I still don’t understand, when you hovered over a link on the right side of the page, it caused the ads displayed by Google’s Adsense program flicker a ghost of itself where your mouse was.

Initially I thought this was a by product of not removing all of my javascript code I was toying with earlier, but after removing any reference what-so-ever to the fact that I ever thought about that, the flickering still remained. I played with my CSS file for quite a while untill I got serious and did a Google Search. I returned a lot of message board postings, which ususally return results, but are more often than not, buried in mindless drivel. After reading through those I saw a lot of different guesses and “soltions” all of them different in some way. However there was a common thread: Link hovers with border manipulation.

Turns out after a quick search of my CSS file, I had left some ill-concieved lines of CSS in my a:hover tag. Once removed, the flicker was gone.

a:hover {
color: #990000;
border: 0; <-- Bad CSS! Bad!
}

Mystery solved. But now the question remains…what the hell was I doing with “border: 0″ in my hover anyway?

Don’t code websites drunk kids!

Update: This article seems to have made it to the front page of Digg. So welcome Digg users! Feel free to poke around, leave some comments and come back anytime.
Pages ... 1 2