• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Кроссбраузерность
Кроссбраузерность
Полынь
Сообщений: 3
Репутация: 4

Сообщение # 1 | 03:20:23
Здравствуйте, уважаемые знатоки Юкоз!
Нужна консультация по такому вопросу. В футере 3 дива столбиками. Опера, Хром отображает прекрасно. Но Мозила требует ширину среднего дива на 150px больше. Что я делаю неправильно или как задать ширину дива только для лисы?
Код нижнего контейнера:

Код
<div id="footer" >
       
    <div class="row">
    <div class="footer_widget">
       
    <!-- Footer Navigation box -->
    <div id="footer-widget-first">
    <div class="sidetitle" style="text-align: left!important">Навигация</div><div class="titlbgz"></div>
    <p><a href="/">ГЛАВНАЯ</a></p>
    <p><a href="/load">КЛИПАРТЫ</a></p>
    <p><a href="/news">ФОТОРАМКИ</a></p>
    <p><a href="/gb">ГОСТЕВАЯ</a></p>
    <p><a href="/faq">FAQ</a></p>
    </div>
       
    <div id="latest_media">
    <div class="sidetitle" style="text-align: left!important">Новые клипарты</div><div class="titlbg"></div>
    <ul id="l_media_list">
    $MYINF_2$
    </ul>
    </div>
       
    <div id="footer-widget-third">
    <div class="sidetitle" style="text-align: left!important">Контакты</div><div class="titlbgz"></div>
    <p><img src="/images/home_icon.png" width="17" height="17" alt="Home" style="margin-right: 10px;margin-bottom: -4px;"><a href="http://polyn-art.ru/">polyn-art.ru</a></p>
    <p><img src="/images/mail_icon.png" width="17" height="16" alt="Mail" style="margin-right: 10px;margin-bottom: -4px;"><a href="mailto:info@polyn-art.ru">info@polyn-art.ru</a></p>
    <p><img src="/images/phone_icon.png" width="17" height="17" alt="Skype" style="margin-right: 10px;margin-bottom: -4px;"><a href="skype:polyn-art?add">polyn-art</a></p>
    <p><img src="/images/ucoz_icon.png" width="17" height="17" alt="Skype" style="margin-right: 10px;margin-bottom: -4px;">$POWERED_BY$</p> </div>
    <div class="clr"></div>
    <div class="clear"></div>
    </div>
    </div>    
    <div class="fleft"> </div>    
    <div class="clr"></div>

CSS:
Код
#footer-widget-first {margin: 5px 0 0 20px;padding: 20px 15px 0 15px;width: 120px;height: 210px;float: left;border-top: 1px solid rgba(255,255,255,0.1);border-radius: 8px;background: url(../images/gradient-bg4.png) 50% -1px repeat-x;}
#footer-widget-third {margin: -303px -135px 0 0;padding: 20px 15px 0 15px;width: 127px;height: 210px;float: right;border-top: 1px solid rgba(255,255,255,0.1);border-radius: 8px;background: url(../images/gradient-bg4.png) 50% -1px repeat-x;}

#footer {
  width:980px;
  background:url(/images/content.png) bottom left repeat;
  display:table;
  border-top: 1px solid rgba(207, 198, 198, 0.1);
}

#footer .row{
  background:none;
  color: #819E5C;
}

#footer .eTitle {
  padding:9px 0px 10px 20px;
  background:url(../images/right_h_bg.png) top left no-repeat;
  height:21px;
}

/* About */

.footer_widget{
  padding:0 !important;
  display:table-cell;
  float:none !important;
}
#footer .header {
  padding:9px 0px 10px 15px;
}
#footer .body {
  padding:20px 10px 35px 20px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#999;
  text-transform:none;
  font-weight:normal;
}
#footer .body p {
  margin-top:0;
}
#footer .footer {
  width:331px;
  height:13px;
  background:url(../images/footer.png) top left repeat-x;
  float:left;
}
/* Latest Media */

#footer #latest_media {
  display:table-cell;
  width:626px;
  vertical-align:top;
  padding: 25px 10px 0 20px;
}
#footer #latest_media .header {
  padding:9px 0px 10px 15px;
}
ul#l_media_list {
  list-style:none;
  padding:0;
  margin:0;
}
ul#l_media_list li {
  margin:0px 5px 5px 0px;
  float:left;
  width:110px;
  height:110px;
  background:url(../images/media_bg.png) top left no-repeat;
  padding: 6px 6px 0 0;
}
ul#l_media_list li a {
  display:block;
  overflow:hidden;
  width:110px;
  height:110px;
   
}
ul#l_media_list li img {
  height:100px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  transition:all 0.35s ease-in-out;
  /* Firefox 4 */
  -moz-transition:all 0.35s ease-in-out;
  /* Safari and Chrome */
  -webkit-transition:all 0.35s ease-in-out;
  /* Opera */
  -o-transition:all 0.35s ease-in-out;
  padding: 3px;
  border: 2px solid #819E5C;
}
ul#l_media_list li img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  transition:all 0.35s ease-in-out;
  /* Firefox 4 */
  -moz-transition:all 0.35s ease-in-out;
  /* Safari and Chrome */
  -webkit-transition:all 0.35s ease-in-out;
  /* Opera */
  -o-transition:all 0.35s ease-in-out;
}
#footer #latest_media .footer {
  width:628px;
  height:13px;
  background:url(../images/footer.png) top left repeat-x;
  float:left;
   
}


