Почему Position: absolute не выпадает из потока?
Верстаю сейчас сайт на kovka-kmv.ru там есть псевдослайдер, который грёбанный дизайнер облепил элементами декора, которые выходят за 1000px они были спозиционированны абсолютно, а следовательно должны выпасть из потока и вообще не влиять на полосы рокрутки, но, увы, во всех браузерах есть полоса горизонтальная полоса прокрутки
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
Стили
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
Забыл сказать что если убрать вензеля и кусты, горизонтальный скроллинг пропадает и всё нормально.
Кто что думает?
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="likeSlider">
<div id="leftKust" class="kust"></div>
<div id="rightKust" class="kust"></div>
<a href="/roof/" class="label left">Кровля</a>
<a href="/kovka/" class="label right">Ковка</a>
<div id="leftVenzel" class="venzel"></div>
<div id="rightVenzel" class="venzel"></div>
<img src="/img/main_slider_image.jpg" usemap="#mapping">
</div>
<div id="leftKust" class="kust"></div>
<div id="rightKust" class="kust"></div>
<a href="/roof/" class="label left">Кровля</a>
<a href="/kovka/" class="label right">Ковка</a>
<div id="leftVenzel" class="venzel"></div>
<div id="rightVenzel" class="venzel"></div>
<img src="/img/main_slider_image.jpg" usemap="#mapping">
</div>
Стили
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#likeSlider{
position: relative;
}
#likeSlider img{
border: 3px solid #FAFAFA;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-sizing: 12px;
}
#likeSlider .kust{
position: absolute;
width: 146px;
height: 329px;
top: -16px;
}
#likeSlider #leftKust{
background: url('/img/slider_left_kust.png') no-repeat;
left: -126px;
z-index: -1;
}
#likeSlider #rightKust{
background: url('/img/slider_right_kust.png') no-repeat;
left: 944px;
z-index: -1;
}
#likeSlider .venzel{
position: absolute;
width: 83px;
height: 288px;
top: 7px;
}
#likeSlider #leftVenzel{
background: url('/img/venzel_left.png') no-repeat;
left: -49px;
z-index: 0;
}
#likeSlider #rightVenzel{
background: url('/img/venzel_right.png') no-repeat;
left: 931px;
z-index: 0;
}
position: relative;
}
#likeSlider img{
border: 3px solid #FAFAFA;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-sizing: 12px;
}
#likeSlider .kust{
position: absolute;
width: 146px;
height: 329px;
top: -16px;
}
#likeSlider #leftKust{
background: url('/img/slider_left_kust.png') no-repeat;
left: -126px;
z-index: -1;
}
#likeSlider #rightKust{
background: url('/img/slider_right_kust.png') no-repeat;
left: 944px;
z-index: -1;
}
#likeSlider .venzel{
position: absolute;
width: 83px;
height: 288px;
top: 7px;
}
#likeSlider #leftVenzel{
background: url('/img/venzel_left.png') no-repeat;
left: -49px;
z-index: 0;
}
#likeSlider #rightVenzel{
background: url('/img/venzel_right.png') no-repeat;
left: 931px;
z-index: 0;
}
Забыл сказать что если убрать вензеля и кусты, горизонтальный скроллинг пропадает и всё нормально.
Кто что думает?