overflow: visible в IE

[CoDy]

Всем привет!!!

Подскажите плиз решение данной проблемы(если оно есть).

Вот код:

div#test {

margin: 0;

padding: 0;

width: 100px;

background: #ff0;

border: 1px solid #000;

zoom: 1;

overflow: visible;

}

</style>

<div id="test"></div>

<div id="test">asdadaasddssssssssssssssssss</div>

Везде кроме IE эти контейнеры имеють шрину 100px и видно их содержимое(ибо overflow: visible;), а IE растягивает нижний до размеров содержимого, игнорируя width: 100px;.

Подскажите можно ли это както поправить?(мне это нада для создания контента который не занимает места, position: absolute не подходит)

[Justnewone]

Всем привет!!!

Подскажите плиз решение данной проблемы(если оно есть).

Вот код:

div#test {

margin: 0;

padding: 0;

width: 100px;

background: #ff0;

border: 1px solid #000;

zoom: 1;

overflow: visible;

}

</style>

<div id="test"></div>

<div id="test">asdadaasddssssssssssssssssss</div>

Везде кроме IE эти контейнеры имеють шрину 100px и видно их содержимое(ибо overflow: visible;), а IE растягивает нижний до размеров содержимого, игнорируя width: 100px;.

Подскажите можно ли это както поправить?(мне это нада для создания контента который не занимает места, position: absolute не подходит)

IE6 воспринимает ширину и высоту почти как все остальные браузеры воспринимают мин-высоту и мин-ширину. Покажте что должно получица.

[CoDy]

Я делаю "анимированную" панель страничной навигации без применения JS, которая может работать в графическом и текстовом режиме(на случай отключения графки в браузере).

Для того чтобы панелька работала при отключенной графике, я под контейнерами с текстурами кнопок прячю контейнер(<span class="text">«</span>) с текстовым вариантом кнопки.

Основу вроде сделал, но вот спрятать контейнер с текстовым вариантом кнопки в IE не получается.

Вот тут код и текстуры кнопок http://ecologcrimea.com.ua/_files/i/1.7z. Он довольно запутаный потому я его и не выложил в первом посте.

<style>
/****************************************
 * Настройка панели страничной навигации.
 */

/*Обнулить все внутри контейнера*/
div#pageNavigationPanel * {
  margin: 0;
  padding: 0;
  border: 0;
}

/*Главный контейнер*/
div#pageNavigationPanel {
  width: 100%;
  height: 28px; /*резервируем место для увеличения кнопок, высота текстуры активной кнопки*/
  text-align: center;
  color: #000;
}

/*Настройка таблици*/
div#pageNavigationPanel table {
  margin: auto; /*горизонтальное выравнивание таблици по центру*/
  height: 100%; /*для вертикального выравнивание ячеек по середине*/
}

/*Настройка ячеек таблици*/
div#pageNavigationPanel td {    
  margin: 0;
  border-spacing: 0;
  vertical-align: middle; /*выравнивание кнопок по центру*/  
}

/*Настройка стилей ссылок*/
div#pageNavigationPanel a:link,
div#pageNavigationPanel a:visited,
div#pageNavigationPanel a:active,
div#pageNavigationPanel a:hover	{
  text-decoration: none;
  color: #000;
}

/*Глобальные настройки для кнопок*/
div#pageNavigationPanel a span {      
  height: 14px; /*высота текстуры неактивной кнопки*/

  border: 0px solid #fff;

  font-size: 14px; /*размер шрифта неактивной кнопки*/
  line-height: 14px; /*вевтикальное выравнивание текста(равно высоте текстуыр неактивной кнопки)*/

  background: url(./pageNavPanel_sprite.gif) no-repeat;
  overflow: hidden;

  display: block;
  float: left;
}

/*Настройки активных кнопок*/
div#pageNavigationPanel a:hover, /*для IE*/
div#pageNavigationPanel a:hover span {
  height: 28px; /*высота текстуры активной кнопки*/

  font-size: 18px;
  font-weight: bold;  
  line-height: 28px; /*вевтикальное выравнивание текста(равно высоте текстуыр активной кнопки)*/
}

