VPF::ie6pngfix background-position problem - Форум программистов

champion

Дата 16.4.2008, 18:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 26.1.2005

Репутация: 2
Всего: 2

Использую на сайте модуль ie6png fiх, но есть проблема, он не учитывает при парсинге background-position, как быть?

Код



             <style type="text/css">
                    BODY {
                        background-color: #1d334d;
                        background-image: url('pictures/top.gif');
                        background-repeat: repeat-x;
                        padding: 0;
                        margin: 0;
                        font-family: arial, tahoma, verdana;
                        color: white;
                        font-size:11px;
                    }
            
                    #main {
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-position: bottom;
                        background-image: url('pictures/bottom.gif');
                        background-repeat: repeat-x;
                        width: 100%;
                    }
                    #s1, #s2, #s3, #s4 {
                        background-position: left bottom;
                        background-image: url('pictures/s1.png');
                        background-repeat: no-repeat;
                        height: 100%;
behavior: url(iepngfix.htc);
                    }


                    #s2 {
                        background-position: top left;
                        background-image: url('pictures/s2.png');
                    }
                    #s3 {
                        background-position: top right;
                        background-image: url('pictures/s3.png');
                    }
                    #s4 {
                        background-position: top center;
                        background-image: url('pictures/s4.png');
                    }
                    #right {
                       width: 299px;
                       float: right;
                       height: 100%;
                       background: url('pictures/b4.png') bottom left no-repeat;behavior: url(iepngfix.htc);
                    }
                    #content {
                        width: 100%;
                        height: 100%;
                    }
                    #left {
                        float: left;
                        height: 100%;
                        background-image: url('pictures/b2.png');
            background-position: right bottom;
            background-repeat: no-repeat;
behavior: url(iepngfix.htc);
                    }
                   img {
                        border:0;
                   }
                   #logo {
                        width: 100%;
                        height: 244px;
                        background-image: url('pictures/lbg.png');
                        background-position: right;
                        background-repeat: no-repeat;behavior: url(iepngfix.htc);
                   }
                   #lim {
                       position: relative;
                       top:40px;
                       left: 80px;
                   }
                   #news {
                        width: 100%;
                        min-height: 310px;
                        background-image: url('pictures/newsbg.png');
                        background-position: right;
                        background-repeat: no-repeat;
                        position: relative;
                        top:-23px;behavior: url(iepngfix.htc);
                   }
                   #next {
                        position: relative;
                        top:-35px;
                   }
                   #newscontent {
                        margin-left: 46px;
                        margin-top:10px;
                        padding-top:20px;
                        background:url('pictures/news.png') no-repeat left top;behavior: url(iepngfix.htc);
                   }
                   .date {
                        font-size: 34px;
                        font-weight: bold;
                        float: left;
                   }
                   .ncont {
                        margin-top:13px;
                        margin-left:48px;
                   }
                   .month1,
                   .month2 {
                        font-size: 12px;
                        width: 60px;
                   }
                   .month1 {
                     background-color: #27c811;
                   }
                   .month2 {
                        background-color: #ba4c2b;
                   }
                   #mitems {
                        height: 64px;
                        background: url('pictures/right.gif')right no-repeat;
                        margin-left: 55px;
                   }
                   .mitem {
                        display: block;
                        padding-top:37px;
                        float: left;
                        width: 100px;
                        text-align: center;
                        font-family: Tahoma, Arial;
                        font-size: 12px;
                        text-decoration: none;
                        color: #32445a;
                   }
                   #menu {
                        margin-top:20px;
                        height: 64px;
                        width: 98%;
                        background: url('pictures/mitembg.gif') repeat-x;
                   }
                   #lc {

                        background: url('pictures/b3.png') left bottom no-repeat;
                   }
                   #header {
                        margin-top: 10px;
                        width: 98%;
                        height: 257px;
                        background: url('pictures/hbg.png'); behavior: url(iepngfix.htc);
                   }
                   #h1 {
                        background: url('pictures/photo.jpg') no-repeat;
                        padding-left:355px;
                        height: 100%;
                   }
                   #h2 {
                       background: url('pictures/h3.png') right no-repeat;
                        height:100%; behavior: url(iepngfix.htc); 
                   }
                   #about {
                        padding: 30px;z-index: 1000;
                   }
                   #abtitle {
                        font-size: 23px;
                        background: #26c811;
                        padding:4px;
                        width: 136px;
                   }
                   #abtext {
                     padding-bottom: 130px;
                   }
                   #makedby {
                        position: absolute;
                        padding-bottom: 50px;
                        padding-left: 50px;
                        bottom:0;
                   }
                   #panel {
                        position: absolute;
                        right: 4px;
                        width: 13px;
                        padding-top:85px;
                        line-height: 1.7;
                   }
                   #h2title {
                        margin-left: 20px;
                        padding-left:2px;
                        padding-right: 2px;
                        padding-bottom: 1px;
                        background-color: #d7ffd2;
                        color: #32445a;
                        font-family: Tahoma, Arial;
                        font-size: 18px;
                        width: 70px;
                      position: relative;
                      top:20px;
                   }
                   #h2content {
                        position: relative;
                        top: 25px;
                      margin-left: 20px;
                      font-family: Tahoma, Arial, Verdana;
                      font-size: 16px;
                      color: white;
                      width: auto;
                      padding-right: 20px;
                  }
                   #h2description, #h2dproj, #h2galery {
                        background-color: #1ea50b;
                        color: white;
                        font-family: Tahoma, Arial, Verdana;
                        font-size: 14px;
                        width: 70px;
                        position: relative;
                        top: 40px;
                        left: 20px;
                        padding-left: 2px;
                   }
                   #h2dproj {
                       top: 42px;
                        width: 105px;

                   }
                   #h2galery {
                        width: 60px;
                        top: 65px;
                    }
                   #h2images {
                        position: relative;
                        top: 70px;
                        left: 20px;
                        width: 100%;
                        text-align: justify;
                   }
                   #cntrl {
                        position: absolute;
                        bottom:0;
                   }

             </style>

