Вверх

Блог
RSS лента

HTML

Странная проблема с шириной ячеек в IE

Например вам нужно сделать таблицу с какими то товарами или еще какими то данными, или сверстать дизайн на сайт.
Припустим у вас есть шапка в таблице которая объединяет 6-ть ячеек которые будут ниже (или выше), заголовок может например повторятся.
Так же таблица у вас должна растягиваться на всю ширину браузера. 5ть из 6-ти ячеек с фиксированной шириной, одна ячейка тянется.
Но вот беда в том что если объединять ячейки то ИЕ делает им ширину как захочет, то есть фиксированные ячейки имеют не ту ширину которую мы указывали.

Починить можно таким вот способом (по крайней мере в моем случае это помогло):

  1. <table width="100%" border="1">
  2. <tr>
  3. <td colspan="6">Я самый большой заголовок, очень большой большой большой большой большой большой большой большой большой большой</td>
  4. </tr>
  5.  
  6. <tr>
  7. <td width="50">6688.66</td>
  8. <td width="50">66.6</td>
  9. <td width="100%">Какое то содержание</td>
  10. <td width="50">44.4</td>
  11. <td width="50">33.0</td>
  12. <td width="50">0.3</td>
  13. </tr>
  14.  
  15. <tr>

Ширина options select IE

Как вы знаете в Интернет експлоере есть такая неприятная штука как если вы укажете фиксированную ширину select например в 50 пикселей, то и выпадающие свойства будут такого же размера, когда как в остальных браузерах выпадающие свойства растягиваются на ширину самого длинного option. То есть в ИЕ у вас всё обрежится, что не есть красиво.

Выглядит это примерно так:

А в других браузерах так:

К сожалению как полностью сделать идентичные я не знаю, но знаю как сделать что бы поля не резались. Выглядеть будет так:

Делается следующим образом. Для начала скриптец:

  1. $(".sel-4").mousedown(function(){
  2. if($.browser.msie) {
  3. $(this).css("width","auto");
  4. }
  5. });
  6. $(".sel-4").change(function(){
  7. if ($.browser.msie) {
  8. $(this).css("width","50px");

height: 100% с помощью jquery (вложений)

Я думаю что многие сталкивались с проблемой когда при соблюдении стандартов (<!DOCTYPE ), нужно растянуть таблицу или див на весь экран браузера, ну это можно побороть с помощью цсс, но вот когда в этом диве есть вложение тут уже тяжелее. И тут на помощь приходит jquery.
Обрисую мою ситуацию. Была у меня табличка в одной из ячеек был див который нужно было тянуть по все высоте этой ячейки. И сделал я это вот так:

  1. <script type="text/javascript">
  2.  
  3.  $(document).ready(function () {  
  4.      $("#left_menu").height($("#left_td").height());    
  5. });
  6.  
  7. </script>
  8. <table>
  9.  <tr>
  10.   <td id="left_td">
  11.    <div id="left_menu"></div>
  12.   </td>
  13.  </tr>
  14. </table>

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

Если вам нужно что бы просто див или таблица была на весь экран то это можно сделать так:

IE 6, IE 7, IE 8 на одном компьюторе

Я думаю что верстальщики часто сталкивались с проблемой когда нужно проверить верстку в разных браузерах. Вы можете поставить любой браузер, но вот ИЕ например живет своей жизнью, у него в каждой версии все может выглядеть по разному. И еще незадача на один компьютер можно установить одну версию ИЕ, но как же быть, проверять то нужно. А выход в следующем можно использовать портативные версии (portable). То есть ставите на компьютер себе например ИЕ8, а остальные версии "переносные" и тестируете себе на здоровье.

Скачать ИЕ6 можно здесь.
Скачать ИЕ7 можно здесь.

Как обмануть валидатор или хаки для разных браузеров, в том числе и ИЕ/IE

Что бы устранить какой либо баг в всеми "любимом" браузере ИЕ (руки бы переломал разработчикам за этот браузер) есть несколько способов, это использование условных операторов и использовать хаки в файле css.
Мелкософты понимая что их браузер далек от совершенства сами же и предлагают лекарства от ихних багов, удивительная логика.

Вот собствено условные операторы:
<!--[if condition]> HTML <![endif]-->
Вместо condition вы можете вставить такие значения:
IE
все версии эксплорера
lt IE 7
Версия ИЕ ниже семерки
lte IE
Версии ниже указанной или же равной ей.
IE 7
только указанная версия
gte IE 7
версии выше указанной или равной ей
gt IE 7
версии выше указанной

Примерчик:

  1. <head>
  2.  
  3. <title>Test</title>
  4. <link href="style.css" rel="stylesheet" type="text/css">

META-теги — инструмент хорошего сайта?

META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей. Многие из поисковых систем на сегодняшний день активно используют META-теги. Использование META-тегов позволит поисковому роботу правильно и качественно проиндексировать ваш сайт...

Можно попытаться разобраться — насколько эффективно сейчас использование тех или иных META-тегов при построении сайтов, действительно ли зря большинство начинающих web-мастеров и web-дизайнеров не уделяют им особого внимания, и может ли правильное их использование позволить значительно увеличить посещаемость сайта.

META-теги - это конструкции, которые размещаются в заголовке страницы, и выглядят они примерно следующим образом:

Вертикальный текст в ячейках

Необходимо, чтобы текст в ячейках с классом "vertical" при отображении в браузере имел вертикальное направление "снизу-вверх"
Средствами CSS это возможно реализовать только в Internet Explorer, воспользовавшись свойством writing-mode. Для необходимого направления текста придётся воспользоваться фильтрами flipH и flipV
А как же быть с остальными браузерами, которые не поддерживают ни фильтры, ни свойство writing-mode?

PNG-прозрачность в IE

Припустим нам нужнен фон с прозрачной png-шкой, а на нем розместить ссылку.
Делаем так:

<div class="button_bg"><a href="адресс ссылки">Ссылка</a></div>

А в css стиль добавляем:

  1. .button_bg{
  2.     background: url("botton_menu.png") no-repeat;
  3.    width: 243px;
  4.     height: 34px;
  5.    padding-left: 15px;
  6.    padding-top: 5px;
  7. }
  8. .button_bg A { position: relative; } // без этого в ИЕ не работают ссылки
  9.  
  10. * html .button_bg{
  11.     background: none;
  12.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="botton_menu.png");    
  13. }

Перенос и разбиение слов в HTML

При создании различных лент новостей и колонок онлайн газет, web дизайнеры и программисты сталкиваются с ситуацией, когда в тексте попадается очень длинное слово (синхрофазотрон). Браузер при форматировании разбивает текст в тех местах, где есть пробелы (дефисы). Длинные слова при этом остаются нетронутыми, что часто приводит к "разъезжанию" ячеек таблицы, неаккуратному внешнему виду. Каким образом можно решить эту проблему?

А решить эту проблему можно PHP функцией.
Позаимствованая с сайта http://www.enlight.ru/ib/tech/split/index.htm

Главная | Портфолио | Услуги | Контакты | Блог