/*Основной контейнер 'резиновой' неактивной кнопки*/
div#pageNavigationPanel a span.left {
  padding-left: 3px; /*отступ для скругления углов слева*/  

  border-left-width: 1px; 

  background-position: -84px 0px;
}
/*Закрывающая часть 'резиновой' кнпки - правое скругление*/
div#pageNavigationPanel a span.right {
  width: 3px;
  *width: 4px; /*IE box model хак*/

  border-right-width: 1px;

  background-position: -125px 0px; /*текстура закрывающих углов*/    
}
/*Основной контейнер 'резиновой' активной кнопки*/
div#pageNavigationPanel a:hover span.left {
  padding-left: 6px; /*отступ для скругления углов слева*/ 

  border-left-width: 2px;

  background-position: -168px -14px;
}
/*Закрывающая часть 'резиновой' активной кнпки - правое скругление*/
div#pageNavigationPanel a:hover span.right {
  width: 6px;
  *width: 8px; /*IE box model хак*/

  border-right-width: 2px;

  background-position: -252px -14px; /*текстура закрывающих углов*/
}

/*Настройка 'статической' кнопки*/
div#pageNavigationPanel a span.stat {
  width: 14px; /*ширина текстуры неактивной кнопки*/
  *width: 16px; /*IE box model хак*/

  border-left-width: 1px;
  border-right-width: 1px;
}
/*Настройка 'статической' активной кнопки*/
div#pageNavigationPanel a:hover span.stat {
  width: 28px; /*ширина текстуры активной кнопки*/
  *width: 32px; /*IE box model хак*/

  border-left-width: 2px;
  border-right-width: 2px;    
}

/*Настройки текстур для каждой 'статической' кнопки*/
/*в начало*/
div#pageNavigationPanel a span.onStart {  
  background-position: 0px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onStart {
  background-position: 0px -14px;/*bbp*/
}

/*пребедущая страница*/
div#pageNavigationPanel a span.onPrPage {  
  background-position: -14px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onPrPage {
  background-position: -28px -14px;/*bbp*/
}

/*пребедущий элемент*/
div#pageNavigationPanel a span.onPrElm {  
  background-position: -28px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onPrElm {
  background-position: -56px -14px;/*bbp*/
}

/*следующий элемент*/
div#pageNavigationPanel a span.onNextElm {  
  background-position: -42px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onNextElm {
  background-position: -84px -14px;/*bbp*/
}

/*следующая стнаница*/
div#pageNavigationPanel a span.onNextPage {  
  background-position: -56px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onNextPage {
  background-position: -112px -14px;/*bbp*/
}

/*в конец*/
div#pageNavigationPanel a span.onEnd {  
  background-position: -70px 0px;/*sbp*/
}
div#pageNavigationPanel a:hover span.onEnd {
  background-position: -140px -14px;/*bbp*/
}

/*Настройка разделителя групп кнопок*/
div#pageNavigationPanel td.groupSeparator {
  width: 10px; /*ширина разделитяля груп кнопок*/
}

[b]/*Настройка блока с текстом при выключенной графике*/
div#pageNavigationPanel a span.text,
div#pageNavigationPanel a:hover span.text {
  width: 0;
  border: 0;

  font-size: 20px;
  font-family: arial;
  font-weight: bold;

  overflow: visible;  
}
div#pageNavigationPanel a span.text {
  font-size: 20px;
}
div#pageNavigationPanel a:hover span.text {
  font-size: 30px;
}[/b]
/*
 * Настройка панели страничной навигации.
 ***************************************/
</style>
  <div id="pageNavigationPanel">
    <table cellspacing="0"><tr>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">|‹</span>[/b]<span class="stat onStart"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">«</span>[/b]<span class="stat onPrPage"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">‹</span>[/b]<span class="stat onPrElm"></span>
        </a>
      </td>
      <td class="groupSeparator"></td>
      <td>
        <a rel="nofollow" href="" title="">
          <span class="left">1</span><span class="right"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          <span class="left">2</span><span class="right"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          <span class="left">3</span><span class="right"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          <span class="left">4</span><span class="right"></span>
        </a>
      </td>
      <td class="groupSeparator"></td>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">›</span>[/b]<span class="stat onNextElm"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">»</span>[/b]<span class="stat onNextPage"></span>
        </a>
      </td>
      <td>
        <a rel="nofollow" href="" title="">
          [b]<span class="stat text">›|</span>[/b]<span class="stat onEnd"></span>
        </a>
      </td>      
    </tr></table>
  </div>

Проблемную часть выделил жирным.