<?xml version="1.0" encoding="iso-8859-1"?>
<feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="en">
  <title>Minz Meyer&apos;s Researchkitchen</title>
  <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/" />
  <modified>2006-08-25T11:34:44Z</modified>
  <tagline>Cooking with Webstandards!
Taste the full flavour of the Web</tagline>
  <id>tag:www.researchkitchen.de,2006:/blog//1</id>
  <generator url="http://www.movabletype.org/" version="3.2">Movable Type</generator>
  <copyright>Copyright (c) 2005, Minz Meyer</copyright>
  <entry>
    <title>Filtering CSS</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/filtering-css.php" />
    <modified>2006-08-25T11:34:44Z</modified>
    <issued>2005-02-22T12:14:46+01:00</issued>
    <id>tag:www.researchkitchen.de,2005:/blog//1.112</id>
    <created>2005-02-22T11:14:46Z</created>
    <summary type="text/plain">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&apos;d summarize a bit what I found...</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>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.</p>
<p>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 <code>margin-right: 15px</code> added to absolute positioned elements). </p>
<p>So my main strategy is to link to main Stylesheets within my (X)HTML files. A <code>main.css</code> containing the complete hack-free styles (organized probably in the form of further linked style sheets) and a <code>filter.css</code> that contains links to browser specific styles and adjustments. </p>
<div class="codeblock">
<pre><code>&lt;link rel=&quot;stylesheets&quot; type=&quot;text/css&quot; href=&quot;main.css&quot; /&gt;
&lt;link rel=&quot;stylesheets&quot; type=&quot;text/css&quot; href=&quot;filters.css&quot; /&gt;</code></pre>
</div>
<p><img alt="A schematic illustration showing the file structure described in the next paragraph" src="http://www.researchkitchen.de/blog/img/20-02-2005-filters.png" width="376" height="203"  /></p>]]>
      <![CDATA[<p>Let's have a closer look at the <code>filter.css</code>. It's main purpose is to serve different Styles to Internet Explorers on Windows and Mac. </p>
<div class="codeblock">
<pre><code>@import url('ie-win.css'); /*hiding from IE5 Mac*/
    
/*\*//*/
  @import "ie-mac.css";
/**/</code></pre>
</div>
<p> Using single-quotes within the url parentheses of the first declaration hides the imported sheet <code>ie-win.css</code> 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.</p>
<p>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 <code>ie-win.css</code>. It takes benefit of the &quot;Star HTML Selector Bug&quot;. 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:</p>
<div class="codeblock">
<pre><code><span class="red">* html body</span> {
   color: #0001A6;
}</code></pre>
</div>
<p>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 :</p>
<div class="codeblock">
<pre><code>@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */</code></pre>
</div>
<p>Let's look inside the <code>ie5x-win.css</code>, cause there is one important thing to mention:</p>
<div class="codeblock">
<pre><code>* html body {
   color: #2EA740 <span class="red">!important</span>;
}</code></pre>
</div>
<p>This rule sets the body color to green in Internet Explorer 5.x on Windows. Why the <code>!important</code> 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:</p>
<div class="blockquote">
	<blockquote cite="http://www.w3.org/TR/CSS21/cascade.html#cascading-order">
	<p> Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.</p>
	</blockquote>
</div>
<p>So the <code>!important</code> statement assures that the IE5 styles won't be overriden by any IE6 styles using the same selector match and specificity.</p>
<p>Check out the testfiles:</p>
<ul>
  <li><a href="http://www.researchkitchen.de/blog/testdrive/filtering/filters.html">The HTML testfile</a> </li>
  <li>The <a href="http://www.researchkitchen.de/blog/testdrive/filtering/filters.css">filter.css</a> </li>
  <li>The <a href="http://www.researchkitchen.de/blog/testdrive/filtering/ie-win.css">ie-win.css</a></li>
  <li>The <a href="http://www.researchkitchen.de/blog/testdrive/filtering/ie5x-win.css">ie5x-win.css</a> </li>
  <li>The <a href="http://www.researchkitchen.de/blog/testdrive/filtering/ie-mac.css">ie-mac.css</a> </li>
</ul>
<h3>Little sidenote </h3>
<p>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:</p>
<div class="codeblock">
<pre><code>@import &quot;null?\&quot;\{&quot;;<br />@import &quot;ie6-win.css&quot;;<br />@import &quot;null?\&quot;\}&quot;;
  
@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */</code></pre>
</div>
<p>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. </p>
<p>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 <code>!important</code> statement for IE5/Win. </p>
<h3>Conclusion</h3>
<p>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.</p>
<h3>Links</h3>
<dl>
  <dt>Filter Methods</dt>
  <dd><a href="http://www.tantek.com/CSS/Examples/highpass.html" rel="external">High Pass Filter</a> </dd>
  <dd><a href="http://www.tantek.com/CSS/Examples/midpass.html" rel="external">Mid Pass Filter</a> </dd>
  <dd><a href="http://stopdesign.com/examples/ie5mac-bpf/" rel="external">IE5/Mac Band Pass Filter</a></dd>
  <dd><a href="http://www.info.com.ph/%7Eetan/w3pantheon/style/starhtmlbug.html" rel="external">Star html Selector Bug</a></dd>
  <dd><a href="http://www.dithered.com/css_filters/css_only/index.php" rel="external">Overview of CSS-only Filters with browser support charts </a></dd>
  <dt>IE5/Mac specific</dt>
  <dd><a href="http://www.l-c-n.com/IE5tests/" rel="external">Internet Explorer 5 Mac: Oddities</a> - my current number one when it comes to IE/Mac problems. Thanks <a href="http://emps.l-c-n.com/" rel="external">Philippe</a> </dd>
  <dt>CSS specification</dt>
  <dd><a href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order" rel="external">The Cascading order</a> </dd>
</dl>]]>
    </content>
  </entry>
  <entry>
    <title>MacOSX on Windows XP: Revisited</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/macosx-on-windows-xp-revisited.php" />
    <modified>2006-08-25T11:45:08Z</modified>
    <issued>2005-01-24T16:57:28+01:00</issued>
    <id>tag:www.researchkitchen.de,2005:/blog//1.73</id>
    <created>2005-01-24T15:57:28Z</created>
    <summary type="text/plain">My recent experiences with MacOSX under Pear PC. Now running faster and with sharing network abilities. My essential browser cam!</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>Some of you might remember that I <a href="http://www.researchkitchen.de/blog/archives/macosx-on-windowsxp.php">recently discovered Pear PC</a>. 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 <code>iso</code>file and make it appear as a virtual CD volume by assigning it to the Pear PC config file. </p>
<p>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 <abbr title="Server Message Block">SMB</abbr> protocol. </p>
<p>Additionally, the speed problem was addressed. It still isn't a very fast emulation but browsing the web is now quite acceptable.  </p>
<p><img alt="Screenshot: MacOSX under Windows XP" src="http://www.researchkitchen.de/blog/img/21-01-2005-macosx-1.jpg" width="300" height="354" /></p>
<p>As you can see on the screenshot above MAC OSX identifles my Pentium 4 computer  as a G3 PowerPC. </p>
<p><img alt="Screenshot: Running OSX under Windows using a shared internet connection" src="http://www.researchkitchen.de/blog/archives/21-01-2005-macosx-2.jpg" width="400" height="321" /></p>
<p>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. </p>
<p>If you wanna know how it is done, there is plenty of information on the official and the community site: </p>
<ul>
  <li><a href="http://pearpc.net/" rel="external">PearPC.net</a> - The community site </li>
  <li> <a href="http://pearpc.sourceforge.net/" rel="external">PearPC</a> - PowerPC Architecture Emulator</li>
</ul>
<p>Otherwise, please don't hesitate to <a href="http://www.minzweb.de/en/pages/communicate/contact.asp" rel="external">drop me a line</a>. </p>]]>
      
    </content>
  </entry>
  <entry>
    <title>T.I.D.U. - Google AdSense Display</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/tidu-google-adsense-display.php" />
    <modified>2006-08-25T11:45:40Z</modified>
    <issued>2005-01-14T15:55:23+01:00</issued>
    <id>tag:www.researchkitchen.de,2005:/blog//1.69</id>
    <created>2005-01-14T14:55:23Z</created>
    <summary type="text/plain">My problems with displaying Google Ads on this website, using Google AdSense</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>T.I.D.U.: Things I don't understand</p>
<p>To be honest, I am not a big fan of all those AdSense littered blogs, but I thought contributing to Andy Budd's great <a href="http://www.blogaid.org.uk/" rel="external">BlogAid</a> 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.</p>
<p>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!</p>
<p>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.</p>
<p><img alt="Screenshot of AdSense display in IE and Mozilla" src="http://www.researchkitchen.de/blog/img/14-01-2005-adsense.jpg" width="400" height="378" /></p>]]>
      
    </content>
  </entry>
  <entry>
    <title>T.I.D.U. - The z-index of Flash</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/tidu-the-zindex-of-flash.php" />
    <modified>2006-08-25T11:45:59Z</modified>
    <issued>2004-11-30T17:42:47+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.66</id>
    <created>2004-11-30T16:42:47Z</created>
    <summary type="text/plain">My woes with Flash always trying to be on top of a stack </summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>The T.I.D.U. category stands for: Things I don't understand. A couple of weeks ago, I tried the <cite title="A positioning fine-tuning method introduced (to me) by Doug Bowman">Making the absolute relative</cite> 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. </p>
<p><img src="http://researchkitchen.de/blog/img/30-11-2004-screenshot.jpg" alt="" /></p>
<p>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.</p>
<p>Unfortunately, I wasn't able to make it work with a <code>.swf</code> file. I'll give you an example so you can see what I am talking about:<br />
<a href="http://researchkitchen.de/blog/article/woes-of-flash-noflash.html">The setup using an image and a HTML navigation</a>
</p>
<p>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: <br />
<a href="http://researchkitchen.de/blog/article/woes-of-flash-withflash.html">The same setup using a flash and a HTML navigation</a><br />
and to prove that the navigation is still there, let's shrink the flash movie a bit:<br />
<a href="http://researchkitchen.de/blog/article/woes-of-flash-withflash-shrinked.html">Same as above but with reduced flash dimensions</a>
</p>

]]>
      
    </content>
  </entry>
  <entry>
    <title>Webstandards - Building metaphors</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/webstandards-building-metaphors.php" />
    <modified>2006-08-25T11:46:22Z</modified>
    <issued>2004-11-25T16:50:45+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.64</id>
    <created>2004-11-25T15:50:45Z</created>
    <summary type="text/plain">An attempt to explain the benefit of webstandards to non-web savvy people</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>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.</p>
<p>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.</p>]]>
      <![CDATA[<p>Take a look at the following picture. Which one of those two letters is more likely to be delivered properly and in-time? </p>
<p><img  src="http://www.researchkitchen.de/blog/img/22-11-04-letters-standards.jpg" width="400" height="444" alt="Two letters, one handmade and -written with non-standardized format without stamp and a standard business letter in DIN format" /></p>
<p>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 <strong>standardized</strong> 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.</p>
<p>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 <em>only</em> a delay in delivery (the best-case scenario).</p>
<p>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.</p>
<p>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?</p>
<ins>
<p><strong>Update:</strong><br />
Okay, now this already came up several times, so I am going to comment it. It is right that this example might enhance the impression that webstandards based design is boring or ugly. This is not entirely true! Although the example is visible it represents an invisible process (the sorting process). Let's assume that you, as the recipient, are never going to see the envelope, because your secretary (browser) is unwrapping all your letters for you and stacks the letters unpacked on your desktop.</p>
<p>So what to do? You can either redesign the envelope pics, so that they are either both ugly or attractive, or you could create an image of a creative letter and make clear that this one and the same letter is inside both envelopes. Hmmm...am I making any sense here?</p>
</ins>
<ins><p><strong>Update part 2:</strong><br />
I have created a standard-envelope that carries the same look and feel than the non-standard envelope. The argument against it might now be that it wouldn't be wise to mix presentation and structure...well, it's just like I said, it is a metaphor, nothing more and nothing less.</p>
<p><img src="http://www.researchkitchen.de/blog/img/26-11-2004-letter2.jpg" width="402" alt="The DIN format letter restyled." /></p></ins>
]]>
    </content>
  </entry>
  <entry>
    <title>CSS: border-color: transparent</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php" />
    <modified>2006-08-25T11:46:48Z</modified>
    <issued>2004-10-15T14:36:24+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.59</id>
    <created>2004-10-15T13:36:24Z</created>
    <summary type="text/plain">Transparent is in fact a valid border-color value in CSS Level 2</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>Wow, I really wasn't aware that <code>transparent</code> was a valid <code>border-color</code> value. But according to the <a href="http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html" rel="external">CSS Level 2 Errata</a>, it is. This really solves some problems you might have, for example when styling hovered links with a border. The problem was, that while hovering, you changed the width and height (or the line-box) of those links, which caused distracting movement of content.</p>
<p>Even my <a href="http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php">fix for positioning with containing blocks</a> might benefit from that.</p>
<p>Obviously, at time of this writing, the W3C's CSS Validator has some <a href="http://lists.w3.org/Archives/Public/www-validator-css/2002Jul/0006.html" rel="external">problems</a> with <code>transparent</code> when used within a shorthand property, but I haven't tested that. </p>
<p>I really don't know how this has slipped past my attention...but it really made my day today!</p>]]>
      
    </content>
  </entry>
  <entry>
    <title>Press Release: Consultants Working Group &quot;Barrier-free Internet Technology&quot; set to work</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/press-release-consultants-working-group-barrierfree-internet-technology-set-to-work.php" />
    <modified>2006-08-25T11:47:09Z</modified>
    <issued>2004-10-05T17:22:45+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.58</id>
    <created>2004-10-05T16:22:45Z</created>
    <summary type="text/plain">New Working group focusing on accessibility in order to increase awareness of this topic and establish a knowledge exchange platform between webdevelopers/webdesigners.</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>On the 27th of August 2004, the Consultants Working Group "Barrier-free (accessible) Internet Technology" (<span lang="de" xml:lang="de">BabIT - BeraterInnen-Arbeitskreis barrierefreie Internettechnologie</span>) has met for the official start-up of activities in Cologne, Germany.</p>

<p>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.</p>

<p>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 (<span lang="de" xml:lang="de">Behindertengleichstellungsgesetz</span>) to present information barrier-free (accessible) on their web sites until 31st of December 2005.</p>

<p>At present there is a discussion on the implementation of the decree on the level of the federal states (<span lang="de" xml:lang="de">Bundeslaender</span>) and local governments. Besides companies and scientific institutions increasingly attach importance to the comprehensive and barrier free presentation of their products and web appearances.</p>

<h3>Notes:</h3>
<p>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 <abbr title="Protable Document File">PDF</abbr> file or just send an email to <a href="mailto:minz@minzweb.de">Minz</a>.</p>
<p><a href="http://zausch.de/zauschweb/download/presseinfos/p-040828-arbeitskreis-barrierefreiesinternet-en.pdf" rel="external">Full Press Release (PDF)</a></p>
]]>
      
    </content>
  </entry>
  <entry>
    <title>Long Absence</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/long-absence.php" />
    <modified>2006-08-25T11:47:31Z</modified>
    <issued>2004-09-16T15:10:45+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.56</id>
    <created>2004-09-16T14:10:45Z</created>
    <summary type="text/plain">There will be posts here again any time soon!</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>Sorry everyone for this "long time - no post" period in the kitchen. I've been busy lately and have become a little tired when it comes to my own blog. But I got some things in the pipe I'd like to share with you soon. So, please stick with me :)</p>
<p>Thanks!</p>]]>
      
    </content>
  </entry>
  <entry>
    <title>CSS - Auto-height and margin-collapsing</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php" />
    <modified>2006-08-25T11:48:04Z</modified>
    <issued>2004-07-28T15:46:09+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.54</id>
    <created>2004-07-28T14:46:09Z</created>
    <summary type="text/plain">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.</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<h3>...or..miraculously shrinking containers!</h3>
<p><ins>Update: This article is now also <a href="http://minzweb.de/de/pages/sitetopics/archive_permalink.asp?id=47" hreflang="de" rel="external">available in german.</a></ins></p>
		<p>Some of you may be aware of the fact that I am co-teaching a CSS-Workshop over at <a href="http://www.hwg.org" rel="external">IWA/HWG.</a> 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.</p>
		
		<p>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.</p>
		
		<p>So here is the first part of this problem. Consider the following markup:</p>
		<div class="codeblock">
		<pre><code>&lt;div&gt;
   &lt;p&gt;This is a paragraph within a &lt;code&gt;div&lt;/code&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre>
		</div>
		<p>We'd have the following stylesheet:</p>
		<div class="codeblock">
		<pre><code>div {
   background-color: #3C75AE;
   color: #fff;
   margin-top: 10px;
}
	
p {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 1px solid #EB6B0E;
}</code></pre>
		</div>
		<p>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):</p>
		<p><a id="figure1"><img src="http://www.researchkitchen.de/blog/img/04-06-2004-figurea.png" height="72" width="350" alt="" /></a></p>
		<p>But, surprisingly, in a modern browser it renders like that:</p>
		<p><img src="http://www.researchkitchen.de/blog/img/04-06-2004-figureb.png" height="30" width="350" alt="" /></p>]]>
      <![CDATA[<p>You can have see this in action by checking out <a href="http://www.researchkitchen.de/blog/article/auto-height1.php" id="ex1">Example 1.</a></p>
		<p>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 <code>body</code>.) 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:</p>
		<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height1.png" height="85" width="400" alt="" /></p>
		<p>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 <a href="#figure1">figure 1</a>? 
		Why does the paragraph's margin "stick out" of the div?</p>
		<p>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):</p>
		<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height0.png" height="300" width="400" alt="" /></p>
		<p>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 <code>auto</code>, 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 <strong>border</strong> edge to the outer bottom <strong>border</strong> 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.</p>
		<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height2.png" height="94" width="400" alt="" /></p>
		<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height3.png" height="82" width="400" alt="" /></p>
		<p>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:</p>
		<div class="codeblock">
		<pre><code>div {
   background-color: #3C75AE;
   color: #fff;
   margin-top: 10px;
   <span class="red">padding-top: 1px;
   padding-bottom: 1px;</span>
}</code></pre>
	</div>
	<p>This little addition now completely changes how the height of the div (which is still <code>auto</code>) is calculated. Now its height will be
	the distance from the outer top <strong>margin</strong> edge to the outer bottom <strong>margin</strong> 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 <a href="http://www.researchkitchen.de/blog/article/auto-height2.php" id="ex2">Example 2.</a></p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height4.png" height="103" width="400" alt="" /></p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height5.png" height="82" width="400" alt="" /></p>
	
	<h3>Another example involving a floated element!</h3>
	<p>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:</p>
	<div class="codeblock">
	<pre><code>&lt;body&gt;
 &lt;div id="links"&gt;
   A list of links
 &lt;/div&gt;
 &lt;div id="content"&gt;
   Some lines of anonymous text here....
 &lt;/div&gt;
