Google+

Люблю я IE6 и еще 2 процента пользователей #

Речь пойдет сново о багах и кул хаков для IE6.

overflow:auto и position:relative
html:

css:
#element{
        background: #95CFEF;
        border: solid 1px #36F;
        width: 300px;
        height: 150px;  
        margin: 30px 0;
        overflow: auto;
}
#anotherelement{
        background: #555;
        width: 150px;
        height: 175px;  
        position: relative;
        margin: 30px;
}

Вид в нормальных браузерах:
Люблю я IE6 и еще 2 процента пользователей

Вид в IE:
Люблю я IE6 и еще 2 процента пользователей

Фиксится это вот так:
#element{
        background: #95CFEF;
        border: solid 1px #36F;
        width: 300px;
        height: 150px;  
        margin: 30px 0;
        overflow: auto;
        position: relative;
}


Непонятное отображение пустых элементов с маленькой высотой

Например мы хотим сделать в качестве разделителя пустой элемент div маленькой высоты:
css
#element{  
    background: #95CFEF;  
    border: solid 1px #36F;  
    width: 300px;  
    height: 2px;      
    margin: 30px 0;  
}


Нормальные браузеры:
Люблю я IE6 и еще 2 процента пользователей

Но даже тут IE станет нам поперек горла:
Люблю я IE6 и еще 2 процента пользователей

Чтоб это исправить есть 2 способа:
Способ 1
#element{  
    background: #95CFEF;  
    border: solid 1px #36F;  
    width: 300px;  
    height: 2px;      
    margin: 30px 0;  
    font-size: 0;
}

Чтоб подчеркнуть весь маразм объясню смысл фикса: «Чтоб в IE отображалось так как во всех нормальных браузерах нужно для пустого блока БЕЗ ТЕКСТА установить нулевой размер шрифта»

Способ 2
#element{  
    background: #95CFEF;  
    border: solid 1px #36F;  
    width: 300px;  
    height: 2px;      
    margin: 30px 0;  
    overflow: hidden  
}

Комментарии, как говорится, излишни.

Минимальная высота

К сожалению min-height не корректно работает. Поэтому если вы хотите, чтоб он везде работал придется потрудится:
#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}


Проблемы с плавающими блоками

Например есть два плавающих блока с установленной шириной и в одном из них есть неразрывный текст большей ширины чем сам блок.

html:

        
http://net.tutsplus.com/

        


css:
#element, #anotherelement{
        background: #95CFEF;
        border: solid 1px #36F;
        width: 100px;
        height: 150px;  
        margin: 30px;
        padding: 10px;
        float: left;
}
#container{
        background: #C2DFEF;
        border: solid 1px #36F;
        width: 365px;  
        margin: 30px;
        padding: 5px;
        overflow: auto;
}


В нормальных браузерах вы увидите следующее:
Люблю я IE6 и еще 2 процента пользователей

Ну а IE6 конечно же не как все:
Люблю я IE6 и еще 2 процента пользователей

Решение проблемы кроется в следующем коде:
#element{
        background: #C2DFEF;
        border: solid 1px #36F;
        width: 365px;  
        margin: 30px;
        padding: 5px;
        overflow: hidden;
}

CSS, XHTML / Теги: IE6, гемор / 26.11.09 / Комментировать [0]

Ошибки IE6 или опять о кроссбраузерности #

Что это "великий" и "могучий" бразуер я писать опять не буду, просто приведу некоторые ошибки ИЕ и варианты фикса:

В основном все используют для создания навигационного меню списки. А если нужно сделать меню горизонтальным, просто ставят float:left на ссылки внутри списка. Смотрим код:

html

        

    •     

    •     



css
ul {
    list-style: none;
}

ul li a {
        display: block;
        width: 130px;
        height: 30px;
        text-align: center;
        color: #fff;
        float: left;
        background: #95CFEF;
        border: solid 1px #36F;
        margin: 30px 5px;
}


Вот, что мы увидим в нормальных браузерах:
Ошибки IE6 или опять о кроссбраузерности

а вот, что в IE6:
Ошибки IE6 или опять о кроссбраузерности

не правда ли чудесно? :)
Эффект возможно и красивый, но абсолютно нам не нужный. Чтоб заставить IE6 отобразить меню так как мы это задумали нам нужно чуть поправить наш css код следующим образом:
ul li {
        float: left;
}

После такого веского аргумента даже шестой ослик не устоит и будет отображать меню так как нужно.

Двойной margin у элемента при обтекании.
#element{
        background: #95CFEF;
        width: 300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
}

В нормальных браузерах:
Ошибки IE6 или опять о кроссбраузерности

В IE:
Ошибки IE6 или опять о кроссбраузерности

Фикс:
#element{
        background: #95CFEF;
        width: 300px;
        height: 100px;
        float: left;
        margin: 30px 0 0 30px;
        border: solid 1px #36F;
        display: inline;
}


Отступы между элементами списка

html

css
ul {
        margin:0;
        padding:0;
        list-style:none;
}

li a {
        background: #95CFEF;
        display: block;
}

Нормальные браузеры:
Ошибки IE6 или опять о кроссбраузерности

IE6:
Ошибки IE6 или опять о кроссбраузерности

Решение 1:
css
li a {
        background: #95CFEF;
        display: block;
        width: 200px;
}

Решение 2:
css:
li a {
        background: #95CFEF;
        float: left;
        clear: left;
}

CSS, XHTML / Теги: хак, ИЕ, IE / 22.11.09 / Комментировать [0]

Горизонтальная навигация ul по центру #

Задача простая, только на первый взгляд. text-align не помогает, margin:auto работает только при фиксированной ширине. И вот она разгадка:

div#mainmenu, div#mainmenu ul { position:relative; }
div#mainmenu  { float:right; right:50%; margin:38px 0px; width:auto;  }
div#mainmenu ul { float:none!important; float:left; right:-50%; }


Пару слов о том как это работает:
- сначала мы прибиваем все к правой границе браузера и блок (#mainmenu) гарантированно имеет ширину равную всей области экрана. Затем мы сдвигаем его на 50% влево (right:50%;), после правая граница оказывается ровно посреди экрана.
- затем вложенный блок (сам список) принудительно уводится в левую область родительского блока (#mainmenu). Так как все слои имеют номинальную ширину в 100% то на данный момент ширина у списка (ul) получается равной 150%, а его сдвиг вправо приводит к получению его 100%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.

CSS, XHTML / / 20.11.09 / Комментировать [0]

Картинка в стороне от текста без обтекания #

К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:

”"

Heading


text tex text text text text



Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.

Итак первое и очевидное сделать float:left; картинке, но тогда появится обтекание. Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть любыми. Казалось бы без таблиц не обойтись, а не тут то было, можно:
div.post p{
display: table;
_height: 0;/*это для ИЕ5-6*/
zoom: 1;/*это для ИЕ7*/
}


Эта приблуда должна работать в Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win

CSS, XHTML / Теги: table, css, novalid, хак / 17.11.09 / Комментировать [0]
Назад 1 ... 27 28 29 30 31 32 33 34 35 36 Далее