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" />

@import url('ie-win.css'); /*hiding from IE5 Mac*/
    
/*\*//*/
  @import "ie-mac.css";
/**/

Using single-quotes within the url parentheses of the first declaration hides the imported sheet ie-win.css from Internet Explorer on a Mac. The second rule, the so-called IE/5mac Band Pass Filter is only understood by Internet Explorer 5.x on Mac and therefore a perfect way to fix CSS flaws of this browser and only for this browser.

But wait, the Windows IE styles can still be accessed by all other browsers. That is absolutely right. So let us have a closer look at the ie-win.css. It takes benefit of the "Star HTML Selector Bug". This special selector is only recognized by all versions of Internet Explorer greater or equal to 5.0 no matter what Operating System. But as the stylesheet itself is hidden from IE/Mac, only the Windows versions of Internet Explorer will apply these rules. This is how it looks:

* html body {
   color: #0001A6;
}

This would set the color of body to blue in Internet Explorer on Windows. If there is a need to adjust furthermore and serve additional styles to IE5.x only (possible scenario: IE6 in standards mode, addressing the broken box-model for IE5.x only), we can use the Mid-Pass Filter to import another stylesheet. The advantage of the Mid-Pass Filter, it is only recognized by Internet Explorer version 5.x :

@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */

Let's look inside the ie5x-win.css, cause there is one important thing to mention:

* html body {
   color: #2EA740 !important;
}

This rule sets the body color to green in Internet Explorer 5.x on Windows. Why the !important statement here? Well, although the stylesheet for IE5 is imported after the styles for IE6 are written down and specificity of both selectors is the same, the cascading rules tell us that imported styles are treated as if they'd appear at the very beginning of the stylesheet:

So the !important statement assures that the IE5 styles won't be overriden by any IE6 styles using the same selector match and specificity.

Check out the testfiles:

• The HTML testfile
• The filter.css
• The ie-win.css
• The ie5x-win.css
• The ie-mac.css

Little sidenote

I tried to seperate the styles for IE5 and IE6 on Windows using both the High Pass Filter and the Mid Pass Filter and serving different stylesheets to them in the first place:

@import "null?\"\{";
@import "ie6-win.css";
@import "null?\"\}";
  
@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */

Unfortunately this didn't work. In this case Internet Explorer 5.5 didn't apply the ie5x-win styles. By reversing the order of the import calls all browsers applied the correct styles, but IE6 only did so when in quirks mode.

So this method leaves at least one browser that is probably not applying the filter under all circumstances which for me equals to useless, no matter how tempting this method is, cause it is the most distinguished one, and you could spare the !important statement for IE5/Win.

Conclusion

I really do not like using CSS hacks, but sometimes you just can't avoid them, at least not if you code for IE. But the above mentioned method is sufficient to me, allows handling of the different hacks in different files, doesn't litter your main stylesheets and is completely valid.

Links

Filter Methods

High Pass Filter

Mid Pass Filter

IE5/Mac Band Pass Filter

Star html Selector Bug

Overview of CSS-only Filters with browser support charts

IE5/Mac specific

Internet Explorer 5 Mac: Oddities - my current number one when it comes to IE/Mac problems. Thanks Philippe

CSS specification

The Cascading order

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.

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

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:

• PearPC.net - The community site
• PearPC - PowerPC Architecture Emulator

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

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.

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

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.

Don't get me wrong. The individual character of the first letter is quite appealing and would stand-out in the mailbox. But this is all about transportation. The process of mail delivery is mostly automated these days, which means that your letter is sorted and distributed by machines. Therefore, the postal service invented some standardized envelope/letter formats. Positioning and proper labelling play important roles as well. If a letter is enclosed within a standard-format envelope, the address is (machine-)written and positioned at the bottom left all information can be accessed by a sorting maching. The letter is then pushed into the right direction so that it can be delivered promptly.

