Centering div horizontally and replacing table with div

October 30, 2009

There are many ways to center HTML content horizontally on the page. Traditionally, many webmasters use tables for layouts, and often solely to center content horizontally; some use floating divs; some even revert to absolute positioning and usage of JavaScript.

Today I’m glad to tell you about a very easy, very fast, and very predictable way of centering your content horizontally. Meet the display: inline-block CSS rule!

As soon as you apply it to the divs you need to center, just add the text-align: center rule to their container, and you’re done! Your divs will maintain their alignment at all times, from very small to very large window widths. You can see a demonstration here; remember to check out the source code to see how cleanly it looks.

Update
Apparently Internet Explorer can only assign inline-block display type to elements that are natively inline (such as spans). So we just replace divs with spans, and voila! Everything works now in IE, too, while nothing changes in other browsers.

Update 2
Pay attention to the “vertical-align: top” CSS rule. Without it, IE would align the tallest span in the row by the bottom of the row, while Firefox and Webkit-based browsers align such spans by the top of the row by default. Adding this rule allows our markup to look completely uniform in all major browsers.

Update 3
It is also possible to achieve the desired effect without reverting to spans: use IE conditional comments to tell it that divs are inline, while all other browsers get the inline-block rule. This will allow your markup to remain valid from W3 specs point of view even when you need to inject block elements into your centered elements (doing so with spans will violate the specs). I will update my example accordingly.

There are only two minor caveats to keep in mind (both of them are illustrated in the supplied example page):
1) In the end of the horizontal block you want to center, put a
element.
2) Comment out newlines between elements in a horizontal block, otherwise in some browsers you will see white spaces between them.

Please report if you find a case where this method fails to deliver.


GMail + TIFF = ?

October 24, 2009

I’ve patiently waited for nearly a year after I reported this bug for the first time, but now I think it is time to file the report the second time and to amuze my readers. So, open your GMail and send an email with an attached little-endian TIFF image (grab the one you see in this post, I have been unable to find other files this exploit will work with). Below the message text, you will see a preview of your TIFF image. Or, rather, a preview of a *random* TIFF image (or so it seems).
A preview for another different image is shown in every message this TIFF is attached to; this is very dangerous as somebody could use this method to automate retrieval of images sent by other GMail users.
On the bright side, you don’t get to know who sent the images you see, and you only have the low-res preview to play with (if you download the TIFF file, you’ll see the correct one).

A file that causes such a vulnerability can be downloaded here. Please only use it to confirm the bug, and do not abuse it!

Update: Google has acknowledged my bug report as of 2009-10-26 08:00 MSD, and the TIFF preview feature in GMail has been disabled. The bug has been assigned ID #532113728.


Татьяна-2

October 20, 2009

В октябре до нас пока результаты сеансов связи не долетали; отлаживаем софт на пяти подтрамвайных сеансах конца сентября.

Сегодня дошла информация, что на борту сбой с питанием; вроде отказали батареи, но точно ничего не могу сказать. Пока так.


Поехали!

October 17, 2009

Дорогие друзья!
Рад сообщить, что сайт SpaceTrackr запущен и ждёт своих пользователей.
SpaceTrackr позволяет отслеживать местоположение космических объектов (искусственных спутников Земли, орбитальных станций, космического мусора) в реальном времени, а также отображать зону их видимости и траектории полёта. В каталоге SpaceTrackr содержится более пяти тысяч актуальных космических объектов; каталог обновляется ежечасно.
Сайт находится в состоянии открытой беты, т.е. на нем могут встречаться баги, лаги и прочие неприятности; просьба сообщать о них по специально организованному интерфейсу фидбэка.
Сайт абсолютно бесплатен для пользования и не содержит рекламы.

Итак, добро пожаловать на SpaceTrackr!

Работа выполнена в качестве развития проекта в интересах НИИЯФ МГУ им.М.В.Ломоносова.


Just for fun

October 1, 2009

Предлагаю развлечься: пойти в ресторан Eat & Talk, когда у них будет масса посетителей, и расставить по столам таблички с надписью “Когда я ем – я глух и нем!”