&lt;/body&gt;</code></pre>
	</div>
	<p>Furthermore, we apply the following styles:</p>
	<div class="codeblock">
	<pre><code>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;
}</code></pre>
	</div>
	<p>Let me show you the rendering results of three different browsers first:</p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height-moz.png" height="209" width="350" alt="Mozilla rendering" /><br />
	Mozilla 1.7</p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height-opera.png" height="209" width="350" alt="Opera rendering" /><br />
	Opera 7.5</p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height-ie.png" height="209" width="350" alt="Internet Explorer rendering" /><br />
	Internet Explorer 6</p>
	<p>You can check your own browser by looking at <a href="http://www.researchkitchen.de/blog/article/auto-height3.php" id="ex3">Example 3.</a></p>
	<p>Well, that's pretty neat, isn't it? In fact, that is why we like CSS so much :)</p>
	<p>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.</p>
	<p>At first glance I thought to myself that Mozilla must be wrong. It seemed to clearly violate the <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#float-rules" rel="external">float rule number 8</a>, which states:
	</p>
	<div class="blockquote">
	<blockquote>
		<p> A floating box must be placed as high as possible.</p>
	</blockquote>
	</div>
	<p>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 <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#float-rules" rel="external">float rule number 4</a>:</p>
	<div class="blockquote">
	<blockquote>
		<p>A floating box's outer top may not be higher than the top of its containing block.</p>
	</blockquote>
	</div>
	<p>So it all comes down to one thing again. The containing block in our case would be <code>body</code>. 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 <code>font</code> declaration. So the initial values for <code>margin</code>, <code>padding</code> and
	<code>border</code> will be assumed. Those are 0, 0 and none which means no margin, no padding, no border.</p>
	<p>If we now consider what we have learned in our first example, the height of <code>body</code> will be the distance from the
	outer top <strong>border</strong> edge to the outer bottom <strong>border</strong> edge of its normal-flow block-level child (= the content div), while the margins of that child will again "stick out" of it.</p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height6.png" height="179" width="400" alt="" /></p>
	<p>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 <code>margin</code> and <code>padding</code> for <code>body</code>.</p>
	<p>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:</p>
	<div class="codeblock">
	<pre><code>body {
   margin: 0;
   padding: 8px;
}</code></pre>
	</div>
	<p>On the other hand, Mozilla and Internet Explorer assign the following styles:</p>
	<div class="codeblock">
	<pre><code>body {
   margin: 8px;
   padding: 0;
}</code></pre>
	</div>
	<p>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:</p>
	<div class="codeblock">
	<pre><code>body {
   font: 100%/1.5 Georgia, "Times New Roman", Times, serif;   
   <span class="red">margin: 0;
   padding: 8px;</span>
}</code></pre>
	</div>
	<p>Since there is now a padding, the height of <code>body</code> will change. It will be now the distance from the outer 
	top <strong>margin</strong> edge to the outer bottom <strong>margin</strong> edge of its normal-flow block-level child.</p>
	<p><img src="http://www.researchkitchen.de/blog/img/27-07-2004-height7.png" height="179" width="400" alt="" /></p>
	<p>This last example is also available. If you wish, please have a look at
	<a href="http://www.researchkitchen.de/blog/article/auto-height4.php" id="ex4">Example 4.</a></p>
	<p>If the above illustrations are too small for your eyes, I have created a <a href="http://www.researchkitchen.de/blog/article/auto-height-all-images.php" id="ex5">page containing all of them at a higher resolution.</a></p>
	
	<h3>Recommended reading</h3>
	<p>An article written by <a href="http://www.andybudd.com/" rel="external">Andy Budd</a> some time ago and a book from <a href="http://www.meyerweb.com/" rel="external">Eric Meyer</a>. The latter did help me a lot in figuring out
	these things.</p>
	<ol>
		<li><a href="http://www.andybudd.com/archives/2003/11/no_margin_for_error/" rel="external">Andy Budd: No margin for error</a></li>
		<li><a href="http://www.amazon.com/exec/obidos/tg/detail/-/0596005253/qid=1091021012/sr=1-1/ref=sr_1_1/103-9426865-7928614?v=glance&amp;s=books" rel="external">Eric Meyer: Cascading Style Sheets, The Definitive Guide - Second Edition</a></li>
		<li><a href="http://www.w3.org/TR/REC-CSS2/visudet.html#q17" rel="external">CSS 2 Specifications: 10.6 Computing heights and margins</a></li>
	</ol>]]>
    </content>
  </entry>
  <entry>
    <title>Legal Music Download. A real challenge!</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/legal-music-download-a-real-challenge.php" />
    <modified>2006-09-02T17:17:59Z</modified>
    <issued>2004-07-14T00:40:28+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.53</id>
    <created>2004-07-13T23:40:28Z</created>
    <summary type="text/plain">My attempts on purchasing a song online</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>There, I tried it. Following the heart's desire of my daughter, I promised her to get her a copy of Britney Spear's song <cite>Everytime</cite> (don't blame me for that ;) but tell me, how'd you resist the bright eyed smile of a 6 year old girl). As I wouldn't go that far buying the Single-CD, I thought about downloading it (from a legal source of course, thus, paying it).</p>
<h3>The task</h3>
<ul>
<li>Find a store that sells Online Music for download</li>
<li>Find the desired song.</li>
<li>Pay for it and download it.</li>
<li>Listen to it</li>
</ul>
<h3>The environment (this one will be relevant soon)</h3>
<ul>
<li><abbr title="Operating System">OS</abbr>: Windows XP Professional <abbr title="Service Pack">SP</abbr>1a</li>
<li>Browser: Mozilla 1.6 (with Pop-Up Blocker activated)</li>
<li>Kerio Personal Firewall (set to default security level)</li>
<li>Windows Media Player 8.0</li>
</ul>

]]>
      <![CDATA[<h3>The process</h3>
<p>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 <cite>MediaMarkt</cite>.  (Link: <a href="http://musikdownload.mediamarkt.de" rel="external">musikdownload.mediamarkt.de</a>)</p>
<p>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!</p>
<p>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.</p>
<p>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:</p>
<div class="blockquote">
<blockquote>
<p>System Check Failure !</p>
<p>We're sorry, but if you want to gain access to our audio files you need to fulfill the following requirements:</p>
<ul>
<li>Internet Explorer 5.5 or higher = Not available</li>
<li>JavaScript 1.2 = Not available or not activated</li>
<li>Cookies = Not accepted</li>
<li>Windows Media Player 7.1 or higher = Not available or not installed</li>
</ul>
</blockquote>
</div>
<p>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).</p>

<p>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.</p>
<p>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!!)</p>
<p>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.</p>
<p>Maybe it would be a good thing to make the responsible people aware of some good posts out there:<br />
<a href="http://www.7nights.com/asterisk/archives/thoughts_on_the_peoplecentric_web.php" rel="external">Thoughts on the people-centric web</a><br/>
<a href="http://www.fiftyfoureleven.com/sandbox/weblog/2004/jul/users-contingency-design-etc/" rel="external">Users, Contingency Design, Clients etc...</a></p>
<p>But why, oh why do I doubt it would help?</p>
]]>
    </content>
  </entry>
  <entry>
    <title>Take a deep breath</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/take-a-deep-breath.php" />
    <modified>2006-08-25T12:01:15Z</modified>
    <issued>2004-07-12T13:51:29+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.52</id>
    <created>2004-07-12T12:51:29Z</created>
    <summary type="text/plain">Sometimes, things happen and remind you that there is more in life than work, money and the web. This is what happened to me last week: I was hit by a car whose driver lost control of his vehicle due...</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Outside Kitchen</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>Sometimes, things happen and remind you that there is more in life than work, money and the web.</p>
