<?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>shell8 (:&#124;)[:&#124;] &#187; help</title>
	<atom:link href="http://www.shell8.net/tag/help/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.shell8.net</link>
	<description>médiaipari faszkivan</description>
	<lastBuildDate>Thu, 18 Dec 2008 16:09:46 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>IE select width bug</title>
		<link>http://www.shell8.net/2007/11/21/ie-select-width-bug/</link>
		<comments>http://www.shell8.net/2007/11/21/ie-select-width-bug/#comments</comments>
		<pubDate>Wed, 21 Nov 2007 11:07:09 +0000</pubDate>
		<dc:creator>_Nec</dc:creator>
				<category><![CDATA[dev]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[help]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.shell8.net/2007/11/21/ie-select-width-bug/</guid>
		<description><![CDATA[Elönt a hideg veríték, amikor az űrlapjaidba olyan select mezőket kell tenni melyek tartalma bazi széles, de a design keskeny?
Újabb és újabb okok miatt utálod az Internet Explorert?
Kis jQuery csuklógyakorlat és a problémád tovaszáll &#8211; még ha többé kevésbé félmegoldás is.

div.fixedWidth {
	overflow: hidden;
	position: relative;
}
div.fixedWidth div.fake {
	position: absolute;
	overflow: hidden;
	right: 0;
	top:0;
	width: 22px;	
}
select.w200 { width: 200px; }



Lorem ipsum [...]]]></description>
			<content:encoded><![CDATA[<p>Elönt a hideg veríték, amikor az űrlapjaidba olyan select mezőket kell tenni melyek tartalma bazi széles, de a design keskeny?<br />
Újabb és újabb okok miatt utálod az Internet Explorert?</p>
<p>Kis jQuery csuklógyakorlat és a problémád tovaszáll &#8211; még ha többé kevésbé félmegoldás is.</p>
<style type="text/css">
div.fixedWidth {
	overflow: hidden;
	position: relative;
}
div.fixedWidth div.fake {
	position: absolute;
	overflow: hidden;
	right: 0;
	top:0;
	width: 22px;	
}
select.w200 { width: 200px; }
</style>
<p><!--[if IE]></p>
<style type="text/css"> select.w200 {width: auto; }</style>
<p><![endif]--></p>
<form><fieldset></p>
<select class="fixedWidth w200"><option>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </option><option>Morbi varius augue id libero. </option><option>Donec pharetra sollicitudin nulla. </option><option>Nam sit amet dui. </option><option>Nam risus dolor, vestibulum sed, consequat sit amet, molestie a, turpis. </option><option>Aliquamondimentum, lacus sit amet volutpat feugiat, turpis mauris semper purus, vitae malesuada elit purus a ante.</option><option>Aenean varius nonummy nunc. </option><option>Fusce bibendum mi. 	</option></select>
<p></fieldset><br />
</form>
<p><script type="text/javascript" src="http://www.shell8.net/wp-content/uploads/2007/11/selectiebug.js"></script></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</pre></td><td class="code"><pre class="javascript"><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>	
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>jQuery.<span style="color: #006600;">browser</span>.<span style="color: #006600;">msie</span><span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'select.fixedWidth'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>i,s<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			s.<span style="color: #006600;">origWidth</span> = s.<span style="color: #006600;">offsetWidth</span>;			
			s.<span style="color: #006600;">setWidth</span> = <span style="color: #003366; font-weight: bold;">new</span> Number<span style="color: #66cc66;">&#40;</span> s.<span style="color: #006600;">className</span>.<span style="color: #006600;">match</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066FF;">/.<span style="color: #006600;">*</span> w<span style="color: #66cc66;">&#40;</span>\d<span style="color: #66cc66;">&#123;</span><span style="color: #CC0000;">1</span>,<span style="color: #CC0000;">3</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">*</span>/</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;				
		<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">wrap</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&lt;div class=&quot;fixedWidth&quot;&gt;&lt;/div&gt;'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div.fixedWidth'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>i,s<span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>				
			$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">css</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'width'</span>, $<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'select.fixedWidth'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">setWidth</span> <span style="color: #66cc66;">&#41;</span>
				.<span style="color: #006600;">append</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&lt;div class=&quot;fake&quot;&gt;&lt;select&gt;&lt;/select&gt;&lt;/div&gt;'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div.fake select'</span><span style="color: #66cc66;">&#41;</span>
				.<span style="color: #006600;">css</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>marginLeft: <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'select.fixedWidth'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">origWidth</span><span style="color: #CC0000;">-22</span><span style="color: #66cc66;">&#41;</span> * <span style="color: #CC0000;">-1</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>
				.<span style="color: #006600;">change</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'select.fixedWidth'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">selectedIndex</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">selectedIndex</span>;
				<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'select.fixedWidth'</span><span style="color: #66cc66;">&#41;</span>
				.<span style="color: #006600;">change</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div.fake select'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">selectedIndex</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">selectedIndex</span>;
				<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>
				.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #66cc66;">&#41;</span>
					.<span style="color: #006600;">clone</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>
					.<span style="color: #006600;">appendTo</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span>s<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">find</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div.fake select'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>	
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#40;</span>jQuery<span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

<p>Félmegoldás, mert</p>
<ul>
<li>a nyilacska is működik, jobb mintha képpel cserélnénk le, de rosszul pozícionál</li>
<li>js nélkül, ha kell a design, marad a crop, vagy más kerülőút</li>
<li>mert még mindíg az IE szarjait kerülgetjük&#8230;</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.shell8.net/2007/11/21/ie-select-width-bug/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
