<?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>芳草苑 &#187; css</title>
	<atom:link href="http://blog.goods-pro.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.goods-pro.com</link>
	<description>草的家园，花在哪里？</description>
	<lastBuildDate>Sun, 05 Sep 2010 01:01:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS styling without images</title>
		<link>http://blog.goods-pro.com/1817/css-styling-without-images/</link>
		<comments>http://blog.goods-pro.com/1817/css-styling-without-images/#comments</comments>
		<pubDate>Thu, 02 Sep 2010 20:49:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1817</guid>
		<description><![CDATA[I am quite surprised with the styling effect achieved by pure CSS without the help of images. I can round corner and rotate html elements without creating any background images.
See the result I get.
And this is the ONLY product image in this CSS styling demo:
Although the effect is comprehensive, but with the help of jQuery [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1817/css-styling-without-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stupid IE6</title>
		<link>http://blog.goods-pro.com/1548/stupid-ie6/</link>
		<comments>http://blog.goods-pro.com/1548/stupid-ie6/#comments</comments>
		<pubDate>Tue, 25 May 2010 19:24:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1548</guid>
		<description><![CDATA[我负责的一个网站的访问者中， IE6 用户仍占 6.2%，这个比例不尴不尬。改版初期对他们照顾不够，今天下狠心花了时间去测试 IE6 下的兼容性。几小时之后，IE6 下都能完全正常显示了，我也多了一些心得。

如果要加层，先设置该层 text-align:left，否则 IE6 下与层有点关系的元素，不管它是在层内还是层外，位置会摆置得莫名其妙。特别是当看到层外元素整体摆错位置，我更莫名其妙，实在搞不懂 IE6 对层的理解是什么。如果一开始就对层进行初始化（{ text-align:left; position:relative; }）就会节省很多时间。
避免使用高级的 css 语法，比如多 class 的连贯，.class-a.class-b { color:red; }。本希望该样式只应用于同时具有 class-a 和 class-b 元素，结果 IE6 不理解。如果 IE6 对不理解的 selector 作忽略处理倒还好，可是 IE6 把该样式应用到了所有 class-b 元素（只具有 class-a、不具有 class-b 的元素未受影响），IE6 是不是显得不懂装懂？祸害很大，害我多花了一小时在找被错误影响了的 class-b 元素的原因。如果实在想要多 class 的连贯的 selector，那比较可行的办法是用 jquery 来保证跨浏览器的兼容性，即 $jquery(&#8217;.class-a.class-b&#8217;) 。

题外话：很久前我写过一篇Cross-browser CSS。今天多了两点心得，本想直接写入以前的文章。转念一想不对，今天的心得是今天的，以前的心得是以前的，以后万一我来翻看自己的文章，我也想从中看出我的成长历程，混在一起就看不出历程了。但从心得角度讲，最好把所有 cross-browser css 的内容写在一起，否则，若干年后我再看Cross-browser CSS那一页时不一定想起今天补充的两点。似乎没什么好办法（即使用 related [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1548/stupid-ie6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Use zoom:1 as a generic IE css fix</title>
		<link>http://blog.goods-pro.com/1541/use-zoom1-as-a-generic-ie-css-fix/</link>
		<comments>http://blog.goods-pro.com/1541/use-zoom1-as-a-generic-ie-css-fix/#comments</comments>
		<pubDate>Fri, 21 May 2010 17:10:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1541</guid>
		<description><![CDATA[我用“拉门”的方法做了个两端圆弧背景，宽度不固定的按钮，简言之就是用两个嵌套的 span，应用了以下 css


span { background:url(round-corner.gif) 0 50% no-repeat; padding:0 0 0 12px; }
span span { background-position:100% 50%; padding:0 12px 0 0; }

但是在 IE6 下，按钮左边界是圆弧，右边界仍是直角。如果我在 span 上增加 width:100%，左右倒都是圆弧，但由于 IE6 对 width 的定义不同于其他浏览器，按钮的宽度被改变了。
在没有 width 可用的情况下，怎么办？用


span {zoom:1; }

延伸阅读的话，在 IE6 下某些元素没有 layout，用 {zoom:1; } 可以让这些没有 layout 的元素表现得象有 layout （我这么表述可能不准确），从而改善低版本 IE 对 css 标准的理解。{zoom:1; } 是 IE fix 的一个捷径，目前没有发现对其他浏览器带来副作用。
]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1541/use-zoom1-as-a-generic-ie-css-fix/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>No way to control inline elements&#8217; height</title>
		<link>http://blog.goods-pro.com/1454/no-way-to-control-inline-elements-height/</link>
		<comments>http://blog.goods-pro.com/1454/no-way-to-control-inline-elements-height/#comments</comments>
		<pubDate>Thu, 25 Mar 2010 19:56:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1454</guid>
		<description><![CDATA[今天在 css 里遇上一个以前不曾注意的细节：
假设&#60;a&#62;和&#60;img&#62;的 border, margin 和 padding均为0，一个被&#60;a&#62; wrapped 的 &#60;img&#62; (&#60;a&#62;&#60;img/&#62;&#60;/a&#62;) 比单独一个 &#60;img/&#62; 在 Firefox 中 render 要高 3px，在 chrome 和 ie 下也会高一些（但我未测量数值）。
实例代码


&#60;style type=&#34;text/css&#34;&#62;
a { text-decoration:none; }
a, img { border:0; padding:0; margin:0; }
.col-1 { float:left; text-align:right; width:49%; }
.col-2 { float:right; text-align:left; width:49%; }
.line { height:1px; border-top:1px solid orange; }
&#60;/style&#62;

&#60;div class='col-set'&#62;
&#60;div class='col-1'&#62;
&#60;a href=&#34;#&#34;&#62;
&#60;img src=&#34;not-lineup.jpg&#34;/&#62;
&#60;/a&#62;
&#60;div class='line'&#62;&#38;nbsp;&#60;/div&#62;
&#60;/div&#62;
&#60;div class='col-2'&#62;
&#60;img [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1454/no-way-to-control-inline-elements-height/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Style Magento checkout form fields without touching the core code</title>
		<link>http://blog.goods-pro.com/1341/style-magento-checkout-form-fields-without-touching-the-core-code/</link>
		<comments>http://blog.goods-pro.com/1341/style-magento-checkout-form-fields-without-touching-the-core-code/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 15:31:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[magento]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1341</guid>
		<description><![CDATA[Although I can change css complete restyle the checkout forms, this is not what I want to discuss today. What I want to achieve are:

fix City required asterisk not showing bug
change Address lines from full width to half width as City

The City required asterisk is hidden by a javascript wrongly. I found City and State/County/Province [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1341/style-magento-checkout-form-fields-without-touching-the-core-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make best use of Godaddy Free Products</title>
		<link>http://blog.goods-pro.com/1247/make-best-use-of-godaddy-free-products/</link>
		<comments>http://blog.goods-pro.com/1247/make-best-use-of-godaddy-free-products/#comments</comments>
		<pubDate>Sat, 05 Dec 2009 11:37:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[godaddy]]></category>
		<category><![CDATA[marketing]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1247</guid>
		<description><![CDATA[我不算一个好顾客——很挑剔，但可以算是 Google, Godaddy 和 Tesco 的忠实顾客，因为他们的产品或服务几乎无可挑剔——又扯远了。
我要讲的是如何把 Godaddy 购买域名后的免费赠品用足用好。Godaddy Free Products 有 Free Hosting, Free Blogcast 和 Free Photo Album。虽然我另租 1&#38;1 的服务器，但 Godaddy 这么客气，我想不要浪费了人家的热忱。再说，在  Godaddy Free Products 上搞搞实验，物理上跟生产服务器隔绝，用得也心安。
只是 Godaddy Free Products 既然是免费的，同时广告也来了。拿它来建商业站点肯定是不合适的，就是自己人搞实验对着广告也烦。有没有办法去掉？我稍作搜索就有答案：可爱的 css 发挥一下

#conash3D0 {display:none; }

因为答案来得太容易，没有我发挥的空间总不心甘。于是我又想，我每装一个软件都要去改 css，太烦；有些 一键安装的产品（比如 Free Blogcast 和 Free Photo Album）也不允许我改 css，怎么办？答案是 user css。以 Mozilla Firefox 3.5.5 for Fedora 11 为例，具体做法是：
打开 /home/{myusername}/.mozilla/profile.ini，看里面说的 profile [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1247/make-best-use-of-godaddy-free-products/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cross-browser CSS</title>
		<link>http://blog.goods-pro.com/1129/cross-browser-css/</link>
		<comments>http://blog.goods-pro.com/1129/cross-browser-css/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 10:12:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=1129</guid>
		<description><![CDATA[Today I did something CSS cross-browser testing. Here are some of my findings today.

Validate Xhtml / Html before styling. I put form element between table and tr element which make it an invalid xhtml document and cause CSS rendering in a strange way in IE. (IE is generally bad in W3C standards but this time [...]]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/1129/cross-browser-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to center the table</title>
		<link>http://blog.goods-pro.com/471/how-to-center-the-table/</link>
		<comments>http://blog.goods-pro.com/471/how-to-center-the-table/#comments</comments>
		<pubDate>Tue, 09 Dec 2008 23:22:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=471</guid>
		<description><![CDATA[在网页里，如何让整个表格居中？
我一开始想到的是把&#60;table&#62;嵌套在&#60;div style=&#8221;text-align:center&#8221;&#62;里，结果发现这样的代码在浏览器里查看表格确实是居中的，但是，同样的代码写成的html邮件表现的就是左对齐（似乎div style=&#8221;text-align:center&#8221;不起作用）。
为了保证html格式的邮件里的table能居中，我搜寻到了两种方式：

直接用table的align属性：&#60;table align=&#8221;center&#8221;&#62; (但这不符合W3C XHTML 1.0 Strict规范)
使用css margin:auto：&#60;table style=&#8221;margin-left:auto; margin-right:auto&#8221;&#62;

]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/471/how-to-center-the-table/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>流式布局</title>
		<link>http://blog.goods-pro.com/39/%e6%b5%81%e5%bc%8f%e5%b8%83%e5%b1%80/</link>
		<comments>http://blog.goods-pro.com/39/%e6%b5%81%e5%bc%8f%e5%b8%83%e5%b1%80/#comments</comments>
		<pubDate>Wed, 05 Dec 2007 23:03:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[小小草]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[fluid layout]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://blog.goods-pro.com/?p=39</guid>
		<description><![CDATA[自从读了Jakob Nielsen的«Homepage Usability»一书以后，我特别fancy fluid layout，这成了我做任何网站一定要达到的目标之一。经过一段时间的研究，我对fluid layout也算小有所成，最有心得的部分就是不借助table，不依赖javascript，在有不定宽度的图片情况下，做图文混排的fluid layout。
我也很在于其他层面的usability，因此每遇到user friendly的东西，我总要赞叹一番。新版本的wordpress，堪称website usability的典范，但它的default theme竟然没有采用fluid layout，不禁让我唏嘘。于是我准备发挥一下我的专长，同时也为open source贡献一份绵薄之力，就改掉它的fixed layout。
我花了点时间看了一下style.css，大致知道要怎么去改进它啦。现在大家看到的页面只是我搞了测试以后的中间产品，四个角都没对齐，莫怪。剩下的事情就是要裁减背景图片，做个拉门，然后就差不多了。但我有个毛病：难题在一团乱麻的状态我的战斗力很强，有了头绪以后反而懒得去落实了。 这个差不多了的style.css何时能变成最终成品，我也不知道。
要不，你来donate我一下？
]]></description>
		<wfw:commentRss>http://blog.goods-pro.com/39/%e6%b5%81%e5%bc%8f%e5%b8%83%e5%b1%80/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
