IE 6 размествания

В тази статия ще изброя 3 най-често срещани „бъга“, и лесният им начин за отстраняване.

1. Центриране на елемент:

Доста често се случва някой елемент от общата картинка да трябва да се центрира. Най-лесният вариант за това, е да се използва margin: auto;. За съжаление IE 6 въобще не го интерпретира.

Да вземем например следния код:

#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}

От него очаквате да видите:

Но вместо това се визуализира така:

Прост начин за отстраняване на бъга, е като добавите text-align: center; на родителския елемент (element-a) и text-align: left; на елемента, който трябва да бъде центриран. Ето как би изглеждал по-горният пример:


#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;
}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;
}

2. Ефекта на стъпалата:

Използването на list елементи в навигацията е похват използван от почти всички разработчици. Правите контейнер, след това вътре поставяте няколко линка и накрая един float в желаната посока.

Ето примера, който ще използваме:

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:

Начин за справяне с този бъг е да float-нем самия list елемент, вместо anchor елементите:

ul li {
float: left;
}

Втори вариант за решение на същия проблем е да добавим display: inline на ограждащия li елемент:

ul li {
display: inline
}

3. Двоен margin на float-те елементи.

Най-често се получава при елементи, които са float-нати и им добавяме margin за да ги отделим от съдържащия ги див.

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

Очакванията са, че този код ще даде следния резултат:

Но всъщност под IE 6 резултата повече наподобява това:

Решението на този проблем се свежда до добавяне на display: inline стойност на float-тия елемент.

Ето как би изглеждал примера от по-горе:


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

Надявам се тези 3 кратки и лесни за изпълнение съвета да са ви от полза в бъдещите проекти.

Skinnable Browser Dialogs

Омръзнало ли Ви е от еднотипните диалогови прозорци появяващи се в сайтовете?

Сега можете да промените външния вид на вашите диалогови прозорци с новото от Мартин Иванов, а именно Dialogs.JS – Skinnable Browser Dialogs .

Определено възможостта за направата им с друг външен вид, ще се приеме добре от вашите потребители. Всеки е свикнал с обикновения външен вид, даже натрапчиви могат да ни се струват. Е сега можете да ги направите по-приветливи, да не кажа user friendly .

Естествено както и другите продукти се поддържат основните браузъри, като Mozilla Firefox, IE, Safari, Opera, Chrome, Safari.

Ето линкче към официалната страничка на Dialogs.JS – Skinnable Browser Dialogs.

Линкче за демо на Dialogs.JS

easy_slider jquery слайдер

Ще ви линкна едно много хубаво и полезно слайдерче на изображения или текст реализирано с помощта на JQuery.

Функции на разположение:

• aвтоматичен слайд
  
• непрекъснат слайд
  
• бутони „отиди на първата“ и  „отиди на последната“
• скриващи се контроли
  
• опция за обхващане на контролите
  
• вертикален слайд
  
• няколко независими слайда на една страница
• опция за номериране на слайдовете, вместо бутони напред назад
  

Ето някои неща, които можете да промените, така, че слайдера да стане по-уникален:

prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false

Ето и превода им:

controlsShow

По подразбиране оставен на true, но може да се промени на false и така няма да се показват никакви контроли за изображенията. Може да ползвате автоматичния слайд за да намалите интерактивността.

controlsBefore и controlsAfter

Ако искате да добавите някаква допълнителна функция на бутоните, от тук можете да го направите.

controlsFade

По подразбиране оставено на true. Ако се промени на false ще направи бутоните неактивни, когато слайда достигне последната картинка/текст.

firstShow and lastShow

Тези параметри скриват (или показват) „отиди на първа“ и „отиди на последна“

auto

Тази опция позволява автоматичното слайдване.

pause

Тази опция е зададена в милисекунди и определя времетраенето на показване на изображението/текста, когато слайда в автоматичен режим

continuous

Ако е оставено на true кликането на бутона следващ при последна заредена картинка/текст той ще ви върне отново в началото на слайда. В комбинация на автоматичен режим, се възпроизвежда непрестаннен слайд.

Демо с всички включени опции.

Линкче за сваляне.