If on the other hand you failed to use the standard format, the sorting machine will most likely sort out your letter and hand it over to a "special/manual treatment" department, where your letter is checked by a person. However, what happens next is up to the person that checks your letter, but I believe this example makes it quite clear, that if you keep to formal standards you'd remain on the safe side, even the outcome is only a delay in delivery (the best-case scenario).

That being said, the same goes for web documents. The transportation of web documents is completely machine(software)-driven. If you keep to standards, use a proper DOCTYPE and valid syntax, chances are high that your message gets through to almost every recipient.

Well, I am quite aware that this comparison is neither a hundred percent perfect nor is it completely valid, but it has helped me several times to get through the general idea of why using web standards is so important. Do you use any metaphors, analogies or anecdotes to explain webstandards?

Even my fix for positioning with containing blocks might benefit from that.

Obviously, at time of this writing, the W3C's CSS Validator has some problems with transparent when used within a shorthand property, but I haven't tested that.

I really don't know how this has slipped past my attention...but it really made my day today!

The founding members of BAbIT have cooperated as an informal, independent and internationally linked expert network for several years. By means of the working group the members plan to coordinate their activities, develop quality standards for consulting, training and coaching and place a larger focus on the topic of accessability in web projects of all scopes.

In 1999, the W3C (World Wide Web Consortium) released the Web Content Accessibility Guidelines 1.0, which receives increasing attention in Germany. Federal institutions are obligated by the decree "BITV" (Decree for the implementation of barrier-free information technology) on the basis of the Disabled Rights law (Behindertengleichstellungsgesetz) to present information barrier-free (accessible) on their web sites until 31st of December 2005.

At present there is a discussion on the implementation of the decree on the level of the federal states (Bundeslaender) and local governments. Besides companies and scientific institutions increasingly attach importance to the comprehensive and barrier free presentation of their products and web appearances.

Notes:

We have set up this group in order to exchange knowledge, experience that we gain and encounter during our daily workflow or while working on projects from a web developer/web designer's point of view. Further goals are to develop trainings and establish knowledge resources. Everyone who is interested is welcome to contact or join the working group. Contact details can be found within the PDF file or just send an email to Minz.

Full Press Release (PDF)

Thanks!

Update: This article is now also available in german.

Some of you may be aware of the fact that I am co-teaching a CSS-Workshop over at IWA/HWG. This week two students ran into exactly one and the same problem so that I had to find an explanation. So this entry is basically meant for them.

If you are working with CSS on a regular basis, you might have come across this behaviour. As did I. And if you are like me, you might have found a solution that works around it. But I have to admit that I never really understood what was happening.

So here is the first part of this problem. Consider the following markup:

<div>
   <p>This is a paragraph within a <code>div</code></p>
</div>

We'd have the following stylesheet:

div {
   background-color: #3C75AE;
   color: #fff;
   margin-top: 10px;
}
	
p {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 1px solid #EB6B0E;
}

I am sure that by quickly having a look at the markup and the styles most of you would expect the following (even I did that):

But, surprisingly, in a modern browser it renders like that:

What triggers this behaviour? There are two aspects coming into play here. One of them being the behaviour of margin-collapsing. This means that correctly implemented user agents collapse vertically adjacent margins. Using our example from above that is to say that the top border edge of our div is 20px away from a preceeding or its containing element (assuming that any eventual preceeding element hasn't a bottom margin that is larger than 20px, which isn't the case here. Let's also assume and state that our div is the first and only child of body.) and not 30 pixels. So the smaller of the two margins is eliminated in favour of the larger. This is illustrated in the following figure:

Fair enough, you'd probably say, but why isn't the paragraph 20 pixels away from the div's top outer border edge like shown above in figure 1? Why does the paragraph's margin "stick out" of the div?

Before answering this question I am going to provide you with a figure that shows you the complete box model for reference (okay, maybe not complete, I focused on the vertical axis, since that is all that matters here):

Now, the answer to our questions from above is derived from the fact how the height for a block-level element is calculated in CSS. If such an element has no height defined, it will be set to auto, which is the default height for block-level elements. Thus, in our example the height of the div is per definition the distance from the outer top border edge to the outer bottom border edge of the paragraph. Any vertical margin of the paragraph therefore will stick out of the div. The following two figures try to illustrate this. The first one shows the paragraph's box, while the second one outlines the beforementioned calculation of the div's height.

How would we then avoid the collapsing of the topmargins? I want the paragraph being 20 pixels away from the div's top border edge, how would I do that? The solution to this question lies in the question already. We have to change the height of the div by either adding a border or a padding. Let's add the following to our above styles:

div {
   background-color: #3C75AE;
   color: #fff;
   margin-top: 10px;
   padding-top: 1px;
   padding-bottom: 1px;
}

This little addition now completely changes how the height of the div (which is still auto) is calculated. Now its height will be the distance from the outer top margin edge to the outer bottom margin edge of the paragraph. The same would have been valid if we had added a top and bottom border instead of top and bottom padding. See the illustration below or check out Example 2.

Another example involving a floated element!

The following is a simplified reconstruction of what happened to some of my students in the workshop. The given markup would be something like this:

<body>
 <div id="links">
   A list of links
 </div>
 <div id="content">
   Some lines of anonymous text here....
 </div>
</body>

Furthermore, we apply the following styles:

body {
   font: 100%/1.5 Georgia, "Times New Roman", Times, serif;
}

div#links {
   float: right;
   width: 50%;
   margin-top: 0;
   background-color: #EB6B0E;
   color: #fff;
}

div#content {
   background-color: #3C75AE;
   color: #fff;
   margin-top: 30px;
   border: 1px solid #3C75AE;
}

Let me show you the rendering results of three different browsers first:

Mozilla 1.7

Opera 7.5

Internet Explorer 6

You can check your own browser by looking at Example 3.

Well, that's pretty neat, isn't it? In fact, that is why we like CSS so much :)

