Отправляет email-рассылки с помощью сервиса Sendsay

Статьи по web-дизайну и web-программированию

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

487 подписчиков
0 за неделю
←   Все выпуски   →

Статьи по web-дизайну и web-программированию


            
        Человек наиболее живет в то время, когда он чего-либо ищет .
                                                      
                                                                                                                  Ф.М.Достоевский
                                       
 
  Мультибраузерный сайт

 Зравствуйте! Мы рады вновь приветствовать вас. Надеемся за прошедшее время вы успели соскучиться по новым интересным статьям. Предлагаем Вам прочесть очередной выпуск и обязательно применить на практике. 

 

Приходилось ли Вам слышать такое название "мультибраузерный сайт" ?

 «Мультибраузерный» сайт определяет браузер пользователя. По полученному результату данный сайт использует определенные для этого браузера CSS стили.

Каждый пользователь Интернета использует тот браузер, который ему более подходит, и при этом сам добавляет  или изменяет различные настройки. Выходит - нужно добиться того, чтобы наш сайт отображался во многих браузерах.

Давайте вспомним какие браузеры нам более известны ?

Первый и самый используемый IE , далее за ним стоят Opera, Firefox, Netscape, Avant. Пожалуй, на этом остановимся, и будем исходить из того, что те, кто заходит на сайт , используют один из этих браузеров.

Рассмотрим отличия между браузерами :

1) Если используете комментарии в CSS файлах, то работайте с  конструкцией /* комментарий */, но никак не # и не <!-- -->, т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется. В Opera и IE  с этим проблем не возникает.

2)  Тег select отображается по разному. В IE он смотрится замечательно, а вот в других браузерах, он мало того, что некрасиво выглядит, так он еще и выравнивается несколько странно... Т.е. где-то выше, где-то ниже. Эту задачу можно решить используя позиционирование :

select

{ position: relative; top: 1px;

}

В Opera при наложении на любой другой элемент (используя выше написанный код), например на бордюр таблицы,  границы просто становятся невидимыми. Но и для этого случая есть выход - дописываем "z-index".

select { position: relative; top: 1px; z-index: 1;}

3) В обычных кнопках так же есть различия. Можно увидеть такую особенность - текст кнопки отображается либо выше либо ниже на 1 px ( пиксель ).В Opera, сайт в HTML-коде которого указан DOCTYPE(его желательно использовать для валидности кода), размеры кнопок странно отображаются.

Для  Opera размеры надо указывать меньше: "height: 14px;"

В IE и Firefox эта величина равна 18px.

4) Сокращайте слова в атрибуте "ALT" при <img>, так как в Mozilla этот текст "выйдет" за границы .

5)  Использование для оформления скроллбара кода типа:

scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color

Будет отображаться только в IE и производных от него. Поэтому не удивляйтесь, что зайдя в Mozilla вместо радостных тонов вы увидите серый скроллбар (в зависимости от темы оформления)

6)  Используйте для отступов документа код:

 

BODY { padding: 0; margin: 0; }

Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишем:

BODY { padding: 1px 0 1px 0; margin: 0; }

 

Вы, наверное, спросите "А зачем margin: 0 нужен, ведь и без него все нормуль?" Отвечаем, что это просто необходимо для Firefox, там появляются лишние отступы.

Оговорка по этому поводу....Многие используют визуальные редакторы , которые предлагают код:

leftmargin, marginwidth, topmargin, marginheight

 

А теперь основа того для чего все выше сказанное было описано - это универсальный код, благодаря которому можно определить , с каким браузером мы имеем дело.

Итак , вот он....

 

function browser_define($agent)

{

if(ereg('MSIE ([0-9].[0-9]{1,2})',$agent)&&!ereg('Opera ([0-9].[0-9]{1,2})',$agent)) $browser='ie';

elseif(ereg('Opera',$agent)) $browser='opera';

elseif(ereg('Netscape/',$agent)&&ereg('Gecko/',$agent)) $browser='netscape';

elseif(ereg('Gecko/',$agent)&&!ereg('Netscape/',$agent)) $browser='mozilla';

else $browser='ie';

return $browser;

}

 

Ф-ия возвращает имя браузера. Используем ее так:

<LINK rel="stylesheet" type="text/css" href="/css/<?=browser_define($_SERVER['HTTP_USER_AGENT'])?>.css">

T'])?>.css"/>

Т.е. если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css.

 

На этом - все. Дерзайте !

 

            *************************************************

Профессор разглядывает рентгеновский снимок :
- Да-а-а! Ключица поломана,  два ребра сломано, трещина в малой берцовой кости.
Нууу...ничего, в Photoshope все исправим.
 
 **********************************************
Программер на приеме у врача:
- Доктор, у меня раздвоение виртуальной личности.
- Это как?
- Я со своего второго ника на третий стал емэйлы получать
 
**********************************************
 
Письмо в компьютерный сервисный центр:
- Этанутипауменяпробелполомалсячёделатьто?
Ответ:
- Настоящие_программисты_не_пользуются_пробелами.
 
**********************************************
 

   Удачи Вам во всех начинаниях несущих пользу и благополучие

    С уважением

Максим Егоров , Анжела Бабухина

Наши контакты: mailto:angelamax62@gmail.com

ISQ - 400-580-237

наши друзья: www.bookspro.net.ru  
В избранное