<p>This is what happened to me last week:</p>
<p><img alt="Car wreckage" src="http://www.researchkitchen.de/blog/img/12-07-2004-car.jpg" width="400" height="310" /></p>
<p>I was hit by a car whose driver lost control of his vehicle due to a slippery road and too much speed. My car was pushed off-road and overturned. When I look at the wreckage, it is hard to believe that I deboarded almost unharmed. The doctors at hospital said the cervicals are a bit stressed, but nothing was damaged and I am suffering light pain in the neck and mild headaches, but it is getting better every day.</p>
<p>So, remember offline-life sometimes, step away from that computer, go outside, meet friends, have fun with your family and embrace life. It could be too short, you never know.</p>]]>
      
    </content>
  </entry>
  <entry>
    <title>MacOSX on WindowsXP</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/macosx-on-windowsxp.php" />
    <modified>2006-08-25T12:01:37Z</modified>
    <issued>2004-06-23T00:38:28+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.51</id>
    <created>2004-06-22T23:38:28Z</created>
    <summary type="text/plain">MacOSX Jaguar running under Windows XP. Magic!</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>This title seems like a dream, and actually it is one. Thanks to two german students and a growing community it actually works. The solution: <a href="http://pearpc.sourceforge.net" rel="external">PearPC</a>.</p>
<p><i>Note: Click on the screenshots throughout the article in order to get a larger version of the image</i></p>
<p><a href="http://www.researchkitchen.de/blog/article/mac-on-win1.html"><img src="http://www.researchkitchen.de/blog/img/22-06-2004-mac-on-win.jpg" alt="MacOSX Jaguar running under Windows XP" /></a></p>
]]>
      <![CDATA[<p>Granted, it has some flaws, and the speed isn't overwhelming, but recent news say the developers are working on it. The newest version 0.2 even supports networking, which means it should be possible to have internet access.</p>
<p>The setup of the whole thing is a bit tricky, but manageable, following the online instructions provided on PearPC's website. Legal issues first. You have to own a copy of MacOSX. I chose to install "Jaguar". Check ebay, for example, it shouldn't be too hard to get a copy at a rather small price.</p>
<p>Furthermore, you need a copy of PearPC (downloadable on their website), and a HFS formatted disk image (they offer one there as well, but I found the images over at <a href="http://pearpc.net/downloads.php" rel="external">PearPC.net</a> more useful).</p>
<p>You have to make an ISO file out of your MacOSX installerCD. Configuration and setup of the virtual boot devices are done editing a textfile.</p>
<p>If you are lucky and it works for you, you have to wait...wait...and wait. The whole OS installation took about 2 and a half hour.</p>
<h3>How's that for a browser cam?</h3>
<p>Fortunately the speed flaws don't matter that much to me. I don't intend to work with an emulated Mac, why should I? But I was most excited to finally have a possibility to check my websites with Mac browsers. So I installed Safari 1.0 and Mozilla 1.6 (had to write the downloadable files into an iso disk image first).</p>
<p><a href="http://www.researchkitchen.de/blog/article/mac-on-win2.html"><img src="http://www.researchkitchen.de/blog/img/22-06-2004-mac-mozilla.jpg" alt="MacOSX Jaguar running under Windows XP" /></a></p>
<p><a href="http://www.researchkitchen.de/blog/article/mac-on-win3.html"><img src="http://www.researchkitchen.de/blog/img/22-06-2004-mac-safari.jpg" alt="MacOSX Jaguar running under Windows XP" /></a></p>
<p><a href="http://www.researchkitchen.de/blog/article/mac-on-win4.html"><img src="http://www.researchkitchen.de/blog/img/22-06-2004-mac-ie.jpg" alt="MacOSX Jaguar running under Windows XP" /></a></p>
<p>Thats really amazing, isn't it?</p>
<h3>Thank you, thank you</h3>
<p>I've been waiting for something like that for a couple of years now. So I am very thankful and have to bow low before the folks who managed to bring PearPC to life and make it work. So what's left to do?</p>
<p><a href="http://www.researchkitchen.de/blog/article/mac-on-win5.html"><img src="http://www.researchkitchen.de/blog/img/22-06-2004-mac-shutdown.jpg" alt="MacOSX Jaguar running under Windows XP" /></a></p>
<p>Shut down the Apple and make a donation to the people over at <a href="http://pearpc.sourceforge.net" rel="external">PearPC</a>. See you there :))</p>]]>
    </content>
  </entry>
  <entry>
    <title>Absolute and Relative ConfuSionS</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/absolute-and-relative-confusions.php" />
    <modified>2006-08-25T12:03:33Z</modified>
    <issued>2004-06-04T17:58:46+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.50</id>
    <created>2004-06-04T16:58:46Z</created>
    <summary type="text/plain">An entry that discusses the weird behaviour of Internet Explorer regarding the containing blocks concept of CSS.</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject><![CDATA[Fruits &amp; Veggies]]></dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>You might be familiar with the CSS concept of containing blocks. If not, 
    you probably would like to read the following articles discussing this topic in depth:</p>
  <ol>
    <li><a href="http://www.maccessibility.com/archive/001281.php" rel="external">Explaining 
      CSS positioning in greater detail</a>, Kynn Bartlett</li>
    <li><a href="http://www.stopdesign.com/articles/absolute/" rel="external">Making 
      the Absolute, Relative</a>, Doug Bowman</li>
    <li><a href="http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details" rel="external">Definition 
      of Containing-Block</a>, W3C CSS 2 Recommendation</li>
  </ol>
  <p>Per default, if nothing else is defined, the initial containing block is your 
    document's root element (the <code>html</code> element). This means all offset 
    or positioning values will be calculated respecting the boundaries of this 
    element.</p>
  <p>Recently, I tried to create a three-column layout using absolute positioning. 
    The general design-frame I tried to accomplish is shown in the following 
    image:</p>
  <p><img src="http://www.researchkitchen.de/blog/img/04-06-2004-figure1.png" width="435" height="335" alt="" /></p>]]>
      <![CDATA[<p>So this comes down to the following markup:</p>
  <div class="codeblock"> 
    <pre><code>&lt;div id="headmast"&gt;&lt;/div&gt;
	&lt;div id="content"&gt;&lt;/div&gt;
	&lt;div id="left"&gt;&lt;/div&gt;
	&lt;div id="right"&gt;&lt;/div&gt;</code></pre>
  </div>
  <p>Now, since the header has to remain flexible in height (for example if font-size 
    is increased or the browser window is narrowed) I couldn't come up with an 
    exact top offset for the absolute positioned sidebars (#left and #right). 
    So I had to create a new containing block for the 3 column elements:</p>
  <p><img alt="" src="http://www.researchkitchen.de/blog/img/04-06-2004-figure2.png" width="435" height="120" /></p>
  <div class="codeblock"> 
    <pre><code>&lt;div id="headmast"&gt;&lt;/div&gt;
<span class="added">&lt;div id="main"&gt;</span>
	&lt;div id="content"&gt;&lt;/div&gt;
	&lt;div id="left"&gt;&lt;/div&gt;
	&lt;div id="right"&gt;&lt;/div&gt;
<span class="added">&lt;/div&gt;</span></code></pre>
  </div>
  <p>In order to make this new div-container a containing block we have to apply 
    the following style declaration to it:<br />
    <code>position: relative</code></p>
  <p></p>
  <p>So, let's come up with some basic styling and positioning for our three columns, 
    resulting in the following CSS:</p>
  <div class="codeblock"> 
    <pre><code>div#main {
  position: relative;
}
	
div#left {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #E6C187;
  width: 200px;
}

div#right {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #E6C187;
  width: 200px;
}
	
