pre-wrap equivalent

IE/win Expanding Box
Stopping long words destroying layout

Contrary to spec, IE allows very long words to expand a box widthwards – which can then easily destroy a layout if other boxes are floated right.
Add this rule to the box that holds blog comments (or do what I did, and just add it to the body tag):
body {word-wrap: break-word;}

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

<nobr> equivalent

.nowrap { white-space: nowrap; }

absolute position的水平&垂直置中

keroro’s hCard
在一已知 height & width 的 element，這個技巧蠻不錯的，原理是先設定 top: 50%; left: 50%;，設定 element 的寬與高 height: 18em, width: 30em，再利用 negative margin 把 element shift 寬/高的一半 margin-left: -15em; margin-top: -9em

vcard {
    border:1px solid #666666;
    height:18em;
    left:50%;
    margin-left:-15em;
    margin-top:-9em;
    position:absolute;
    top:50%;
    width:30em;
}

always show/hide scrollbar in IE/Firefox

Men are greedy. IE always 有 vertical scrollbar 不管 document 的 size 是否超過了 canvas，所以我們想要 hide unnecessary vertical scrollbar

html{overflow:auto}

Always Show Vertical Scrollbar in Firefox [firefox] [css] [web]

html {overflow: scroll;} works but it also gives you a horizontal scroll bar.
html {overflow-y: scroll;} will give you just a vertical scroll bar, if that's what you are going for.

Grid layout

Grid Layout
Five simple steps to designing grid systems – Part 4 : Journal : Mark Boulton
Subtraction: Grid Computing… and Design

beautiful web sites

Particletree


Stylegala – Web Design Publication

456 Berea Street: Articles and news on web standards, accessibility, and usability

Rosenfeld Media – Web Form Design Best Practices


http://css-tricks.com/links-of-interest-9/

blog design
Julien Lecomte’s Blog » Introducing CrossFrame, a Safe Communication Mechanism Across Documents and Across Domains – 800px centered column & shadow image

圖片的水平置中以及垂直置中

Centering (horizontally and vertically) an image in a box
Demo
update: 上面的例子在ie7不會work
Demo – work in ie6, ie7, firefox
<div id=”wrap”>
<img src=”http://developer.yahoo.com/yui/docs/assets/logo.gif”&gt
</div>
圖片的水平置中的標準作法是#wrap{text-align:center}，text-align:center是用來定位在block elemenet裡的inline element，圖片也是個inline element，FF & IE都沒問題。

比較麻煩的是圖片的垂直置中，FF以及一些標準的browser可以通過下面的方法置中

div的高度

遇到一個問題，一個空的DIV，高度會是多少？

<div style="width:150px; background-color:red;"></div>
IE: 高度19px
FF: 0

如果強制設定高度為0px，高度會是多少？這個就有趣了

<div style="width:150px; height:0px; background-color"></div>
IE: 高度19px
FF:0 

可能是字型的原因，把字型設為0px看看

<div style="width:150px; height:0px; font-size: 0px; background-color"></div>
IE: 高度2px
FF:0 

看起來是有點效果，但是要如何才能讓他高度為0? IE div height problem

1) Put a comment inside the div:  <div style="height: 10px;"><!-- --></div>
2) Put a &nbsp; inside the div and add this to its style:  font-size:1px;
line-height:0.

第一招蠻神奇的，只要不設定height，就不會顯示出該div，both work in IE && FF
在有內文的情形下，就用第二招吧

<div style=" width: 150px;  font-size:1px; line-height:0; background-color: red ">foo</div>

vertical-align不是valign : O3noBLOG

vertical-align不是valign : O3noBLOG
Vertical Alignment Test
注意 style 是 apply 在 img 上，不是 containing element

CSS dictionary

這邊詳細列出了許多 CSS/JavaScript 做出來的效果，可以當作字典來用了
53 CSS-Techniques You Couldn’t Live Without
25-code-snippets-for-web-designers-part1
25-code-snippets-for-web-designers-part2
25-code-snippets-for-web-designers-part3
25-code-snippets-for-web-designers-part4

• A Simple CSS Image preloading technique
• My contribution to the CSS shadow kerfuffle

CSS Hacks & Issues

CSS Hacks & Issues – 這邊整理出一些常見的CSS Issues & hacks

• Transparent PNG’s in IE6 – IE6處理透明的PNG圖檔有問題，有另外寫好的模組：PNG Behavior
  

  * html #image-style {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
  }

• Applying a width to inline elements
  

  If you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 – inline elements shouldn’t need to have a width assigned to them.
  You can’t change the width of an inline element. A way around this is to change the element from inline to block.

  span {
  width: 150px;
  display: block
  }

  Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.

• Centering a fixed width website – 這邊應該是講錯了，要讓IE/FF都置中的語法通常是這樣：
  

  <body style=”text-align:center;”>
  <div id=”wrapper” style=”border: 1px solid #ccc; margin: 0 auto; width: 500px;”>
  sample text
  </div>
  </body>

  standard的作法只要讓div有寬度，再讓左右兩邊的margin為auto，讓瀏覽器自行計算，就會置中。不過IE不吃這一套，要在外面那一層(在這是body)設為text-align:center，在裡面那層(wrapper)再把text-algin設回left，這當然不是text-align應該有的行為，這是用bug來解bug。

• Image replacement technique

用javascript來控制css的background-image

記下來下次不用查

document.getElementsByTagName('a')[0].style.backgroundImage = 'url("images/ok.gif")';