Реферат: Кулинарные рецепты CSS

длинный текст делает меню чрезмерно широким

трудности доступа к опциям в текстовых и речевых броузерах

невозможно увидеть сразу все доступные варианты

некоторые пользователи не догадываются о наличии скрытых опций

оперирование выпадающими меню может представлять трудности для некоторых пользователей ("Я не понял, что надо нажать 'перейти'")

различный внешний вид в различных броузерах

требует небольшого, но все же программирования (на стороне клиента или сервера)

Еще на эту тему имеет смысл почитать MacintoshHumanInterfaceGuidelines.

Почему у картинок в таблицах появляется отступ внизу? htmlcss

Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует <img> как строчный элемент. Проблема решается следующей декаларацией:

TD>IMG { display: block; }

(подробное объяснение вы можете найти в статье "Tables, Images, andMysteriousGaps".)

После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPEtransistionalHTML 4.01 (с системным идентификатором) или transistionalXHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).

В старых броузерах отступ может появляться из-за пробелов между <img> и закрывающим <td>. Удалите лишние пробелы и проблема скорее всего решится.

Как удалить рамку вокруг картинки-ссылки? htmlcss

В HTML (и старых броузерах) необходимо добавить атрибут border="0" к тэгу img.

В CSS (и новых броузерах) достаточно добавить стилевую декларацию

AIMG { border: none; }

Еще вы можете сделать рамку невидимой в Netscape 4.x с помощью css, меняя её цвет на цвет фона во внешнем блоке:

A IMG { border: none; border-color: [цвет фона]; color: [цвет фона] }

Но отступ примерно в две точки вокруг картинки все равно останется.

Как установить отцентрировать таблицу с помощью CSS? css

Корректным способом установки блочных элементов (в том числе и таблиц) по центру является указание таких отступов:

margin-left: auto; margin-right: auto;

или еще проще:

margin: auto;

К сожалению, это не работает в IE версии старше 6 (да и в шестой работает странно). Чтобы справиться с этим, элементу body следует назначить атрибут text-align: center, но так как это отцентрирует весь текст на странице, то окончательный вариант будет такой:

body { text-align: center; }

#centerItem { text-align: left; margin: auto; }