Заранее спасибо.

Полынь-арт - галерея клипарта PNG. Алфавитный и тематический каталог.
http://polyn-art.ru
Сообщение отредактировал Полынь - Среда, 27 Ноя 2013, 03:23:26
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 2 | 03:29:07
Полынь, Адрес у сайта есть ??

Полынь
Сообщений: 3
Репутация: 4

Сообщение # 3 | 03:35:24
Ой, какая оперативность... shy

Мой сайт

Спасибо за отзывчивость, но Виктория убегла спать)... Ребятки, гляньте сайтик, кто свободен, пожалуйста...
К сожалению, тему с глупыми вопросами поздно обнаружила...так что сори).

Полынь-арт - галерея клипарта PNG. Алфавитный и тематический каталог.
http://polyn-art.ru
Сообщение отредактировал Полынь - Среда, 27 Ноя 2013, 04:40:00
HETPE3B
Сообщений: 1976
Репутация: 409

Сообщение # 4 | 09:39:35
Зачастую, проблема в кроссбраузерности возникает из-за того, что каждый браузер устанавливает свои значения стилей по умолчанию. Решается применением css файла, который приведет все стили к единому знаменателю, а потом уже можно применять свои стили. Вот хорошая статься на Хабре про Reset CSS http://habrahabr.ru/post/45296/. Возможно, некоторые вещи уже неактуальны (статья 2008-го), но по запросу Reset CSS Вы сможете найти готовый css-файл, останется только его залить к себе на сайт и разместить самым первым из файлов стилей.

И попробуйте использовать display: inline-block вместо float или задайте position: relative и вместо margin для расстановки используйте top, left, bottom, right

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 5 | 10:09:21
Полынь, Если уж сделали фиксированную ширину сайта то будьте последовательны и исключите из футера стили типа float ...

дивами с абсолютным позицированием будет гораздо удобнее, надеюсь идея понятна, padding сами пропишите, ширину и позиции центра и правой части подгоните под содержание

Код
.rel {position: relative;}
.mainfoo {width: 100%; height: 300px;}
.abc {position: absolute; top: 0px;}
.col {width: 20%;}
.cont {width: 60%;}
.top {top: 0px;}
.lef {left: 0px;}
.cen {left: 200px;}
.rig {left: 800p;}

<div class="rel top mainfoo lef">
<div class="abc top col lef">
левая колонка
</div>
<div class="abc top cont cen">
центральная колонка
</div>
<div class="abc top col rig">
правая колонка
</div>
</div>

Сообщение отредактировал Miss_Esq - Среда, 27 Ноя 2013, 10:13:20
is
Сообщений: 402
Репутация: 16
Уровень замечаний:

Сообщение # 6 | 10:13:07
пдключите несколько файлов css для разных браузеров, системными переменными определите какому браузеру какой css выдавать, и все
другими слвами корректируйте дизайн в css не задевая настройки других браузеров:
.css
.ie_x_css
.moz_css
...
..
.
можно и по модулям css раскидать, но это если не лень smile

promalp-forum.com
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 7 | 10:14:45
is,
Цитата
для разных браузеров
плохая идея ...

is
Сообщений: 402
Репутация: 16
Уровень замечаний:

Сообщение # 8 | 15:14:22
Цитата Miss_Esq ()
плохая идея ...

Идея не моя, а Адама Фримена*, правда у себя я ее реализовал усилиями сервера (как описал выше) вместо заморочек на стороне клиента,
поясните почему идея плоха, "для общего развития" smile

promalp-forum.com
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 9 | 15:56:33
is,
Цитата
поясните почему идея плоха, "для общего развития"

Потому что легко делается css для всех обозревателей кроссбраузерно без проблем ..
представьте сменить какие либо стили .... менять подгонять в 3-4 файлах ?

Сообщение отредактировал Miss_Esq - Среда, 27 Ноя 2013, 17:35:12
Полынь
Сообщений: 3
Репутация: 4

Сообщение # 10 | 17:26:40
Огромное спасибо за помощь. С абсолютным позиционированием дело не заладилось... Но благодаря вашим советам все встало на свои места. Вы - лучшие.))

Полынь-арт - галерея клипарта PNG. Алфавитный и тематический каталог.
http://polyn-art.ru
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Кроссбраузерность
  • Страница 1 из 1
  • 1
Поиск: