Archive for the 'CSS' Category

Graphic Nav Bars Using One Image Only

Tuesday, October 9th, 2007

Remember when, for a five-section graphic nav bar we would have 15 images … five images for the Off state, five images for the Hover state, and five images for the On state? And then we cleverly had just five images – one for each section – in which we combined the Off, Hover, and On states? Well lately I’ve been taking this trend to it’s logical conclusion … one image for everything. That’s right, for everything.

screen shot of nav bar using one image

Using background positioning in CSS, this is actually pretty easy to accomplish. Now you only have one image to create, and it has the extra bonus of taking care of any pesky little IE flicker problems. Here’s how to do it …

more ...

My First Real Celebrity Spottings – 10 Years in CSS

Saturday, March 10th, 2007

So I’m sitting here in a SxSW panel with Doug Bowman, Molly Holzschlag, Eric Meyer, and some tool from Microsoft (he just called himself a tool … I’m not just being mean.) He’s actually Chris Wilson, an IE Platform Architect. He seems nice enough, and I’m trying to get over my predetermined hatred of him based on his employment.

more ...

Real-world CSS Zen for Your Site: Published on Vitamin!

Thursday, January 4th, 2007

I’m ridiculously thrilled to announce that my first Vitamin article, Real-world CSS Zen for your site has been published! It is about realizing the standards hype by making semantic layouts your first priority.

more ...

My Take On Browser Testing Order

Wednesday, December 13th, 2006

Recently I came across this article on Browser testing order in which the author suggests that you build and test your web sites in the following order:

  1. Firefox/Flock/Camino on OSX
    (he says, “Firefox is my development browser during the first phases of CSS development. No other browsers in my dock gets opened.”
  2. Firefox/Flock on Windows XP
  3. Safari on OSX
  4. Internet Explorer seven
  5. Opera on OSX and on Windows XP
  6. Internet Explorer 6 on Windows XP

I feel the need to, respecitively, differ on his take.

more ...

Three-Level Drop-Downs/Flyouts – IE7 Style

Tuesday, November 7th, 2006

Some things really frustrate me … I mean REALLY frustrate me! One of those things is the CSS drop-down or fly-out menu. I know – it’s supposed to be simple and easy, ala HTML Dog’s Sons of Suckerfish. Yet, somehow, it’s never actually easy – layouts need to be changed, new bugs having to do with those layouts are uncovered, javascripts and htdocs that worked perfectly on other sites mysteriously don’t work now. Almost every time, I think to myself, “This is going to be easy! I’ve done something very similar to this recently!” And almost every time I am wrong. There’s always a new wrench in the works.

Well, this time the wrench was IE7. I had a functioning drop-down/fly-out menu which made use of the Hover Whatever method, but for some reason, SOME REASON which I couldn’t for the life of me discover, IE7 just would not display that third-level nav list. The second level would appear just fine, but that third level was invisible … would never show itself upon hover. I tried absolutely everything I could think of – I rewrote the code again and again, trying angle after angle. But no matter how I wrote it, I just couldn’t get it to work for all the tea in China. Finally, FINALLY (can you sense my frustration?) I found a solution. A weird solution which didn’t make any sense to me at all, but a solution nonetheless.

more ...

Still Having Difficulties With Floats In IE? Try Using Borders or Padding Instead of Margin

Wednesday, November 1st, 2006

We’ve all been frustrated by float bugs in IE – all versions of IE. There’s the Double Margin bug, the Drop Float bug, the Three Pixel bug, and the myriad other mysterious float problems.

more ...

Becoming A Tableless Guru

Wednesday, August 2nd, 2006

This morning I received an email from someone who reads my blog. He asked, “Can you send me some links to help me become a tableless design guru? My group uses nested tables everywhere and I want to be the catalyst for change but … I am not up to par yet.” I have had some form of this question posed to me numerous times and, I’ll admit, I’ve been rather derelict in responding. So if you are one of my readers who have in the past asked me for links, books, or other recommendations on how to master CSS then please forgive my non-response. I applaud you for wanting to move forward and for your thirst for knowledge. I really do apologize if my lack of response presented you in any way with a little speed bump on your road to Web Standards.

The reason that I haven’t responded in the past is that, quite frankly, I felt overwhelmed … because I really didn’t know where to start. Sure, there are some pretty good books out there, and sure, there is quite a long lists of blogs that I try to visit regularly – and I will tell you what these are in a moment – but the truth is, at least for me, I had to pretty much eat, sleep, and breath CSS for a while before I even began to feel like I sorta kinda knew what I was doing.

So, how exactly do you eat, breath, and sleep CSS? Well, I can only tell you what I did …

more ...

CSS Face Lift

Friday, June 16th, 2006

The other day I was charged with implementing the realign of Energy Muse, a site I had coded last year. Energy Muse had redone their logo, and therefore wanted a site-wide facelift that would reflect their altered branding.

This was the first time that I had been involved in the realign of one of my own sites. Not to toot my own horn but I CAN’T BELIEVE HOW EASY IT WAS! Seriously, I was amazed to see a real-life zen garden type switcharoo. I did not touch the html. Not even a little bit. Uploading a few new images and an updated CSS sheet was all that was required to transform this:original home page

Into this:
home page with css face lift

more ...

Magnifying Menu

Tuesday, May 30th, 2006

Working on a recent project, I was asked to create a “dock effect” (similar to the doc on a Mac) for a row of thumbnails. I hunted around for quite some time for a decent javascript for this and really came up empty handed. So I decided to use css to not exactly mimic this effect, but at least echo it. ;o) Here is what I came up with.

screenshot of magnifying menu

more ...

Two-Sided Expanding Headers

Saturday, May 13th, 2006

This week I was working on coding the home page of a new project. The first thing I noticed upon reviewing the psd (designed by the fabulous Hong Vo of Namaste Interactive) was that the header graphic was to extend in both directions indefinitely … but that it was different on the right and left sides. Huh … how to handle this? I couldn’t simply repeat one strip at the top of the page. I didn’t want to make one huge graphic with one pattern on the left side and one on the right and then center the image … that would work, but it would require a huge graphic! Any other solutions I initially thought of would create a horizontal scroll bar to be ever present. What to do?

screen shot of header extending

more ...