Archive for the ‘CSS’ Category

Development Diary: 4 Tips on Working With Fluid Layouts

Wednesday, March 12th, 2008

Recently at my daily job I had the opportunity to work on a 100% fluid layout for a project management web application. During the process of cutting it up in XHTML and CSS, I learned a lot and definitely had a lot of fun moments while making it backwards-compatible with IE6. This article is a collection of insightful ideas and those moments I collected through the development of the project.

(more…)

5 CSS Tips to Make IE (You) Happy

Tuesday, December 25th, 2007

If I could, I’d give you a special present this christmas – I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks – as does IE on Windows – so I can only offer to share with you a couple of CSS tips to ease the pain of working with that piece of crappy software.
(more…)

The Miserable Future Of The Web is Hot!

Monday, December 17th, 2007

It seems the future of web innovation is a popular topic nowadays, as Alex Russel points out in his scortching hot “The W3C Cannot Save Us” Article. In the article, Alex pours down hot oil on standards working groups and incites browser vendors to stand out with new non-standard features as a means to get them recognized and standardized eventually.

Along those lines goes James Bennet with his elaborate essay The future of web standards, and I am pretty sure we are not over with the drama yet.

Now let us just cross our fingers and hope that all that stirring actually produces something edible in the foreseeable future.

CSS Tip #2 – Accessible Image Replacement Technique

Tuesday, December 11th, 2007

Sometimes you need to use fancy fonts to represent a title or name a section on your web site and the usual bunch of browser-available fonts won’t do, because it is too limited. Traditionally you would create a good looking image in a graphics program and include it into the code as an image and append an alt attribute to it containing the title itself. While this is probably the most straightforward way of doing it, it has several disadvantages:

  1. Images do not scale when you increase the text size
  2. With images disabled in the browser, the meaning of the graphics gets lost most of the time, the alt tag helps of course, but is often not enough.
  3. Somewhat related to the previous point, to the browser an image is just that — an image. It does not convey any information on what it represents, like for example, an html title element (h1, h2, h3, …) does.
  4. Graphics-based text is not searchable.
  5. Graphical text is not selectable.

(more…)

CSS Tip #1 – Avoiding Hacks With IE Conditional Comments

Thursday, December 6th, 2007

I am pretty sure that every web designer found himself stuck with one or more of Internet Explorer’s annoying bugs and usually he ended up using css hacks to isolate the problem(s). Well, I believe hacks should be used with caution, if used at all, since you never know what adverse effects it may have on your web site with future browser updates.

Fortunately IE developers provided us with a neat solution to this problem with conditional comments. Just what are conditional comments? Basically they are common html comments with an extended syntax. They are completely transparent to all non-IE browsers, so they validate and are much more future-proof than hacks will ever be.

(more…)