div#content {
  background-color: #D3DBEB;
}</code></pre>
  </div>
  <p>This would result in something you can see on the following picture. Otherwise, 
    you can view it live looking at <a href="http://www.researchkitchen.de/blog/article/containing-block1.html" id="ex1">Example 
    1.</a></p>
  <p><img alt="" src="http://www.researchkitchen.de/blog/img/04-06-2004-figure3.png" width="435" height="120" /></p>
  <p>Since we don't want the content to run &quot;underneath&quot; our left and 
    right column, we have to add some margins to our content div, thus respecting 
    the widths of the absolute positioned columns:</p>
  <div class="codeblock"> 
    <pre><code>div#content {
  background-color: #D3DBEB;
  <span class="added">margin-left: 220px;
  margin-right: 220px;</span>
}</code></pre>
  </div>
  <p>Adding these lines, we should already have achieved something similar to 
    the first image shown above. Technically and according to the specs, we have. 
    However, this is the point where our all-beloved webbrowser Internet Explorer 
    starts to choke (surprised, anyone?). While the page looks as expected in 
    some other browsers, IE6 comes up with something like this:</p>
  <p><img alt="" src="http://www.researchkitchen.de/blog/img/04-06-2004-figure4.png" width="435" height="120" /></p>
  <p>You can verify this by firing up <a href="http://www.researchkitchen.de/blog/article/containing-block2.html" id="ex2">Example 
    2</a> in Internet Explorer.</p>
  <p>I had a <em>really</em> hard time with this broken behaviour and nearly abandoned 
    the whole concept. But then finally I used the debugging rule number one and 
    started to add borders to my div containers. And there you have it! It all 
    came down to one single line:</p>
  <div class="codeblock"> 
    <pre><code>div#main {
  position: relative;
  <span class="added">border-top: 1px solid #fff;</span>
}</code></pre>
  </div>
  <p>See <a href="http://www.researchkitchen.de/blog/article/containing-block3.html" id="ex3">Example 3.</a></p>
  <p>This method obviously has some drawbacks:</p>
  <ol>
    <li> It would render a visible border on any textured backgrounds.</li>
    <li>You won't be able to &quot;stick&quot; the three columns directly to the 
      headmast, cause there would always be a one pixel dividing line between 
      it. </li>
  </ol>
  <p>In my case both points were to disregard. Fine, I thought, just to discover 
    the next flaw within minutes. Woe!</p>
  <p>I tried to add a floated image to the #content div. It didn't show up. I 
    just caught a glimpse of it when reloading the page but it vanished within 
    milliseconds. Believe it or not, the image was rendered beneath the content 
    div and therefore covered by the background color of it.</p>
  <p>These are the styles I used for the floated image, nothing uncommon as you 
    see:</p>
