Wednesday, 10th March 2010.

Background Images and CSS in HTML Email

Posted on Thursday, 28th May 2009 by chris

http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
We’ve noticed a few people having issues with background images in their HTML email designs, so we thought we’d post some quick tips here.
Lots of email applications (especially the browser-based ones, like Yahoo!Mail, Hotmail and Gmail) strip out your , and tags. It kinda makes sense, if you think about it. They’re displaying [...]

Tags: ,
Posted in CSS, HTML | Comments (1)

css实现自定义图片的滚动条

Posted on Saturday, 16th May 2009 by chris

http://www.hesido.com/web.php?page=customscrollbar

Tags:
Posted in CSS | Comments (0)

HTML版本引起的object标签显示问题

Posted on Monday, 6th April 2009 by chris

CSS部分：
body
{
margin: 0px;
padding: 0px;
}
object
{
margin: 0px;
padding: 0px;
}
table, tr, td
{
padding: 0px;
margin: 0px;
border: 0px;
}
iframe
{
margin: 0px;
padding: 0px;
}
#body.day
{
background: #F0FF00;
}
#body.night
{
background: #000000 url(“images/night_Scene_body.jpg”) repeat;
}
BODY的内容：
<table style=”background-color: Black;” border=”0″ cellpadding=”0″ cellspacing=”0″
width=”100%”>
<tr>
<td>
<object style=”visibility: visible;” id=”bg_left” data=”night_WhoScene_bg_side.swf”
type=”application/x-shockwave-flash” height=”600″ width=”100″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object>
</td>
</tr>
</table><div>
<object style=”visibility: visible;” id=”bg_bottom” data=”night_WhoScene_bg_bottom.swf”
type=”application/x-shockwave-flash” height=”40″ width=”1280″>
<param value=”exactfit” name=”scale”/>
<param value=”window” name=”wmode”/>
<param value=”false” name=”allowfullscreen”/>
</object></div>
对于IE7，显示时上面一个swf跟下面一个中间是没有间隙的，而对于ie8,firefox3,chrome1，显示时，两个flash中间都出现的间隙，整了一整天，也不知道为什么，最后发现在将html头部的
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>改成
<!DOCTYPE html PUBLIC “-//W3C//DTD [...]

Tags: , , ,
Posted in CSS, HTML | Comments (0)

div设置float后高度不自动增加

Posted on Sunday, 14th September 2008 by chris

如果您没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。
目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：
1.额外标签法
这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。
我个人不喜欢这种方法，但是它确实是W3C推荐的方法

<div style=”clear:both;”></div>

或者使用

<br style=”clear:both;” />

2.使用after伪类
这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。
这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

#outer:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;
}

3.设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auto就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面。
4.浮动外部元素，float-in-float
这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。

Tags:
Posted in CSS | Comments (0)