Метод "Раздвижных дверей" и ИЕ7, ИЕ8(режим совместимости)

[RoleXXX]

Есть кнопка, сделанная по методу раздвижный дверей:

<div class="my_button">
	 <div class="left_side"></div>
	 <div class="right_side"></div>
	 <button></button>
</div>

.my_button{position:relative; height:200px;}
.left_side{position:absolute; height:200px; left:0; right:10px; background:url;}
.right_side{position:absolute; height:200px; right:0; width:10px; background:url;}

В общих чертах так. Получается замечательная кнопочка с любыми эффектами, которая сама тянется (в разумных пределах) в зависимости от текста в button. И это замечательно работает во всех браузерах, кроме ИЕ7 и 8(режим совместимости). В них через раз происходит следующее. Бокс left_side перестает считать my_button своим родителем и растягивает правый край не до правого края родителя минус 10рх, а до края окна броузера.

Кто-нибудь сталкивался??

[Dimitry Wolotko]

Это весь код, который вы хотите нам показать? Чего-то не хватает, на мой взгляд.

[RoleXXX]

Это весь код, который вы хотите нам показать? Чего-то не хватает, на мой взгляд.

Метод давно и всем знакомый, поэтому я не стал расписывать подробно. Нужно?

[Justnewone]

Метод давно и всем знакомый, поэтому я не стал расписывать подробно. Нужно?

<button></button> - говорит о том, что незначительные отличия от общеизвестного метода слехка проецируются на Ваше решение =)

Кстати, а гугл что рассказал?

[RoleXXX]

Проблема решена.

Глюк возникает тогда, когда контрол обернут в блок с дефолтными свойствами, то есть с position:static. Если изменить позиционирование на relative или float, то глюк исчезает.

Такой же глюк может возникнуть когда родителю одновременно прописано position:relative и float. Нужно оставить что-то одно.

Edited October 30, 2009 by RoleXXX

[pelmennoteam]

Возможно спасет установка для родителя display: inline-block;

[yujin11]

Подсмотри сюда, раздвижная кнопка, аля лифт типа резиновая

Edited April 4, 2011 by yujin11