<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Christoph Schüßler &#187; Browser</title>
	<atom:link href="http://herr-schuessler.de/blog/tags/browser/feed/" rel="self" type="application/rss+xml" />
	<link>http://herr-schuessler.de/blog</link>
	<description>Dev-Blog</description>
	<lastBuildDate>Sat, 10 Sep 2011 11:55:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Overlapping select field bug in IE6 &#8211; solved jQuery-style</title>
		<link>http://herr-schuessler.de/blog/overlapping-select-field-bug-in-ie6-solved-jquery-style/</link>
		<comments>http://herr-schuessler.de/blog/overlapping-select-field-bug-in-ie6-solved-jquery-style/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 08:43:25 +0000</pubDate>
		<dc:creator>Christoph Schüßler</dc:creator>
				<category><![CDATA[Browser]]></category>
		<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[browser quirks]]></category>
		<category><![CDATA[english]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://herr-schuessler.de/blog/?p=282</guid>
		<description><![CDATA[When using drop-down navigation like Son of Suckerfish, which entails placing absolute positioned layers above the content layer, Internet Explorer 6 displays once again really stupid behavior when it comes to HTML forms with the SELECT element. When the drop-down &#8230; <a href="http://herr-schuessler.de/blog/overlapping-select-field-bug-in-ie6-solved-jquery-style/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When using drop-down navigation like <a href="http://htmldog.com/articles/suckerfish/dropdowns/">Son of Suckerfish</a>, which entails placing absolute positioned layers above the content layer, Internet Explorer 6 displays once again really stupid behavior when it comes to <code>HTML</code> forms with the <code>SELECT</code> element. When the drop-down layer hovers above a form, the <code>SELECT</code> still shines through, it stays above it and cannot be convinced by <code>z-index</code> or any other CSS trick to go where it belongs.<br />
<span id="more-282"></span></p>
<p>Some solutions have been proposed, among them:</p>
<ul>
<li>hiding the <code>select</code> element on hover</li>
<li>replacing it with an <code>input</code> element on hover</li>
<li>or <a href="http://www.bringdownie6.com/">stop caring about IE6</a> altogether</li>
</ul>
<p>These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to <a href="http://www.macridesweb.com/oltest/IframeShim.html">place an invisible, empty <code>IFRAME</code></a> in the layer that will be positioned above the <code>SELECT</code> element.</p>
<p>Here&#8217;s how to do this jQuery-style:</p>
<p><strong>The jQuery-Plugin:</strong></p>
<pre name="code" class="js">
jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = '<!--[if IE 6]>' +
                      '<iframe src="javascript:false;" style="height: ' +
                      h +
                      'px; width: ' +
                      w +
                      'px" class="selectOverlap">' +
                      '</iframe>' +
                      '<![endif]-->'
        $(this).prepend(iframe);
    });
}
</pre>
<p><strong>The Plugin setup:</strong></p>
<pre name="code" class="js">
$(function() {
    $('.myHoverClass').activeXOverlap();
});
</pre>
<p>where <code>.myHoverClass</code> references all elements that should hover above the select.</p>
<p><strong>The required CSS:</strong></p>
<pre name="code" class="css">
<!--[if IE 6]>
iframe.selectOverlap {
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
<![endif]-->
</pre>
<p>What this does is placing an <code>Iframe</code> behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.</p>
]]></content:encoded>
			<wfw:commentRss>http://herr-schuessler.de/blog/overlapping-select-field-bug-in-ie6-solved-jquery-style/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML-Code in verschiedenen Browsern testen</title>
		<link>http://herr-schuessler.de/blog/design-in-verschiedenen-browsern-testen/</link>
		<comments>http://herr-schuessler.de/blog/design-in-verschiedenen-browsern-testen/#comments</comments>
		<pubDate>Thu, 08 Feb 2007 10:33:04 +0000</pubDate>
		<dc:creator>Christoph Schüßler</dc:creator>
				<category><![CDATA[Browser]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Deutsch]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[Test]]></category>

		<guid isPermaLink="false">http://tutorials.anestetic.net/index.php/2007/02/08/design-in-verschiedenen-browsern-testen/</guid>
		<description><![CDATA[Einige Tools für alle, die keinen Fuhrpark von Macs, Windows- und Linux-PCs ihr eigen nennen und trotzdem ihr Design schnell für Internet Explorer 5, 6, 7, Firefox, Safari, Konqueror und Opera testen möchten: Browsershots.org Erstellt mehr oder weniger schnell (zwischen &#8230; <a href="http://herr-schuessler.de/blog/design-in-verschiedenen-browsern-testen/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Einige Tools für alle, die keinen Fuhrpark von Macs, Windows- und Linux-PCs ihr eigen nennen und trotzdem ihr Design schnell für Internet Explorer 5, 6, 7, Firefox, Safari, Konqueror und Opera testen möchten:<br />
<span id="more-14"></span></p>
<p><strong>Browsershots.org</strong><br />
Erstellt mehr oder weniger schnell (zwischen 10 Min. und 4 Stunden) Screenshots auf einer Vielzahl von Plattform-Browser-Kombi.<br />
<a href="http://browsershots.org">http://browsershots.org</a></p>
<p><strong>Multiple IE</strong><br />
Tredosoft.com stellt diesen netten Installer zur Verfügung, mit dem sich nach einem Update auf IE7 alte IEs als Standalone-Versionen einrichten lassen.<br />
<a href="http://tredosoft.com/Multiple_IE">http://tredosoft.com/Multiple_IE</a></p>
<p><strong>IE Tester</strong><br />
Ein Webbrowser, der verschiedene Rendering-Engines emuliert. Kann inzwischen neben IE6 und IE7 auch IE8 Beta sowie weitere der üblichen Verdächtigen.<br />
<a href="http://www.my-debugbar.com/wiki/IETester/HomePage">http://www.my-debugbar.com/wiki/IETester/HomePage</a></p>
]]></content:encoded>
			<wfw:commentRss>http://herr-schuessler.de/blog/design-in-verschiedenen-browsern-testen/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

