Archive for the "XHTML/CSS" Category

20081016

IE中多行inline链接的背景图片消失之bug

Author:  WinkCategories:  XHTML/CSSNo Comments »

这个问题也是在制作LSDN的新Theme时发现的。本来我的设想是,针对于文章内的a标签,如果是引用外部链接,则为该链接前加上背景图片以作图示;对于下载地址也是如此。

具体到代码,分别是:

<a href="#" class="download">Floppy Configuration Utility - Intel Matrix Storage Manager</a>
a.download:link, a.download:visited, a.download:hover, a.download:active {
  padding-left: 18px;
  background: url(icn_download.gif) 3px 4px no-repeat;
}

Read the rest of this entry

20080811

IE6中区块height无法设置为小于15px的bug

Author:  WinkCategories:  XHTML/CSSComments Off
Tags:  , ,

最近在制作一个项目的过程中,无意碰到了一个IE6专属bug,说是IE6专属,仅指IE7下不可见而已,不包括Mac OS上的IE。

该bug的表现为:在一个display属性为block的容器中,无法设置该容器的height15px以下,设置height值小于15px的效果是无法实现的。但是在IE7中没有这种bug。具体到我所应用的情况,本来我打算做一个空容器,设置其背景为高度10px的一张图片,以用来和其他区块组合为一张完整的图片,但是发现在IE6下,两个区块的结合处总是留有空白,在FireFox和IE7下正常。

Read the rest of this entry

20080511

译文:重新挖掘button元素的作用

Author:  WinkCategories:  XHTML/CSSComments Off

在制作带有图片的按钮时,经常会为如何更有效地组织CSS以灵活应对各种不同按钮而发愁,以前我的做法通常是为input写专门的class,往往会造成很大的代码量,而这篇文章正好给了我很好的启发。仓促翻译,水平有限,见谅。

为用户提供风格统一的界面对于每一位程序设计者来说都是亘古不变的追求。不过在Web设计中却这种统一却尤为困难,这是因为在不同浏览器和操作系统上,视觉渲染有着极大的差别。这种差异在处理表单元素时最为明显,其中又以submit按钮实现视觉统一最为困难。

Read the rest of this entry

20080426

译文:为元素使用多重CSS Class

Author:  WinkCategories:  XHTML/CSSComments Off

以前在编码中,我一般都为标签使用单一的class,最近在项目中,发现一个标签多重class的十分方便,很多时候可以避免class过多和代码重复。翻译拙劣,只是为了给自己留为参考。以下是正文。

CSS一个比较少为人知的窍门是,为元素赋予的class不仅限于一个。当需要为某元素赋予多个class时,只需在属性中将这些class以空格分隔。例如:

<p class="pullquote btmmargin left">...</p>

Read the rest of this entry

20070711

SEO初试水——动态路径重写

Author:  WinkCategories:  Networks, XHTML/CSSNo Comments »

最近终于一横心,买下了一年的iPowerWeb的虚拟主机。这还是我头一次为了这方面做了这么大的投资。之前全是在一个不入流的小服务商那里勉强维持着。但是数据库的频繁出问题,让我很是头疼,再加上之前放在公司服务器上的blog,随着公司网络控管的加强也不得不撤下,终于在对比了很长时间之后,用信用卡支付购买了iPowerWeb的虚拟主机,还好,赶上了$4.99 per month的优惠期。

Read the rest of this entry

20070206

色彩心理学在网站设计中的运用

Author:  WinkCategories:  Design, XHTML/CSSNo Comments »
Tags:  ,
  • 作者:Carrie Gatlin
  • 翻译:钟桂兰
  • 版权:本文版权归原作者Carrie Gatlin及译者钟桂兰所有

曾经费尽心思想替网站设计一套令人眼睛为之一亮的色彩组合吗?或者你一直不解为何银行、公司行号或金融机构的网站总是使用蓝色系?那么你一定不能错过下面这篇文章。虽然大部分的网站开发人员都很清楚网络所使用的色盘和计算色彩的16进位系统,但对色彩学和有效色彩组合背后所隐含的原理依然懵懵懂懂。

几世纪以来,颜色本身就是一个难解的谜题。举例子来说,苏格拉底就曾经假设说“火”之源起,乃是因眼睛结合了对象本身的“白”(whiteness)所产生的颜色。之后,牛顿更探索光与色彩之间的关系;其后历经许多科学研究,终于在20世纪确认了光波与色彩感应之间的绝对关系。

如今,色彩调和与色彩调性方面的研究信息,直接影响了艺术家、设计师和广告AE人员。本篇关于色彩理论的指南,旨在探索如何于网站上有效使用色彩,同时也提供了许多色彩调和技巧,让您善用色彩来驾驭网站设计。

Read the rest of this entry

20070108

min-height Hack for Internet Explorer 6

Author:  WinkCategories:  XHTML/CSSNo Comments »
Tags:  , , ,

min-height属性可以得到FireFox及Opera的良好支持,但是IE还无法正确识别。当然,这是指IE6/Win。

/* for understanding browsers */
.wrapper {
width: 10em;
padding: 0.5em;
border: 1px solid #000;
min-height: 3em;
height: auto;
}
/* for Internet Explorer */
/*\*/
* html .wrapper {
height: 3em;
}
/**/
20060824

alt属性和title属性

Author:  WinkCategories:  XHTML/CSSNo Comments »

当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆。例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。

替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

Read the rest of this entry

20060717

IE弹出窗口或框架结构XHTML中多余的横向滚动条BUG

Author:  WinkCategories:  XHTML/CSSNo Comments »

此译文为急于解决问题时仓促之作,疏忽及翻译简陋之处尚请见谅。关于IE该bug的讨论请见“关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG”

Windows平台的Internet Explorer 6.0以及Mac平台的Internet Explorer 5.0存在一个bug,即框架或者弹出窗口中的页面即使在没有必要的情况下也会出现水平滚动条。出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。

这里给出一些解决方案。

Read the rest of this entry

20060711

关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG

Author:  WinkCategories:  XHTML/CSSNo Comments »

近期在给公司制作基金项目的页面时,使用了XHTML 1.0的框架结构。起初没有发觉什么,因为在制作之时,使用Opera的时间最多。但是在临近交工时,发现很多页面在IE下经常会莫明其妙的横向滚动条,在Opera或FireFox下却十分正常。检查了CSS和页面却没有发现什么错误,这让人十分恼火和郁闷。在多次尝试之后,终于发现了原因:只有在页面较长需要出现垂直滚动条的时候才会出现这个问题,IE对于出现的垂直滚动条,采取的措施是直接塞到页面中,而原有页面原封不动,这样就造成了横向页面变宽了,横向滚动条也便随之出现。反观Opera和FireFox,它们十分聪明地将原有页面按照减去了垂直滚动条占据的宽度之后按照比例缩短,避免了这个问题。

在又一次咒骂IE的同时,必须要做的还是无奈地寻找规避这个bug的方法。国内关于这个bug的内容很少。但是在国外,让人感到IE再次让许多人和我一样地郁闷。一共有两篇文章比较不错,翻译一下,供自己以后参考.一篇为“IE弹出窗口或框架结构XHTML中多余的横向滚动条BUG”,另一篇为“IE displays unnecessary horizontal scroll bar in frameset”

Read the rest of this entry

Back to Page Top