ifireyy-we tell browers what to do

09.0609 Valerio 发布了 Mootools

Valerio 今晚发布了 Mootools,又是一个javascript framework,集成了 Valerio 以前做的效果类 ( moo.fx ) Ajax类 ( moo.ajax ), Dom选择类 ( moo.dom ), 另外加了拖拽(Drag and Drop), Sortable lists(中文不知道该怎么解释，效果是在一个“狭小”的空间里有一个列表可以拖拽排序 ^^!), Cookies管理以及其他一些功能。做成了一个a choice of more than fifteen scripts, plugins and addons(额...虽然能理解，但是不会用中文解释，小学没好好念书...)

用 Valerio 自己的一句话来说

mootools infact, makes it possible for you to extend HTML elements with your own methods, to make your life easier, and your coding style alot cooler.
— Valerio

下载 | 文档 | 演示(later)

Tagged: javascript, moo.fx and mootools | 4 Comments

08.0627 在li标签里加img的问题

今天遇到一个很诡异的问题，记得以前也遇到过，不过上次碰到的时候，回避了一下，那时候太忙了(^ ^!) 问题是在li标签里加img标签的时候，在img下会出现5px的空隙。结构是这样的：

<ul>
	<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
	<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
	<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
</ul>

结构很简单，不过问题就出来了，效果看这里

在尝试中发现在img标签里加align="center" 或者加样式 img {vertical-align: top;} 就可以解决了。暴汗...目前还不知道原因

8.28 update: : 在blueidea上发现一个帖子IE图片下空隙问题解决方法集合，不过还是没人说明产生问题的原因...

Tagged: css, html, ie, img and li | 6 Comments

08.0621 [译]Understanding

FROM：Understanding “Any order columns”

我们在这里要解决的是：一个3栏的页面结构，源代码是这样的结构— main, nav, 和 links — 我们要做的是通过css的定义来使它以任意的排列结构显示出来.

我们的代码包含3个 divs, 每个都有相应的 id 和内容.

[...content ...]
[...content...]
[...content...]

首先我们要做的是给它们定义相应的宽度和向左(left)的浮动(float)值, 以及清除一个windows下IE的元素浮动BUG.

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    }

好的. 这个是现在的3栏结构, 当然如果我们需要改变3栏结构的显示次序，我们可能需要修改网页源代码的结构。

解决办法

首先, 我们尝试互换 main 和 nav 分栏的位置，这样的话 nav 就在左边, main 就在中间了。很明显的，我们给 main 分栏一个 left-margin of 20% 让它空出一块地方(暂且给它个命名：地盘A)给 nav 分栏，接着通过一个负的left-margin of -70% 把 nav 分栏移动到我们的目的地. 搬家成功.

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    margin-left:-70%;
    }
#links {
    float:left;
    width:20%;
    }

接着, 我们试一下让 nav 和 links 分栏调换位置. 当然， main 分栏就不需要怎么动了，保持它的 left-margin of 20%. 我们去除 nav 分栏的负 left-margin ，同时用一个负的 left-margin of -90% 把 links 分栏移动到(地盘A).

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    margin-left:-90%;
    }

并不华丽的演示。你可以动手尝试一下，真的非常简单。