Большие рисунки, узкие таблицы, полупрозрачность и ещё немного CSS

Вот ещё пара стилевых заморочек, связанных с Internet Explorer и не только. Как правильно разместить картинку с шириной, заданной в процентах, в ячейке таблицы. Прозрачность картинки в процентах для всех браузеров. "Лишние" отступы вокруг форм. "Удваивание" рамок в таблицах и применение стиля к внутренним ячейкам.

1. Internet Explorer и картинка с шириной, заданной в процентах, в ячейке таблицы

Если картинка внутри ячейки таблицы больше, чем сама ячейка, альтернативные браузеры нормально отмасштабируют её кодом вроде

<table width="100%">
    <tr><td><img src="image.jpg" width="100%"></td></tr>
  </table>

однако, в IE6 - IE8 всё разъедется. Помогает стилевое указание вида

<style type="text/css">
    TABLE {table-layout: fixed;}
  </style>

2. Прозрачность картинки в процентах для всех браузеров

filter: 
 alpha(opacity=50);    /* IE 5.5 и выше */
 -moz-opacity: 0.5;    /* Mozilla 1.6 и ниже */
 -khtml-opacity: 0.5;  /* Konqueror 3.1 и выше, Safari 1.1 и выше */
 opacity: 0.5;         /* Браузеры с CSS3 - Mozilla 1.7b и выше, Firefox 0.9 и выше */

Только перечисление в стиле всех указанных выше директив более-менее гарантирует, что картинка действительно будет полупрозрачной в разных браузерах. Разумеется, можно создать отдельный класс с этими директивами.

<style type="text/css">
.oppa {
 margin:0px; 
 filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;
}
</style>

<img class="oppa" src="lamp.gif" width="64" height="64" alt="Лампочка Ильича">

3. "Лишние" отступы вокруг форм

Для многих блочных объектов, особенно форм, полезно всегда указывать в стиле нулевой отступ margin:

FORM { margin: 0; }

4. "Удваивание" рамок в таблицах и применение стиля к внутренним ячейкам

Мой традиционный рецепт. Часто при разметке таблиц с помощью стилей во-первых, стилем отображаются только внешние рамки таблицы, а внутренние нет, во-вторых, внутренние рамки "удваиваются":

<style type="text/css">
.tab1 {
 border: 1px solid blue;
}
</style>

<table width=100% cellpadding=4 cellspacing=0 border=1 class="tab1"><tr><td>
<p>Содержимое ячейки</p>
</td></tr>
<tr><td>Ещё ячейка</td></tr>
</table>

Во-первых, применить правила CSS нужно как к тегу <table>, так и к <td> и <th>. Во-вторых, избежать удваивания рамок позволяет включение в класс таблицы директивы
border-collapse: collapse;

<style type="text/css">
.tab1 {
 border: 1px solid blue;
 border-collapse: collapse;
}
</style>

<table width=100% cellpadding=4 cellspacing=0 border=1 class="tab1"><tr><td class="tab1">
<p>Содержимое ячейки</p>
</td></tr>
<tr><td class="tab1">Ещё ячейка</td></tr>
</table>

 на сайт

19.04.2010, 17:09 [12612 просмотров]