CSS - ProjeKt D.K

Bugs on Modern Browsers

Mar. 17

While I’m making a new wordpress design for Rockaby, I found Mozilla Firefox and even Konqueror Browser have some problems or misunderstanding on CSS compliance.

Fixed Position Fucked Up When Scrolling in Gecko Engine Browsers

I like the idea of keeping the footer area always visible on the bottom of the browser window, so i did it to the Rockaby’s theme, I applied fixed position rule into the footer div like this.

#footer  {height:104px;width:100%;color:#fff;font-size:1.3em;background:url(img/footer.png) repeat-x ;position:fixed;bottom:0;z-index:8;}

The footer should always stand on the bottom of the browser window in spite of scrolling. I knew IE6 couldnt understand fixed position rule. I’ve tested it in IE7,Konqueror,Opera…all work well,except Firefox. When the page loads much information and objects, scrolling quickly may fuck up the whole page, lets see the 2 pictures below .
Read More

浅谈实现网页交替背景颜色的几种方法

Feb. 18

In CSSNo Comments

WordPress 的评论模板部分都会定义一个$oddcomment函数用来实现评论的样式交替变换，采取交替样式可以使列表有一定分区度，便于浏览。我稍稍总结了下，分别通过javascript, php和CSS三种方式进行实现，其中CSS实现方法还几乎处于理想状态，仅供参考。

实现方法之Javascript篇

假设我们有个id名为 list 的无序列表ul，其下有5项item (li)。我们可以用getElementById和getElementsByTagName先找到这些item，然后通过for循环筛选出奇数项并赋予class值。再通过CSS定义该奇数项class样式从而达到交替样式的目的。javascript代码如下:

 function alterItem() {
 var list=document.getElementById('list');
 var items=list.getElementsByTagName('li');
 for (var i=0;i<items.length;i++) {
   if(i%2==0)
   items[i].className='odd';
   }
 }

 window.onload=alterItem;

最后用通过CSS定义 .odd样式就行了。
Read More

ProjeKt D.K

Bugs on Modern Browsers

Fixed Position Fucked Up When Scrolling in Gecko Engine Browsers

浅谈实现网页交替背景颜色的几种方法

实现方法之Javascript篇

You Might Know

Sponsors

Monthly Archives

Search