"Прыгает экран", пустота над заголоком скачет

master-kyk · August 21, 2014

Даже не понял как правильно описать проблему)). Все страницы одинаковые:

<body><div class="block-desk">    <div class="block1x1 orangeblock"></div>	    <div class="clearblock"></div>     </div>     <div class="content-desk">	<div class="clearblock"></div>  	    </div>	<footer>footer</footer>	</body>

Основные стили:

html, body {height: 100%;font-family: 'Monospace';font-size:14px;text-indent:0;}body {width: 960px;max-width: 960px;background:rgb(65, 64, 66);margin: 0 auto;background: url(../img/greybg.png);}.block-desk {width: 960px;margin: 0;margin-top: 30px;position: relative;background: url(../img/bg11.png);color:#000;}.content-desk {width: 960px;margin: 0;margin-top: 20px;position: relative;background: none;color:#fff;}footer {width: 100%;border-top: #98CA46 solid 2px;margin-top: 40px;overflow: hidden;}

Когда страницы пустые или с минимумом информации (как например в контактах), все статично и одинаково. Когда в секции для контента (<div class="content-desk">) появляется обширная часть материала, то пространство над ".block-desk" визуально уменьшается в фаерфоксе, а в хроме все как и на пустых. Вроде отступ определен четко, да и скрол присутствует на всех страницах, непонятно почему такие скачки возникают.

Подскажите где поправить).

npofopr · August 22, 2014

Выложите лучше страницы ваши, на какой нибудь хостинг.

Не надо только архивов.

master-kyk · August 22, 2014

Страница 1 - http://jsfiddle.net/3k6cp720/

Страница 2 - http://jsfiddle.net/po8b7etk/

Если открыть ссылки в "хроме", то ничего с отступом у "головы" не происходит. А если открыть в "фаерфоксе", то на второй странице отступ уменьшается.

neTp9c · August 22, 2014

Проблемы с первой страницей, отступ "не правильный" на ней.

Это происходит из-за того, что сброс float'ов сделан "не до конца".

Нужно исправить класс .clearblock добавив к нему overflow:hidden

А вообще, лучше взять стандартный класс для сброса float'ов, например, отсюда http://sonspring.com/journal/clearing-floats

.clear {  clear: both;  display: block;  overflow: hidden;  visibility: hidden;  width: 0;  height: 0;}

Edited August 22, 2014 by neTp9c

master-kyk · August 22, 2014

А забыл пристыковать таблицу сброса, она у меня в отдельном файле как "reset.css"

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font: inherit;	vertical-align: baseline;}

Во всех страницах:

Edited August 22, 2014 by master-kyk

Sign In

"Прыгает экран", пустота над заголоком скачет

Question

master-kyk

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

master-kyk

Link to comment

Share on other sites

neTp9c

Link to comment

Share on other sites

master-kyk

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information