Archive | Webdesign RSS feed for this section

Fade effect in IE

22 Nov

To add a fade effect to your webpage, you just include this line on the top of your page:

<META http-equiv=Page-Enter content=blendtrans(duration=0.1);>

Unfortunately, it’s supported only by IE.

text-align bug in FireFox 1.5

19 Jul

While I am rendering a CSS theme for my webapp, I see this problem:

.container{
text-align: center;
border: solid 1px blue;
}
<div class=container><table><tr><td>Text</td></tr></table><div>

In theory, we will have a center-aligned table, and it worked in IE6, but not in Firefox 1.5. If I add align into the div tag, it worked in both. After struggling with a sea of CSS references, trying to find out some other way to work arround this bug, I finally found this:

http://geekswithblogs.net/timh/archive/2006/04/19/75606.aspx

So this is my solution:
.container{
text-align: center;
border: solid 1px blue;
}

.container{
text-align:-moz-center;
}

Just place those lines into your CSS, the browser will automatically choose the best. Note: never place 2 text-align in 1 block.

Similarly, if you want to right-align the table box, use -moz-right.

Another trick to center the table:

.container{
text-align: center;
border: solid 1px blue;
}
.container table{
margin:0px auto;
}

I don’t find any other trick for right-aligning.

Lỗi khó hiểu: DOCTYPE và Firefox “đá nhau”

24 Jun

Vừa phát hiện ra một lỗi ngớ ngẩn: <!DOCTYPE> và Firefox 1.5.0.4 "đá nhau". Chính xác hơn là DOCTYPE cho XHTML 1.0 Strict.

Ví dụ, khi chèn dòng sau đây vào đầu file html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

Mở bằng IE thì không có vấn đề gì. Nhưng khi mở bằng Firefox thì tất cả các tag IMG đều tự động mang hiệu ứng giống như có style margin-bottom, bị hở một khoảng khá lớn phía dưới khi nằm trong một block. Khi đó, hầu như mọi layout có dùng đến IMG đặt trong một TD hay DIV đều bị thay đổi. Tôi đã thử đặt lại margin và cả padding = 0 mà vẫn không khắc phục được.

Lưu ý, lỗi trên không xảy ra nếu dùng DOCTYPE là XHTML 1.0 Transitional.

Cách khắc phục:

Sau khi quần cái HTML một lúc, tưởng như ngoài cách bỏ DOCTYPE hoặc đổi sang Transitional ra không còn cách nào khác thì lục được cái link này:

http://www.mozilla.org/docs/web-developer/faq.html#gaps

Giải thích chi tiết hơn ở đây.
Cách 1: Chuyển IMG thành block:

img {display: block;}

Cách 2:Đặt lại vertical-align

img {vertical-align: bottom;}