But given our markup and our style declarations, Mozilla does it correct. Under certain circumstances (I'll explain that a bit later) Opera is correct either. Internet Explorer (surprise, surprise) is wrong here.

At first glance I thought to myself that Mozilla must be wrong. It seemed to clearly violate the float rule number 8, which states:

So, Opera must be right, and even IE is coming close. This second thought alone should strike all alarm bells! Let us see what else is available. Take a look at float rule number 4:

So it all comes down to one thing again. The containing block in our case would be body. Where is the top of body and what is the height of body? Take a look at our body styles. There is not much in there, just a font declaration. So the initial values for margin, padding and border will be assumed. Those are 0, 0 and none which means no margin, no padding, no border.

If we now consider what we have learned in our first example, the height of body will be the distance from the outer top border edge to the outer bottom border edge of its normal-flow block-level child (= the content div), while the margins of that child will again "stick out" of it.

But how can Opera render it completely different and nonetheless be correct? In this special case, you have to be aware of the fact that most browsers have their own user agent stylesheets implemented. These stylesheets rule the rendering of hyperlinks for example, or the font family and size that is displayed on completely unstyled pages. Additionally, they set an explicit value for margin and padding for body.

Since we have declared neither in our styles, our initial values will be outruled by the user agent's styles. Now the main point here is, that Opera has different styles than Mozilla and Internet Explorer. The Opera styles declare:

body {
   margin: 0;
   padding: 8px;
}

On the other hand, Mozilla and Internet Explorer assign the following styles:

body {
   margin: 8px;
   padding: 0;
}

This is only a slight difference, but it has a lot of impact on our example design. Let us copy Opera's styles and add the following to our working example:

body {
   font: 100%/1.5 Georgia, "Times New Roman", Times, serif;   
   margin: 0;
   padding: 8px;
}

Since there is now a padding, the height of body will change. It will be now the distance from the outer top margin edge to the outer bottom margin edge of its normal-flow block-level child.

This last example is also available. If you wish, please have a look at Example 4.

If the above illustrations are too small for your eyes, I have created a page containing all of them at a higher resolution.

Recommended reading

An article written by Andy Budd some time ago and a book from Eric Meyer. The latter did help me a lot in figuring out these things.

1. Andy Budd: No margin for error
2. Eric Meyer: Cascading Style Sheets, The Definitive Guide - Second Edition
3. CSS 2 Specifications: 10.6 Computing heights and margins

The task

• Find a store that sells Online Music for download
• Find the desired song.
• Pay for it and download it.
• Listen to it

The environment (this one will be relevant soon)

• OS: Windows XP Professional SP1a
• Browser: Mozilla 1.6 (with Pop-Up Blocker activated)
• Kerio Personal Firewall (set to default security level)
• Windows Media Player 8.0

First, I had to determine a source that actually offers this service. Fired up Google and entered the search terms "music" and "download". Uhm....okay, as you may guess the first page showed up a lot of those mp3 pirate sites. Skimmed through the next 3 pages and didn't find anything. I added the word "legal" to my search. This brought up a lot of online magazines talking about Digital Rights Management, about the losses the music industry claims to have made due to illegal downloads. But yet no source offering me what I wanted. I ended up looking at a press release of a company that signed all major labels in Germany in order to offer legal music downloads. On that page I finally detected links to theservices I was looking for. Great, now we're on a roll. I chose the online shop of one of the biggest German Entertainment Electronic shops called MediaMarkt. (Link: musikdownload.mediamarkt.de)

The page was organized pretty straight forward (okay, far from being valid, standards compliant or accessible, but that wasn't part of the task this time). I immediately found the "Top 10 Charts" link and the song I wished to download. What wasn't there (on neither page I checked later on) was information about file format, file size, compression format and quality. Hmmmmm...., okay, didn't worry about that because I knew it was for my daughter and the song would end being recorded onto a Music Cassette, so quality wasn't the point here. If it were for me, I'd hesitated now asking myself, why the h*** don't they tell me what I've to expect. C'mon folks, I am going to pay for it!

Ahh...forgot to mention. The download of one song is labelled with a cost of 99 Eurocent (equals US Currency of approx. $1.23). That's pretty much, but well, let's not start whining about that.

Nevertheless, I hit that add to basket button to purchase the song and finally see what would happen. But arrrgh...the following message was served to me:

Crap! Afterwards I despairingly tried five other services all displaying me the same stubborn error message. No way around it, I had to come clean and click that blue "e"-sign in my Program menu (Can't tell you how much I hated that). Well, finally I came past that error message just to learn that there is to be due an additional transaction fee of 10 Eurocent. So the overall cost of that download would sum up to 1.09 EURO (equals US currency of $1.32).

Purchasing process actually was a big pain in the a**. I had to fill out a HUGE contact form. I was wondering if they'd like to know the size of my shoes or my sexual orientation as well.

Proceeding to payment. FirstGate micropayment. That's good, I am lucky here, because I already got a FirstGate account. If I hadn't, that would have been some more forms to fill out. Cheer up folks, finally the download window popped up and I was able to save a 3.8 MB .wma file onto my hard disk. I was then informed that I am allowed to listen to it (hahaha, they're kidding, aren't they?). I may even export it (whatever that means) and I am granted the right to burn it on a CD 3 times (ahhhh, celebrate!!)

Sorry people, if this is the attempt to sell music online and make people stay away from peer-to-peer networks and pirate sites, this is not going to work. I am wondering if the big labels are really interested in making it work! Regarding the whining and bitching they do, they should be, but then...you never know.

Maybe it would be a good thing to make the responsible people aware of some good posts out there:
Thoughts on the people-centric web
Users, Contingency Design, Clients etc...

But why, oh why do I doubt it would help?