一个完整的表格样式

2008-04-24 10:51 | Filed Under Html/JS/CSS |

一坨针对IE的HACK

  1. table.default {
  2.     background: #C1DCF7 none repeat scroll 0%;
  3.     border: 1px solid #C1DCF7;
  4.     color: #000000;
  5.     width: 98%;
  6.     border-collapse: collapse;
  7.     margin: 0 auto;
  8. }
  9.  
  10. table.default caption {
  11.     background:transparent url(http://blog.sunshow.net/wp-content/uploads/2008/04/bg_list.gif) repeat-x scroll 0%;
  12.     height: 30px !important;
  13.     line-height: 30px;
  14.     text-align: left;
  15.     padding-left: 10px;
  16.     font-size: 14px;
  17.     font-weight: bold;
  18.     color: #FFFFFF;
  19. }
  20.  
  21. table.default caption a:link, table.default caption a:visited {
  22.     color: #000000;
  23.     font-size: 12px;
  24.     text-decoration: underline;
  25. }
  26.  
  27. table.default caption a:hover {
  28.     font-size: 12px;
  29.     color: #14568A;
  30. }
  31.  
  32. table.default thead tr {
  33.     background: #C1DCF7 none repeat scroll 0%;
  34.     color: #000000;
  35.     height: 25px;
  36.     line-height: 25px;
  37.     text-align: center;
  38.     font-size: 13px;   
  39. }
  40.  
  41. table.default thead tr th {
  42.     border-color: #C1DCF7;        /* fix for IE */
  43. }
  44.  
  45. table.default tbody {
  46.     background: #FFFFFF none repeat scroll 0%;
  47.     text-align: left;
  48. }
  49.  
  50. table.default tbody tr {
  51.     height: 25px;
  52.     line-height: 25px;
  53.     event: expression(
  54.         (this.onmouseover = function() {this.className += ' over';}) &&
  55.         (this.onmouseout = function() {this.className = this.className.replace(' over', '');})
  56.     );
  57. }
  58.  
  59. table.default tbody tr:hover, table.default tbody tr.over {
  60.     background-color: #E8F0FF;
  61. }
  62.  
  63. table.default tbody tr td {
  64.     font-size: 12px;
  65.     padding: 0 0 0 5px;
  66.     border-color: #C1DCF7;        /* fix for IE */
  67. }
  68.  
  69. table.default tbody tr td {    /* fix for IE when align="center" or align="right" */
  70.     padding-left: expression(
  71.         (((this.align == 'center') || (this.align == 'right')) ? '0px' : '5px')
  72.     );
  73.     padding-right: expression(
  74.         ((this.align == 'right') ? '5px' : '0px')
  75.     );
  76. }
  77.  
  78. table.default tbody tr td[align="center"] {
  79.     padding: 0;
  80. }
  81.  
  82. table.default tbody tr td[align="right"] {
  83.     padding: 0 5px 0 0;
  84. }

效果展示：

提示：您可以先修改部分代码再运行

标签：, ,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 1 条留言 »

IE6又一bug？

2008-04-16 16:01 | Filed Under Html/JS/CSS |

总结一下就是类似#gisarrow.over、#gisarrow.expanded这样的选择符
在使用javascript动态更改className的时候只有最先定义的一个样式有效

在IE6运行以下例子，然后删掉#gisarrow.over做个对比
IE7下还没试

提示：您可以先修改部分代码再运行

标签：, , , , ,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 4 条留言 »

IE6下CSS背景图片的Bug

2007-11-27 21:23 | Filed Under Html/JS/CSS |

最近碰到的问题，比如有一div，设置了背景图，然后只要在js中对此div的css做出任何更改就会重新请求背景图片，表现为页面闪烁
此问题仅在IE6下出现(更低版本未测试)，原因是IE6在默认情况下不缓存背景图片

解决办法一，通过css：

html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

缺点：可能会使整个页面的加载速度变慢

解决办法二，使用javascript：

<script type='text/javascript'>
document.execCommand(“BackgroundImageCache”, false, true);
</script>

缺点：如果在firefox等浏览器下执行会出错。
所以需要判断是否为IE浏览器，使用jQuery提供的判断方法如下：

<script type='text/javascript'>
if ($.browser.msie) {
    document.execCommand(“BackgroundImageCache”, false, true);
}
</script>
标签：, , , , , ,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 给我留言 »

兼容IE和FireFox的间隔滚动代码

2007-09-10 16:05 | Filed Under Html/JS/CSS |

网上按这个标题搜索能搜到一大坨，其实没一个好用的，可见网上文章一大抄。
自己改了改，调用方式参考例子，能适应一个页面内的多个不同的滚动。

调用应该挺简单的，可能稍微麻烦点的就是需要设置一下CSS

提示：您可以先修改部分代码再运行

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>兼容IE和FireFox的间隔滚动代码</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <style type="text/css">
  7. <!--
  8. .scrolldiv {
  9.     overflow: hidden;
  10.     width: 600px;
  11.     height: 18px;
  12.     background: #E8F8F8;
  13.     padding: 0 10px;
  14. }
  15. .scrollmessage {
  16.     text-align: left;
  17. }
  18.  
  19. .scrollmessage ul {
  20.     margin: 0px;
  21.     padding: 0px;
  22.     list-style: none;
  23. }
  24.  
  25. .scrollmessage li {
  26.     height: 18px;
  27.     line-height: 18px;
  28. }
  29. -->
  30. </style>
  31. </head>
  32. <body>
  33.  
  34. <div id="scroll1" class="scrolldiv">
  35. <div class="scrollmessage">
  36.   <ul>
  37.     <li><a href="#">11111111111111111!</a></li>
  38.     <li><a href="#">22222222222222222!</a></li>
  39.     <li><a href="#">33333333333333333!</a></li>
  40.     <li><a href="#">44444444444444444!</a></li>
  41.   </ul>
  42. </div>
  43. </div>
  44.  
  45. <div id="scroll2" class="scrolldiv">
  46. <div class="scrollmessage">
  47.   <ul>
  48.     <li><a href="#">11111111111111111!</a></li>
  49.     <li><a href="#">22222222222222222!</a></li>
  50.     <li><a href="#">33333333333333333!</a></li>
  51.     <li><a href="#">44444444444444444!</a></li>
  52.   </ul>
  53. </div>
  54. </div>
  55.  
  56. <script language="JavaScript">
  57. <!--
  58.  
  59. function scrollObject(marqueesHeight, elemId) {
  60.     var stopscroll = false;
  61.  
  62.     var scrollElem = document.getElementById(elemId);
  63.     with (scrollElem) {
  64.         style.height    = marqueesHeight;
  65.         style.overflow  = 'hidden';
  66.         noWrap          = true;
  67.     }
  68.  
  69.     scrollElem.onmouseover = function() {
  70.         stopscroll = true;
  71.     }
  72.     scrollElem.onmouseout = function() {
  73.         stopscroll = false;
  74.     }
  75.  
  76.     var divs = scrollElem.getElementsByTagName('div');
  77.     var scrollmessage1;
  78.     var scrollmessage2;
  79.     if (divs.length > 0) {
  80.         scrollmessage1 = divs[0];
  81.         scrollmessage2 = scrollmessage1.cloneNode(true)
  82.         scrollElem.appendChild(scrollmessage2);
  83.     }
  84.  
  85.     var currentTop = 0;
  86.     var stoptime   = 0;
  87.     var delaytime  = 120;
  88.  
  89.     function init_srolltext() {
  90.         scrollElem.scrollTop = 0;       
  91.     }
  92.  
  93.     this.start = function(s, delay) {
  94.         init_srolltext();
  95.         setDelay(delay);
  96.         setInterval(s + '.scrollUp()', 10);
  97.     }
  98.  
  99.     function setDelay(delay) {
  100.         if (delay > 0) {
  101.             delaytime = delay;
  102.         }
  103.     }
  104.     
  105.     this.scrollUp = function() {
  106.         if (stopscroll) {
  107.             return;
  108.         }
  109.        
  110.         currentTop ++;
  111.         if (currentTop == marqueesHeight + 1) {    //控制停留时间
  112.             stoptime ++;
  113.             currentTop --;
  114.             if(stoptime == delaytime) {
  115.                 currentTop = 0;
  116.                 stoptime = 0;
  117.             }
  118.         } else {
  119.             if (scrollmessage2.offsetHeight - scrollElem.scrollTop <= 0) {
  120.                 scrollElem.scrollTop -= scrollmessage1.offsetHeight;
  121.                 scrollElem.scrollTop ++ ;
  122.             }
  123.             else{
  124.                 scrollElem.scrollTop ++;
  125.             }
  126.         }
  127.     }
  128. }
  129.  
  130. var scroll1 = new scrollObject(18, 'scroll1');
  131. scroll1.start('scroll1', 50); //停留间隔
  132.  
  133. var scroll2 = new scrollObject(18, 'scroll2');
  134. scroll2.start('scroll2');
  135.  
  136. //-->
  137. </script>
  138.  
  139. </body>
  140. </html>
标签：, , , ,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 1 条留言 »

CSS纵向居中问题

2007-03-14 14:43 | Filed Under Html/JS/CSS |

.topline {
    height: 26px;
    display: block;
    background-color: #A7D5EC;
}
<div class="topline">
    <p>用户登录</p>
</div>

像上面的例子，“用户登录”几个字怎么也不能纵向居中，后来google到了一篇文章，原来只要设置line-height就可以了。

.topline {
    height: 26px;
    display: block;
    background-color: #A7D5EC;
    line-height: 26px;
}

今天还纠正了自己的一个大错误，就是“26px”和“26 px”的区别，带空格的写法是错误的，FF下无法被识别

标签：,

相关日志

Permalink | Trackback | Comments RSS | Print This Page | 1 条留言 »

Page 1 of 212»

京ICP备05059555号