opera отрицательные margin и overflow полоса прокрутки

PooH

я чего-то не понимаю или опера как-то нестандартно обрабатывает отрицательные margins?
задача стояла следующая:
изменять марджины по бокам сайта от 0px до XXpx при изменении viewport'а браузера от 1024px до 1600px
чтобы на маленьких мониторах не было больших оступов по бокам, а на больших сайт не расползался по всей ширине
основная идея - wrapper сайта засовывается в два дива, один див(clipper) растягивается на всю ширину окна вплоть до 1600px и не меньше 1024px, ему ставится overflow:hidden, вложенный в него див (outer) с помощью отрицательных марджинов растягивается по ширине своего родителя+2*Ypx,т.е. он становится шире своего родителя на 2*Ypx
wrapper оборачивается этой конструкцией (clipper->outer->wrapper) е му ставятся margins в виде процентов (т.е. по сути реализуется margins=6.61%-Ypx)
все замечательно работает на бумаге, в хроме, лисе, ie6 ie8
только в опере при наличии абсолютно позиционированных элементов появляется горизонтальная полоса прокрутки

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>clip</title>

  <style type="text/css">

  

body {

margin:0px;

}

  

#clipper {

width:100%;

min-width:1024px;

max-width:1600px;

margin:0px auto;

background:red;

overflow:hidden;

}



#outer {

margin:0px -73px 0px -73px;

background:green;

}



#wrapper {

margin:25px 6.61%;

background:blue;

position:relative;

overflow:hidden;

height:400px;

}

  </style>

  </head> 

  <body> 

  

  <div id="clipper">

  	<div id="outer">

  		<div id="wrapper">

  <div style="position:static;left:0px;width:200px;height:400px;border:1px solid green;background:#fff;">

  sidebar

  </div>

   		</div>

   	</div>

  </div>

  

 </body>

</html>

тут все нормально
но как только div'у внутри враппера поставить position:absolute - сразу же появляется горизонтальная полоса прокрутки

PooH

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

PooH

если кому интересно (что сомнительно) - нашел решение, методом тыка



body {

margin:0px;

height:100%;

min-width:1024px;

max-width:1600px;

}

  

#clipper {

min-width:1024px;

max-width:1600px;

margin:0px auto;

background:red;

overflow:hidden;

width:100%;

position:absolute;left:0;top:0;

}



#outer {

margin:0px -73px 0px -73px;

background:green;

}



#wrapper {

margin:25px 6.61%;

background:blue;

position:relative;

overflow:hidden;

height:400px;

}

само решение - добавить position:absolute; left:0;top:0; к #clipper
протестировал в opera 10, ie6, ie7, ff3, chrome - все отлично работает
теперь надо откопать старые версии opera и в них посмотреть как будет работать
кто-нибудь подскажет удобный способ поставить набор браузеров для тестирования?
сам пользуюсь ietester + несколько виртуальных машин
конкретно хочу поставить сразу несколько версий opera начиная с древних и заканчивая самыми последними

pprtwh

Спасибо, что выложил решение.

кто-нибудь подскажет удобный способ поставить набор браузеров для тестирования?

Я пользовался каким-то онлайн сервисом (название не помню который тестировал сайт в выбранных браузерах.

Оставить комментарий