HTML + CSS

Условные комментарии в IE

Posted Wed, 02/22/2012 - 00:39

Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.

Условный комментарий выглядит следующим образом:

<!­­--[if IE]> Специальные инструкции для IE здесь. <![endif]-->

Темизация label при помощи CSS

Posted Fri, 10/22/2010 - 22:27

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

<label for="edit-submitted-fio">

2 background images css

Posted Wed, 09/01/2010 - 09:11

Всем доброе утро! :) Недавно у меня возникла необходимость в использовании 2х фоновых изображений (2 background images) для тега <body>. Потратив на поиски рабочего решения пол дня - я всетаки нашел его! Итак вот оно:

html {
        background:#000 url(img/body-bottom.png) no-repeat 53% 98%;
}

body {
        background:url(img/body-top.png) no-repeat center top;
}

Rounded corners in IE6,7 only - альтернатива border-radius для Firefox и Safari

Posted Tue, 08/17/2010 - 19:41

Как и многие из всех верстальщиков, я ненавижу браузер Internet explorer любой версии, но тем не менее, наши "динозавры" (Люди - чайники) пользуются этими конченными браузерами. В современных браузерах, таких как FireFox и Safari закругленные углы можно задавать с помощью CSS3. Так вот, недавно передо мной встала задача сделать закругленные углы у выпадающего меню в IE6, потратил на это целые сутки, но всетаки нашел решение, это - скрипт DD_roundies. Итак, приступим к обзору данного скрипта!

Sliding doors technique in Drupal menu

Posted Wed, 08/04/2010 - 16:22

Наверное, вы уже слышали про технику CSS Sliding Doors, в общем, коротко про нее - это использование 1 или 2х изображений для меню, т.е. на одном изображений мы помещаем 2 состояния, при ховере и в нормальном. Ниже будет описан способ применения в теме друпала.

наше меню в page.tpl.php:

<div id="primary">
<?php if (isset($primary_links)): ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')); ?>
<?php endif; ?>
</div>

Вот наш CSS код:

#primary {
        width:600px;
        position:relative;
        top:127px;

Вертикальное выравнивание div

Posted Tue, 07/20/2010 - 17:57

Иногда возникает потребность в вертикальном выравнивании <div> элемента, пока еще обычные возможности CSS нам этого еще не позволяют будем использовать различные фишки, например:

#container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

Hack для IE8

Posted Sun, 07/18/2010 - 23:09

В связи с выходом новой версии IE8 у верстальщиков возникли новые проблемы. В стандартном режиме все сайты стали выглядеть страшнее чем в IE6.

Чтобы исправить эту проблему нужно включить "режим совместимости". Сайт будет отображаться как в IE7. Это можно сделать двумя способами:

  1. Включить в IE8 режим совместимости, нажав соответствующую кнопку рядом с адресной строкой. Этот метод не удобен, так как не все пользователи смогут такое сделать.

PNG in IE6

Posted Tue, 07/13/2010 - 14:50

Головняк каждого верстальщика IE6 не справляется даже с PNG прозрачностью изображений. В интернете существует несколько способов борьбы с PNG прозрачностью в IE6, но у многих из этих способов есть минусы, например, скрипт от jQuery pngFix - вроде бы хорошо справляется со своей задачей, плюс ко всему - он не очень тяжелый, всего 4кб! Но, есть одно но! Если вы задали при помощи CSS - свойство background-position для вашего фонового изображения, то pngFix его безобразно растянет и будет игнорировать позиционирование вашени фонового изображения, так что этот скрипт пока отпадает...

IE7 прокрутка Input background image при написании длинного текста

Posted Sat, 07/10/2010 - 17:43

Насколько вы знаете в IE7 прокрутка background image в input работает некорректно. Когда вы пытаетесь написать слишком длинный текст, то background image начинает "уезжать" влево. Есть очень много решений этой проблемы, но единственное, которое мне помогло - вот это:

HTML:

<div id="search-form-wrapper">
  <input id="search-form" type="text" />
</div>

CSS:

#search-form-wrapper {
background:url(/img/search.png)  no-repeat left top;
height: 38px;
}

input#search-form {
border: 0;

Отцентровка DIV/container для IE 4 и выше

Posted Sat, 07/10/2010 - 09:12

Если у вас возникают проблемы с отцентровкой основного DIV контейнера в IE 4 и выше, то этот метод вам поможет.

Хитрость заключается в том, чтобы добавить свойство text-align:center; к тегу body, а затем использовать стандартное свойство для отцентровки контейнера => margin:0 auto;. Примените text-align:left; для контейнера, который вы хотите отцентровать.

Вот пример:

body {
text-align: center; /* for IE */
}

#container {
margin: 0 auto;   /* align for good browsers */

Syndicate content