<?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>Blog de SEO, Interfaces e Comércio Eletrônico &#187; hack</title> <atom:link href="http://herictilly.com.br/blog/tag/hack/feed/" rel="self" type="application/rss+xml" /><link>http://herictilly.com.br/blog</link> <description>SEO, Comércio Eletrônico, Google, Interfaces, jQuery</description> <lastBuildDate>Wed, 17 Aug 2011 11:12:42 +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>CSS Position Fixed no IE6</title><link>http://herictilly.com.br/blog/css/css-position-fixed-ie6/</link> <comments>http://herictilly.com.br/blog/css/css-position-fixed-ie6/#comments</comments> <pubDate>Thu, 10 Jun 2010 15:24:53 +0000</pubDate> <dc:creator>Héric Tilly</dc:creator> <category><![CDATA[CSS]]></category> <category><![CDATA[hack]]></category> <category><![CDATA[ie6]]></category> <category><![CDATA[position fixed]]></category> <guid
isPermaLink="false">http://herictilly.com.br/blog/?p=319</guid> <description><![CDATA[Como já quebrei my a cabeça pra fazer o position:fixed funcionar no IE6, resolvi postar para que outros não percam tanto tempo fazendo essa Missão Impossível, rs Vamos lá, se voc6e codificar o CSS assim, ele vai funcionar na maioria dos browsers atuais : .fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* position fixed Bottom [...]]]></description> <content:encoded><![CDATA[<div
class="tweetmeme_button" style="float: right; margin-left: 10px;"> <a
href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fherictilly.com.br%2Fblog%2Fcss%2Fcss-position-fixed-ie6%2F"><br
/> <img
src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fherictilly.com.br%2Fblog%2Fcss%2Fcss-position-fixed-ie6%2F&amp;style=normal&amp;service=is.gd&amp;b=2" height="61" width="50" title="CSS Position Fixed no IE6" alt=" CSS Position Fixed no IE6" /><br
/> </a></div><p>Como já quebrei my a cabeça pra fazer o position:fixed funcionar no IE6, resolvi postar para que outros não percam tanto tempo fazendo essa Missão Impossível, rs</p><p>Vamos lá, se voc6e codificar o CSS assim, ele vai funcionar na maioria dos browsers atuais :</p><pre>
.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* position fixed Left */{position:fixed;right:auto;left:0px;}
.fixed-right /* position fixed right */{position:fixed;right:0px;left:auto;}
</pre><p>Porém, entretanto .. muitas pessoas ainda usam o IE6 e não podemos desprezar estes usuários, afinal, eles também geram tráfego e comprar nossos serviços e produtos.<br
/> Para driblar as bugs, faça desse jeito que irá funcionar.</p><p>Crie um IE6 Hack, que na verdade é uma réplica da classe CSS, porém só é interpretada pelos IEs qdo iniciada com um simples &#8220;*classe&#8221;. Se quiser algo somente para o IE6, utilize &#8220;_classe&#8221;</p><p>Vamos ao código:</p><pre>
* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right {position:absolute;right:auto; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left {position:absolute;right:auto; left:expression(eval(document.documentElement.scrollLeft));}
</pre><p>Testei aqui e funcionou perfeitamente.</p><p>Caso encontrem algum problema d eimplementação ou bug, comments please <img
src='http://herictilly.com.br/blog/wp-includes/images/smilies/icon_smile.gif' alt="icon smile CSS Position Fixed no IE6" class='wp-smiley' title="CSS Position Fixed no IE6" /></p><div
class="trackable_sharing"><a
href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fherictilly.com.br%2Fblog%2Fcss%2Fcss-position-fixed-ie6%2F" style="text-decoration: none; white-space: nowrap;" title="Facebook" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Facebook','http://herictilly.com.br/blog/css/css-position-fixed-ie6/']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img
align="absmiddle" src="http://herictilly.com.br/blog/wp-content/plugins/trackable-social-share-icons/buttons/1//facebook.png" alt="facebook CSS Position Fixed no IE6" width="32" height="32" title="CSS Position Fixed no IE6" /></a> <a
href="http://twitter.com/share?url=http%3A%2F%2Fherictilly.com.br%2Fblog%2Fcss%2Fcss-position-fixed-ie6%2F&text=CSS+Position+Fixed+no+IE6" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://herictilly.com.br/blog/css/css-position-fixed-ie6/']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img
align="absmiddle" src="http://herictilly.com.br/blog/wp-content/plugins/trackable-social-share-icons/buttons/1//twitter.png" alt="twitter CSS Position Fixed no IE6" width="32" height="32" title="CSS Position Fixed no IE6" /></a> <a
href="mailto:?subject=Check out http%3A%2F%2Fherictilly.com.br%2Fblog%2Fcss%2Fcss-position-fixed-ie6%2F" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://herictilly.com.br/blog/css/css-position-fixed-ie6/']); "><img
align="absmiddle" src="http://herictilly.com.br/blog/wp-content/plugins/trackable-social-share-icons/buttons/1//email.png" alt="email CSS Position Fixed no IE6" width="32" height="32" title="CSS Position Fixed no IE6" /></a></div>]]></content:encoded> <wfw:commentRss>http://herictilly.com.br/blog/css/css-position-fixed-ie6/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> </channel> </rss>
