Ничего никому пояснять не буду.
Поверьте - кому надо - тот поймет:
(да родные пыхо-братья - можете ох$еть от моего альтруизма и доброты, такого хер где найдете в одном месте)
Данный пост создаю для себя - где запостю все те хаки верстки с которыми приходилось столкнуться.
Если буду далеко от рабочего места - всегда смогу найти тут - да и вам глядишь пригодится
1.Всегда использовать reset.css
РЕСЕТ - сбрасывает все стандартные CSS всех браузеров и помогает наблюдать более адекваватное поведение элементов.
Первое с чего начинает проф верстальщик - вставляет в CSS ресет.
Короче - смотрите внутринности например Opera.com - там оно есть.
Там вообще очень хорошо поучиться и фиксов много можно найти под ослы
/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
{ margin:0; padding:0; border:0; outline:0; font-size: 100.01%; vertical-align:baseline; background:transparent; font-weight:normal; line-height:100%; }
ol, ul { list-style:none; }
table, tr, td { vertical-align:top; border-collapse: collapse; border-spacing: 0; }
a { text-decoration: underline; color:#30306A;}
a:hover { text-decoration: none; }
p { margin:0 0 35px 0; line-height:180%; font-size:10pt; }
.nobr{white-space:nowrap;}
/* reset */
2.Использовать iepngfix.htc
для IE6 - показывает пнгэхи в осле6
Искать тут
Ищите в гугле - абсолютно незаменимая вещь!
// IE5.5+ PNG Alpha Fix v2.0 Alpha 2
// © 2004-2008 Angus Turnbull http://www.twinhelix.com
3. использовать csshover3.htc
для IE6 - позволяет применять :hover для дивов
Ищите в гугле - абсолютно незаменимая вещь!
При наведении на слой позволяет к нему применять псевдокласс :hover как у ссылки
4.
Всегда юзать для блоков, дочки которых имеют float
overflow:hidden;
zoom:1;
Если внутри блока находятся блоки со свойством float, то родтельский блок не растягивается под высоту дочерних (даже можно сказать не натягивается на них - эта тема лечит это поведение)
решает абсолютное кол-во проблем ослов!
Однако есть одно ограничение, вы не сможете использовать абсолютное позиционирование выходящее за рамки блока с определением - overflow:hidden; что вполне понятно - блок просто не будет отображаться, т.к. фактически находится вне зоны отображения содержимого блока. Короче - чем объяснять - легче попробовать.
ХАКИ
видит только опера
/* Jast Opera */
html:first-child .afisha .right ul.event_list li{
background:#F00;
}
видит только сафарь
/*safari only*/
html:root* .main .left{width:556px;}
Вообще хороший список хаков под конкретный браузер тут
http://higher.com.ua/article/111/poleznye-css-khaki
Эмуляция псевдоклассов - первый элемент, последний элемент для осла 6
например, нужно сделать список у которого все <li> имеют сверху и снижу рамку, а только верхний и нижней элементы списка этих рамок не имеют.
Во всех нормальных браузерах есть псевдоклассы - первый и последний элемент. У ослов такого нет - нужно в CSS внедрять expression, т.е. JS код, который определяет есть ли предыдущий/последующий элемент списка и соответственно генерит нужный стиль
ul li{
padding:10px 0 0 0;
border-top:1px solid #FFF;
border-bottom:1px solid #dcdcdc;
border-top: expression(this.previousSibling == null ? '0' : '1px solid #FFF');
border-bottom: expression(this.nextSibling == null ? '0' : '1px solid #dcdcdc');
padding-top: expression(this.previousSibling == null ? '0' : '10px');
padding-bottom: expression(this.nextSibling == null ? '10px' : '0');
}
ul li:first-child{
padding:0;
border-top:none;
}
ul li:last-child{
padding-bottom:10px;
border-bottom:none;
}
Та же дрянь с псевдоклассами
:before
:after
с их помощью можно принудительно в конец и начало списка принудительно подставлять некоторый контент. Иногда это бывает полезно. Например с картинками откр/закр кавычек в блоках с цитированием.
Что б автоматом подставлять кавычки на уровне CSS есть псевдоклассы :after, :before
Но не работает в Осле. Значит! Лечим осел!
Например подстановка каких то элементов перед и после списка.
Самый неверояный да еще и оптимизированный экспрешн который мне на данный момент попадался
E: expression(this.yes ? '' : (this.yes = true, this.parentNode.innerHTML = 'ЛЮБОЙ КОНТЕНТ ПЕРЕД' + this.parentNode.innerHTML + 'ЛЮБОЙ КОНТЕНТ ПОСЛЕ'));
_________________________________
Эмуляция выравнивания по вертикали внутри блока для гребаных ослов
Если хочешь картинки разной высоты позиционировать в некотором блоке и всегда по середине - самое простое обернуть картинку в inline элемент, например p. Сделать line-height у <p> равным высоте блока, и задать выравнивание строчного элемента vertical-align:middle;
Но Осел - он и есть Осел. Какой бы версии он ни был. Лечим с помощью выражения, которое определяет высоту родителя и смещает <p> так что бы она была посередине блока!
p{
line-height:240px;
vertical-align:middle;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? '0' : (parentNode.offsetHeight - this.offsetHeight)/2 + 'px');
}
____________________________________________
Как сделать блок тянущимся до определенного момента?
А вот так!
Очередная эмуляция для Ослов
.body{
min-width: 990px;
max-width: 1300px;
-width: expression(document.documentElement.clientWidth > 1280? "1280px": document.documentElement.clientWidth < 990? "990px": "auto");
}
______________________________________________
Position FIXED Практика и решение
Задача: Вывести на странице блок, который будет находиться поверх всех остальных и всегда в определенном месте сайта вне зависимости от скролла.
Задача решается очень просто - в CSS есть свойство position: fixed;
Однако в IE это свойство не работает.
Следовательно для него необходимо свойство, которое понять может только IE а все прочие будут игнорировать.
Определяем:
<div class="fixme">
содержимое блока
</div>
.fixme { position: absolute; left: 33%; top: 30%; }
div.fixme {
z-index: 1000;
-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
}
body > div.fixme { position: fixed; top: 30%; left: 33%; }
Начала Браузер видит определение
.fixme { position: absolute; left: 33%; top: 30%; }
После этого переходит к следующему определению
-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) +
Это определение может увидит только IE 6 (именно для этого здесь стоит знак - перед определением top)
Если его убрать, то все браузеры будут отображать блок нормально, а IE 7 будет тупить, т.к. он понимает и expression и top.
во всех остальных браузерах будет выполняться определение
body > div.fixme { position: fixed; top: 30%; left: 33%; }
только IE его не увидит.
Так мы получаем блок в указанном месте сайта.
/* FIXED PATCH */
.fixme { position: absolute; left: 33%; top: 30%; }
div.fixme {
border: 7px solid #CCC;
background: #ECEEED;
z-index: 1000;
width: 400px;
color: #000;
-top: expression( ((document.documentElement.clientHeight/10)*3)+(ignoreMe = document.documentElement.scrollTop) + 'px' );
}
body > div.fixme { position: fixed; top: 30%; left: 33%; }
/* FIXED PATCH */
________________________________________________
Почти адекватная эмуляция табличных структур в дивах. Есть небольшие ограничения
/* tab emulation */
.tbl{
width: 100%;
display: table;
}
.contentbody{ display: table-row; }
.column{
display: table-cell;
vertical-align: top;
}
.column,{
display: inline;
vertical-align: top;
zoom: 1;
}
/* tab emulation */
<div class="contacts"><!– contacts –>
<div class="tbl">
<div class="contentbody">
<div class="column left">
</div><!– column left –>
<div class="column right">
</div><!– column right –>
</div><!– contentbody –>
</div><!– tbl –>
</div><!– contacts –>
__________________________________________________________________
Охеренный баг Ослов с SELECT элементами которые не имеют z-index
если сверху выводим блок, то селекты как кишки торчат на экране и никогда ничем не перекрываются
Лечится вставкой условного комментария для IE с элементом iframe
который должен полностью совпадать по размерам с всплывающим блоком, абсолютно позиционирован к нему и иметь следующее определение:
.fixme iframe {
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
width:400px;
height:100px;
}
только iframe c фильтром filter:mask(); способен перекрыть селекты
