Tag: css

  • Learned something basic

    今天又长知识了。

    首先,最简单的,更正了长久以来的想当然,php 下 explode(‘,’, ”) != array(),而是得到长度为 1 的数组,key 是数值 0,value 是空字符串。天哪,我有多少个程序是基于 explode(‘,’, ”) == array() 写下去的,这下影响大了,得好好查一查。

    其次,发现一个不晓得是 sshfs 的 bug 还是 gedit 的 bug。复制错误的过程是:用 Nautilus 或 Dolphin 打开 sshfs 挂载的目录,右击创建一个新文件。文件创建是成功的,属性是 774,用 gedit 打开它却无法保存,提示是没有写权限;但用 kwrite 编辑保存一切正常;用 gedit 再编辑 kwrite 编辑过的文件又能保存。或者,在右击创建一个新文件后,执行一次 chmod 774 filename,也能用 gedit 编辑保存了。

    再次,发现在 IE6 下,用 javascript 增大元素的尺寸(比如 jQuery widget 化,增加 border,增加 padding,等),会增大父元素的尺寸。哪怕父元素已用 css 静态赋以宽度值,宽度也会被改变,这是某些精心布局在标准浏览器下很好看,到了 IE6 就面目全非的一大原因。万恶的 IE6 啊,当然从另一方面,说明精心布局仍不够“精心”。为 IE6 布局好比极限运动,挑战好心情的极限;如果看到下属多花一倍时间 fix for IE6,挑战的也是老板的心理极限。

    然后,发现 jQuery gallery 里有两个 themes (Humanity, Vader) 的参数不太正常,多了 tr 参数,不知道怎么多出来的,删了似乎没影响。

    最后,如果父元素包含所有的子元素都是 float:left 或 float right 的话,不做特殊操作,父元素是没有高度的。父元素的后续元素用一个 clear:both 就能站到该站的位置,但如要为父元素本身画一个边框就稍有难度。最早我用的办法是在这个元素所有的子元素之后增加一个隐形的<div style=”height:0; clear:both;”></div>,但这个硬生生加进去的元素改变了 DOM 结构,破坏了语义,不够 SEO。在 Magento 里学到了另一个方法 :after { clear:both; },如 .clearer 的示例,但要为低版本的 IE 专门写 clear after fix。我维护一份自己的 style.css,override Magento 原版的 style.css。我觉得这个任务就很“繁重”,如果再来一份自己的 style-ie.css,override Magento 原版的 style-ie.css,就为 clear after fix?总觉得小题大作。今天发现一个 clear after all floating children 的 neat solution,就是在父元素上设定 style=”overflow:auto; zoom:1″。overflow 让父元素调整到应有的高度,zoom 也是必须的,否则 IE6…,唉!

    最后的最后,发现 z-index 值在 IE6 下被重置的简单通用的 fix。这个问题的来源是若干个 position 后的元素,给它们设定 z-index,IE6 下根本不按设定值 layout,而且还摸不到规律。比如下拉菜单,有时被其他东西给压住。fix 是赋予下拉菜单 z-index 时,赋予父元素(整个菜单)更高的 z-index。

  • Limit table column width in IE6

    I have a 2×2 table coded like this:

    <table>
    <tr>
    <th id="r1c1">
    Short heading
    </th>
    <th id="r1c2">
    Short heading
    </th>
    </tr>
    <tr>
    <td id="r2c1">
    Very very long content blah blah blah
    </td>
    <td id="r2c2">
    Short content
    </td>
    </tr>
    </table>
    

    In the td cell r2c1, if the content does wrap, it takes more width than r1c1, say r1c1 requires 100px width, and r2c1 requires 300px.

    But I want r2c1 content words wrap and its width limits to 100px. I put width style in the first row, i.e.:

    <th id="r1c1" style="width:100px">
    

    It does not work in IE6.

    Then I put width attribute on col, i.e.:

    <table>
    <col width="100"/>
    <col width="100"/>
    ...
    

    It does not work in IE6, either.

    Then I put width attribute in r2c1, i.e.:

    <th id="r2c1" width="100">
    

    It does not work in IE6, either.

    At last, I put width style in r2c1, i.e.:

    <th id="r2c1" style="width:100px">
    

    Finally it works in IE6.

    I knew td’s width attribute is deprecated but I didn’t know deprecated IE6 does not read deprecated attribute.

  • CSS styling without images

    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.

    Comprehensive styling using pure CSS
    Comprehensive styling using pure CSS

    And this is the ONLY product image in this CSS styling demo:

    Halloin 3D gift bags
    Halloin 3D gift bags

    Although the effect is comprehensive, but with the help of jQuery plugins, the syntax is very simple. Just a few lines of text.

  • Stupid IE6

    我负责的一个网站的访问者中, IE6 用户仍占 6.2%,这个比例不尴不尬。改版初期对他们照顾不够,今天下狠心花了时间去测试 IE6 下的兼容性。几小时之后,IE6 下都能完全正常显示了,我也多了一些心得。

    1. 如果要加层,先设置该层 text-align:left,否则 IE6 下与层有点关系的元素,不管它是在层内还是层外,位置会摆置得莫名其妙。特别是当看到层外元素整体摆错位置,我更莫名其妙,实在搞不懂 IE6 对层的理解是什么。如果一开始就对层进行初始化({ text-align:left; position:relative; })就会节省很多时间。
    2. 避免使用高级的 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(‘.class-a.class-b’) 。

    题外话:很久前我写过一篇Cross-browser CSS。今天多了两点心得,本想直接写入以前的文章。转念一想不对,今天的心得是今天的,以前的心得是以前的,以后万一我来翻看自己的文章,我也想从中看出我的成长历程,混在一起就看不出历程了。但从心得角度讲,最好把所有 cross-browser css 的内容写在一起,否则,若干年后我再看Cross-browser CSS那一页时不一定想起今天补充的两点。似乎没什么好办法(即使用 related posts 也比较勉强)。

  • Use zoom:1 as a generic IE css fix

    我用“拉门”的方法做了个两端圆弧背景,宽度不固定的按钮,简言之就是用两个嵌套的 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 的一个捷径,目前没有发现对其他浏览器带来副作用。

  • No way to control inline elements’ height

    今天在 css 里遇上一个以前不曾注意的细节:
    假设<a>和<img>的 border, margin 和 padding均为0,一个被<a> wrapped 的 <img> (<a><img/></a>) 比单独一个 <img/> 在 Firefox 中 render 要高 3px,在 chrome 和 ie 下也会高一些(但我未测量数值)。

    实例代码

    
    <style type="text/css">
    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; }
    </style>
    
    <div class='col-set'>
    <div class='col-1'>
    <a href="#">
    <img src="not-lineup.jpg"/>
    </a>
    <div class='line'>&nbsp;</div>
    </div>
    <div class='col-2'>
    <img src="not-lineup.jpg"/>
    <div class='line'>&nbsp;</div>
    </div>
    </div>
    
    
    Inline elements 不等高实例截图
    Inline elements 不等高实例截图

    我想了很久才知道这都是因为<a>和<img>是inline elements。Inline elements 有一些特性

    • they flow with text.
    • they have line-height.
    • the element height and width is dependent on the content and will not collapse to the borders of the parent element.

    Inline elements 没有 height,在上例中也无法用 line-height 去控制高度:<a>的底部与<img>的底部有 3px 间距,我试遍我能想到的所有 css 属性都无法消除这个间距,除非——

    将<a>设为display:block!Block elements 的 border, margin 和 padding 都是有效的,控制高度就不是问题了。

  • Style Magento checkout form fields without touching the core code

    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:

    1. fix City required asterisk not showing bug
    2. 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 are put into one li, i.e. <li><div></div></li>. It might be something should happen on State/County/Province but happens on City. If I close li after City, and reopen it before State/County/Province, bug is fixed. By the way, I hide State/County/Province.

    To show a field in full length, Magento uses
    <li><label><span></span></label><input/></li>
    To show a field in half length, Magento uses
    <li><div><label><span></span></label><input/></div></li>

    So just find the right place to insert <div> and close it for Address lines, I easily style them to the same length of City.

  • Make best use of Godaddy Free Products

    我不算一个好顾客——很挑剔,但可以算是 Google, Godaddy 和 Tesco 的忠实顾客,因为他们的产品或服务几乎无可挑剔——又扯远了。

    我要讲的是如何把 Godaddy 购买域名后的免费赠品用足用好。Godaddy Free Products 有 Free Hosting, Free Blogcast 和 Free Photo Album。虽然我另租 1&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 path 是什么,通常是跟 profile.ini 同级的一个目录,名字是 {randomchars}.default。

    在 /home/{myusername}/.mozilla/{randomchars}.default/chrome 目录下新建一个 userContent.css,内容是:

    #conash3D0 {display:none !important; }
    

    使用 !important 只是保证这条规则的优先权,对付目前 Godaddy 的广告条,不用也可以。因为不在服务器端动手脚,恐怕 Godaddy 到死也不会意识到它的广告被屏蔽了。万一它改进 javascript 来探测广告条的 display 状况,那 user 再换一条规则:

    #conash3D0 {position:absolute !important; left:-10000px !important}
    

    也是一样效果(你的显示器不会大于 10,000 pixels 吧)。不过 Godaddy 不会有时间整天琢磨这些玩意,所以有两条规则备用足以。

    以此类推,对付 Godaddy Blogcast 广告,可以使用:

    iframe.adFrame, div.adBanner { display:none !important; }
    

    对付 Godaddy Photo Album 广告,可以使用:

    div#wrapper div iframe { display:none !important; }
    

    至于其他浏览器怎么建 user css,我摘抄一段前人讲的

    Internet Explorer for Windows

    1. Create a .css file in a convenient location using Notepad.
    2. Tools menu, Internet Options, General tab, Accessibility button.

    Opera

    1. Create a .css file in a convenient location using Notepad.
    2. File menu, Preferences, Page Style.

  • Cross-browser CSS

    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 it is good – it reminds me to validate xhtml.)
    • -webkit-border-fit:lines

      is for Sarifi and Chrome only, making elements “shrink”, even block elements.
      > selector can’t be understand by IE6 and under.

    • Few people are using IE5.5 or under, so I decide not to bother about layout in IE5.5 or under.
    • Block elements have overflow by default to show in IE6, So if I want to set the height of a block element, I need also set
      overflow:hidden
    • Cleaning elements with
      clear:both

      to clear floating elements above better be placed inside the same parent element of floating elements, otherwise in IE6, the elements after cleaning elements will not align nicely. for example:

      
      <div class="parent-element">
          <div class="floating-element">...</div>
          <div class="floating-element">...</div>
          <div class="cleaning-element">&nbsp;</div>
      </div>
  • How to center the table

    在网页里,如何让整个表格居中?

    我一开始想到的是把<table>嵌套在<div style=”text-align:center”>里,结果发现这样的代码在浏览器里查看表格确实是居中的,但是,同样的代码写成的html邮件表现的就是左对齐(似乎div style=”text-align:center”不起作用)。

    为了保证html格式的邮件里的table能居中,我搜寻到了两种方式:

    • 直接用table的align属性:<table align=”center”> (但这不符合W3C XHTML 1.0 Strict规范)
    • 使用css margin:auto:<table style=”margin-left:auto; margin-right:auto”>