Cooking with Webstandards! Taste the full flavour of the Web

Filtering CSS February 22, 2005

Again this is a post that was inspired by ongoing discussions with students of the IWA HWG CSS workshop. Some of it has been widely covered over the web , but I thought I'd summarize a bit what I found most useful and provide a small link collection.

When it comes to CSS hack's and filters I am the kind of developer that really tries to avoid them. If there is something to be done against minor glitches I tend to use CSS filters and manage the used hacks in several different files that are served to the browsers in question. Most of the main concerns l have with Internet Explorer versions 6, 5.5, 5.0 on Windows (i. e. 1px offset with absolute positioning, initial font size issue with the 5.x branch and the broken box-model.) and Internet Explorer on Mac (for example the miraculous margin-right: 15px added to absolute positioned elements).

So my main strategy is to link to main Stylesheets within my (X)HTML files. A main.css containing the complete hack-free styles (organized probably in the form of further linked style sheets) and a filter.css that contains links to browser specific styles and adjustments.

<link rel="stylesheets" type="text/css" href="main.css" />
<link rel="stylesheets" type="text/css" href="filters.css" />

A schematic illustration showing the file structure described in the next paragraph

→ Continue reading "Filtering CSS"

12:14 PM | Let Cool | Other ingredients (5) | Menu: Fruits & Veggies | To Top

MacOSX on Windows XP: Revisited January 24, 2005

Some of you might remember that I recently discovered Pear PC. Pear PC allows to run a Mac OS under Windows XP. As this makes for an incredible useful browser cam, it admittedly has some downsides. One of them was the emulation being very slow. The other problem l had was that I couldn't use the internet connection of the host computer. Every time I wanted to check a project on a Mac browser I had to create an isofile and make it appear as a virtual CD volume by assigning it to the Pear PC config file.

I am very glad to tell you that internet connection is no longer a problem. With the new version of Pear PC 0.31 and MacOSX 10.3 it is now very easily possible to share files and internet connection using a proxy on the Windows machine and the SMB protocol.

Additionally, the speed problem was addressed. It still isn't a very fast emulation but browsing the web is now quite acceptable.

Screenshot: MacOSX under Windows XP

As you can see on the screenshot above MAC OSX identifles my Pentium 4 computer as a G3 PowerPC.

Screenshot: Running OSX under Windows using a shared internet connection

All in all I am very content with my own browser cam, how being able to use Safari 1.2, IE 5.2, Firefox 1.0 and Opera 7.5.

If you wanna know how it is done, there is plenty of information on the official and the community site:

Otherwise, please don't hesitate to drop me a line.

04:57 PM | Let Cool | Other ingredients (1) | Menu: Personal Tidbits | To Top

T.I.D.U. - Google AdSense Display January 14, 2005

T.I.D.U.: Things I don't understand

To be honest, I am not a big fan of all those AdSense littered blogs, but I thought contributing to Andy Budd's great BlogAid project would be a good idea. So I applied for AdSense and was quickly approved. Generated my bit of code, implemented it on this page's homepage and....nothing happened.

To be honest, I really feel quite stupid I can't figure out what's wrong here, but then I decided not to waste any more time with it and instead ask you!

I suspect that some kind of script blocking is at work here cause i clearly can see in my statusbar that a connection to google is made each time the page is loaded (and the AdSense Report does indicate it as well). To my big surprise the Ad is displayed by Internet Explorer on Win and Safari on Mac, but not in Mozilla, Firefox or Opera. Leaves me a bit puzzled and I thought it could be a local problem and had others to have a look at it....but with quite the same results. So any hints would be highly appreciated.

Screenshot of AdSense display in IE and Mozilla

03:55 PM | Let Cool | Other ingredients (5) | Menu: Personal Tidbits | To Top

T.I.D.U. - The z-index of Flash November 30, 2004

The T.I.D.U. category stands for: Things I don't understand. A couple of weeks ago, I tried the Making the absolute relative approach with a Flash file. In other words, I set up a headmast as a containing block for a flash movie and a navigation menu made out of an unordered list. The Flash file was meant to be in the background with the navigation lying on top of it.

You get the idea? Yes. When I tried this with an image it worked quite well. So far so good, that's not really a surprise.

Unfortunately, I wasn't able to make it work with a .swf file. I'll give you an example so you can see what I am talking about:
The setup using an image and a HTML navigation

The flash object is always placed on top regardless of source code order or z-index. Why is this so? Anybody having an explanation for this? Probably it has something to do with the plugin needed for playing flash movies. Since it is an external application and not part of the browser it is impossible to make such elements part of a stack? Is this correct behaviour? I'll give you an example here as well:
The same setup using a flash and a HTML navigation
and to prove that the navigation is still there, let's shrink the flash movie a bit:
Same as above but with reduced flash dimensions

05:42 PM | Let Cool | Other ingredients (7) | Menu: Fruits & Veggies | To Top

Webstandards - Building metaphors November 25, 2004

While hammering out a two day workshop training on web-accessibility and Cascading Stylesheets I tried to make up my mind how to explain webstandards and its benefits to a non web-savvy and non-technical audience. I figured it would be best to find something used in "real life" and then try to compare it to webstandards.

After a while of playing around with ideas this one came up my mind. Compare the delivery of a website to a browser to snail-mail transportation.

→ Continue reading "Webstandards - Building metaphors"

04:50 PM | Let Cool | Other ingredients (5) | Menu: Fruits & Veggies | To Top

More Recent Recipes

CSS: border-color: transparent

Transparent is in fact a valid border-color value in CSS Level 2
→ Continue reading "CSS: border-color: transparent"

Posted: October 15, 2004 | Other ingredients (8) | Menu: Fruits & Veggies

Press Release: Consultants Working Group "Barrier-free Internet Technology" set to work

New Working group focusing on accessibility in order to increase awareness of this topic and establish a knowledge exchange platform between webdevelopers/webdesigners.
→ Continue reading "Press Release: Consultants Working Group "Barrier-free Internet Technology" set to work"

Posted: October 05, 2004 | Other ingredients (1) | Menu: Fruits & Veggies

Long Absence

There will be posts here again any time soon!
→ Continue reading "Long Absence"

Posted: September 16, 2004 | Other ingredients (1) | Menu: Personal Tidbits

CSS - Auto-height and margin-collapsing

This entry discusses how the height for block-level element is computed in CSS. It additionally demonstrates how auto-height and margin-collapsing can have a great impact on your designs.
→ Continue reading "CSS - Auto-height and margin-collapsing"

Posted: July 28, 2004 | Other ingredients (18) | Menu: Fruits & Veggies

Legal Music Download. A real challenge!

My attempts on purchasing a song online
→ Continue reading "Legal Music Download. A real challenge!"

Posted: July 14, 2004 | Other ingredients (10) | Menu: Personal Tidbits