iepnggix.htc

Код


<public:component>
<public:attach event="onpropertychange" onevent="iePNGFix(0)" />

<script type="text/javascript">

if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

function filt(s, b)
{
 var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 var sM = (currentStyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
 s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');

 if (s && !(/IMG|INPUT/.test(nodeName) && !b) &&   currentStyle.width == 'auto' && currentStyle.height == 'auto') {
      style.width = offsetWidth + 'px';
  
    style.height = clientHeight + 'px';
  
    if (currentStyle.display == 'inline') style.display = 'inline-block';
}
 

 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
}

function iePNGFix(init)
{
 if (!/MSIE (5\.5|6)/.test(navigator.userAgent)) return;
 var evt = init ? { propertyName: 'src,background' } : event;
 var isSrc = /src/.test(evt.propertyName);
 var isBg = /background/.test(evt.propertyName);
 var isClass = !init &&
  ((this.className != this._png_class) && (this.className || this._png_class));
 if (!(isSrc || isBg || isClass)) return;
 this._png_class = this.className;
 var blank = blankImg.match(/([^\/]+)$/)[1];

 // Required for Whatever:hover support - erase any set BG if className changes.
 if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
     (style.backgroundImage.indexOf(blank) > -1)))
 {
  setTimeout(function() { this.style.backgroundImage = '' }, 0);
  return;
 }

 if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
 {
  if ((/\.png([^\.]+|$)/i).test(src))
  {
   filt(src, 1);
   src = blankImg;
  }
  else if (src.indexOf(blank) == -1) filt();
 }

 var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
 if ((bgSrc + this.src).indexOf(blank) == -1)
 {
  var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);

  if (bgPNG)
  {
   style.backgroundImage = 'url("' + blankImg + '")';
   filt(bgPNG[1], 0);
   // Unclickable elements inside PNG backgrounds.
   var tags = ['a', 'input', 'select', 'textarea', 'iframe', 'object'],
    t = tags.length, tFix = [];
   while (t--)
   {
    var elms = all.tags(tags[t]), e = elms.length;
    while (e--) tFix.push(elms[e]);    
   }
   var t = tFix.length;
   if (t && (/relative|absolute/i).test(currentStyle.position))
    while (t--) tFix[t].style.position = 'relative';
  }
  else filt();
 }
}

iePNGFix(1);

</script>
</public:component>

--------------------

champion

Дата 27.4.2008, 21:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 26.1.2005

Репутация: 2
Всего: 2

задам вопрос иначе.
Как исправить глюк с Png в осле шестом, если картинка png стоит на фоне слоя?

--------------------

SelenIT

Дата 27.4.2008, 21:54 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Боюсь что, увы, никак... разве что через conditional comments вставить в слой отдельный слой с картинкой, спозиционировать ее абсолютно куда надо, и положить под текст, подогнав z-index...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »