Не скроллится контент в блоке
Нужна помощь! При загрузке страницы, контент в блоке splash_page не скроллится. Но стоит только открыть инспектор, как появляется полоска скроллинга, и все начинает двигаться. Причем не важно закреплен инспектор, или откреплен. Проверено в Safari, Chrome.
CSS:
/** * 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; }
#splash_page {
position: absolute;
width: 690px;
height: auto;
padding: 35px 30px;
opacity: 10;
}
.image_grid {
float: left;
overflow: hidden;
width: 732px;
position: relative;
margin-top: 40px;
}
.image_grid li {
float: left;
line-height: 17px;
color:
#686f74;
list-style: none;
overflow: hidden;
margin-bottom: 30px;
margin-right: 30px;
}
HTML:
/** * 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="splash_page">
<div class="title-wrapper">
<h2>Меню</h2>
</div>
<div class="image_grid">
<ul id="list" class="portfolio_list">
<li data-id="id-1" class="non_veg">
<div class="about-descr">Название<span>123р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_1.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_1.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
<li data-id="id-2" class="non_veg">
<div class="about-descr">Название<span>223р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_2.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_2.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
<li data-id="id-3" class="non_veg">
<div class="about-descr">Название<span>153р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_3.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_3.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
(...)
A lot of li's
(...)
</ul>
</div>
</div>
CSS:
/** * 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; }
#splash_page {
position: absolute;
width: 690px;
height: auto;
padding: 35px 30px;
opacity: 10;
}
.image_grid {
float: left;
overflow: hidden;
width: 732px;
position: relative;
margin-top: 40px;
}
.image_grid li {
float: left;
line-height: 17px;
color:
#686f74;
list-style: none;
overflow: hidden;
margin-bottom: 30px;
margin-right: 30px;
}
HTML:
/** * 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="splash_page">
<div class="title-wrapper">
<h2>Меню</h2>
</div>
<div class="image_grid">
<ul id="list" class="portfolio_list">
<li data-id="id-1" class="non_veg">
<div class="about-descr">Название<span>123р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_1.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_1.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
<li data-id="id-2" class="non_veg">
<div class="about-descr">Название<span>223р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_2.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_2.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
<li data-id="id-3" class="non_veg">
<div class="about-descr">Название<span>153р.</span></div>
<a href="assets/templates/panini/images/gallery_big_img_3.jpg" title="Image Description Goes Here" class="example6">
<span class="roll" style="opacity: 0; "></span>
<img src="assets/templates/panini/images/gallery_img_3.jpg" alt="img" class="img_bor" style="opacity: 1; ">
</a>
</li>
(...)
A lot of li's
(...)
</ul>
</div>
</div>