<div class="codeblock"> 
    <pre><code>*.imgleft {
  float: left;
  margin-right: 10px;
}</code></pre>
</div>
  <p>See <a href="http://www.researchkitchen.de/blog/article/containing-block4.html" id="ex4">Example 4</a> using 
    IE6.</p>
  <p>After some desperate efforts to make it work, <strong>this</strong> let me 
    drop the whole thing, coming up with a fixed height headmast and appropriate 
    calculated top offsets for the absolute positioned elements. Not at all satisfying.</p>
  <p>However, I kept it in mind and started to play around with it again yesterday. 
    Finding a solution was more an accident than proper thinking. I added one 
    line to the <code>*.imgleft</code> selector:</p>
<div class="codeblock"> 
    <pre><code>*.imgleft {
  float: left;
  margin-right: 10px;
  <span class="added">position: relative;</span>
}</code></pre>
</div>
  <p>I've demonstrated this in <a href="http://www.researchkitchen.de/blog/article/containing-block5.html" id="ex5">Example 
    5.</a> I am not sure if it is generally a good idea to combine float and position 
    or if it is even correct. It validates, but somehow it feels wrong. Nonetheless, 
    it works in all browsers I tested it (IE6, Mozilla 1.6 and Opera 7.5)</p>
  <p>I am quite sure all of these points are widely known, but it was something 
    new for me, so I felt the need of writing it down!</p>]]>
    </content>
  </entry>
  <entry>
    <title>Minzweb:Reloaded</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/minzwebreloaded.php" />
    <modified>2006-08-25T12:04:07Z</modified>
    <issued>2004-05-21T18:15:19+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.48</id>
    <created>2004-05-21T17:15:19Z</created>
    <summary type="text/plain">Minzweb Redesign is launched.</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>So it is done. I just redesigned my other weblog <a href="http://www.minzweb.de" rel="external">minzweb</a>. </p>
<p>With this redesign came a restructuring. I dropped the english version of minzweb. Well, not really, I didn't want to, because a lot of external sources are still pointing to it. So I decided to mirror the researchkitchen's content on the english version of minzweb. To achieve that, I am grabbing the RSS Full Entry Feed and displaying it on minzweb's frontpage using XSLT. Speaking of XSLT. I am really a bloody greenhorn when it comes to XSLT, so I just played around with it, and it was actually fun. So if anyone can come up with some tips about which XSL processor to use and (more important) how to install it properly on my Windows machine, I'd be quite thankful (I tried Xalan, but I got completely lost, feeling there are some basic things missing in my personal knowledge base ;)</p>
<p>However, go have a look and let me know what you think!</p>]]>
      
    </content>
  </entry>
  <entry>
    <title>How important is the Internet to you?</title>
    <link rel="alternate" type="text/html" href="http://www.researchkitchen.de/blog/archives/how-important-is-the-internet-to-you.php" />
    <modified>2006-08-25T12:06:12Z</modified>
    <issued>2004-05-17T14:44:26+01:00</issued>
    <id>tag:www.researchkitchen.de,2004:/blog//1.47</id>
    <created>2004-05-17T13:44:26Z</created>
    <summary type="text/plain">How important is the Internet to you, regarding its value as an information source? If it is important, do you trust information you find online?</summary>
    <author>
      <name>Minz Meyer</name>
      <url>http://www.researchkitchen.de</url>
      <email>cooking@researchkitchen.de</email>
    </author>
    <dc:subject>Personal Tidbits</dc:subject>
    <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.researchkitchen.de/blog/">
      <![CDATA[<p>I am asking about informative issues here. Where do you get your information from?</p>
<p>A <a href="http://www.detnews.com/2003/technology/0301/31/technology-73430.htm" rel="external">recent survey</a> revealed the fact that almost 73% of experienced Internet users find the Web very or extremely important as an information source.
Compared with all other figures (67% named books as extremely important, 57% called for newspapers while TV ranks 4th at 42%) it turns out that the web is going to be more and more the top media.</p>
<p>I have to say that these figures are conforming with my personal experience. I even dare to say that almost 90% of the things I learn or research are taken from the web, while about 10% go to books. Frankly, I have to admit that the information I am talking about mostly relate to webstandards and web-design. So obviously, there aren't much other sources than the web and books.</p>

<p>But I even read political, financial or sports news rather online than having the TV turned on or buying myself a newspaper. </p>
<p>Which leads us to another interesting question:</p>
<h3>Do you trust information you find on the web?</h3>
<p>As herein before mentioned survey found out, only half of the people believe what they read online. Which is, in fact, amazing. I mean, where else do you have the opportunity finding multiple resources about various issues?</p>
<p>I cannot double-check things that are told to me by the news anchorman or that are written in a newspaper (unless of course I go online and do a research). You can be sure that almost everything that is broadcasted or written down is conformed to either a station's policy or an editor's subjective opinion, or it is influenced by some kind of lobby.</p>
<p>But then, on the other hand, this might be the explanation as well. The ability of double-checking and comparison is suitable for exposing badly researched and sleazy gathered information immediately. Maybe a lot of internet users found out about it or experienced this kind of maggot ridden information, thus having legitimate doubts about the trustworthyness of the web.</p>
<p>So if you are the person to produce information, make sure you have looked well into the subject. Maybe it will help to increase the overall willingness to trust online resources more.</p> 
<p>I'd like to leave you here with a wink and the recommendation of not making use of the Rule of Acquisition #152</p>
<div class="blockquote"><blockquote cite="http://www.dmwright.com/html/ferengi.htm"><p>A lie is a way to tell the truth to someone who doesn't know.</p></blockquote></div>

<p>Be sure, Google will unmask you!</p>
]]>
      
    </content>
  </entry>

</feed>