Некорректная загрузка страницы. В чем проблема? браузер? или руки?

Question

[dk-web]

Вот с чем столкнулся - при загрузке страницы неверно определяется высота контента.
Но это только при подключении шрифтов..
неважно как - link, @ font.. @ import...

Далее - если жать f5 или перезагрузить история повторяется, если же просто через адресную строку (или применить resize) - все ок.
Переход по ссылкам - тоже все ок, но стоит нажать f5 - все ломается...
прикрепляю скриншоты и фидд.
- первичная
- результат
- жмем enter в адресной строке или ресайз
- результат
Даже не знаю куда копать... Кто-либо сталкивался?
вот проект на фиддлере - но там все вроде корректно отображается..
jsfiddle.net/dkweb/n313exou/1
Работаю в Хроме (refresh и f5 - не работают), Опере - тоже, а в Firefox - вроде бы и ничего...

Answer 1

[MhMadHamster]

document.onreadystatechange = function() {
		if (document.readyState === 'complete') {
			$('div.sidebar').height($('div.content').height());
		}
	};

Проблема была из-за того что ресайз происходил до применения шрифта

Comments

[dk-web]

Спасибище огромное! Это логично, хотя и странное для меня поведение..
вот на awesome нашел... If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads.
То есть проблема существует)
еще раз спасибо!
п.с. это совсем все кондово?(

[MhMadHamster]

dk-web: ну в вашем случае, кэширование никак не влияет, потому что скрипт ресайза срабатывает по событию document.ready который в свою очередь срабатывает по событию DOMContentLoaded, которое современные браузеры типа Chrome, Firefox, Safari генерируют независимо от того успел ли стиль font-face отработать

[dk-web]

MhMadHamster: вот сколько переписываю.. взял уже ручку и бумагу алгоритм составлять - когда функция срабатывает по ресайзу - все встает на свои места... но при загрузке документа - в упор отказывается все нюансы учитывать - сейчас встрял с высотами блоков при минимальном расширении, когда сайт в одноколоночный превращается. Понятное дело - что в реалиях ты или там работаешь или на ноуте и не будешь окошко менять сто раз.. но тем не менее.
Буду признателен если финальный "продукт" прокомментируете, когда будет готов

[dk-web]

MhMadHamster: приветствую! вы мне очень помогли в начале.. и в принципе я готов поделиться тем, к чему пришел... буду очень признателен, если найдете возможность посмотреть...
dkweb.coolpage.biz/data-control/data-control.php

исходники выложил здесь
https://drive.google.com/file/d/0BxRag0FeNedKbHoyU...

требуется подключение к БД... примерный дам приложил.
вряд ли вы конечно этим будете заниматься, но вдруг.

мне важно понять насколько колхозен мой колхоз, но еще пару недель о таком я и мечтать не мог..
п.с. я специально не задействовал потенциал jquery table.. там уж слишком мореная документация( сейчас буду, скорее всего разбираться, но для моих нужд пока и такого варианта с головой...

функции я постарался написать используя PDO (как смог) - здесь все настаивали на необходимости перехода...
jquery раньше мог только .html(data) и alert...

буду признателен не только за "удали это и не позорься", но и конструктивную критику и советы простыми словами... а то, порой, хочется бросить это все дело, когда почитаешь спец. форумы.
извините, что так много букав)
да... в чем задача была? грубо говоря - сделать систему управления контентом - как можно более универсальным - регистрации (фото), блоки с проектами (лого). чтобы можно было включать и снимать - функций будет больше - не только скрыт и активен - допущен, отклонен и т.д.

умолкаю... хорошего дня!
п.с. ни в почте ни в скайпе не дописался до вас...

[MhMadHamster]

dk-web: посмотрю мб после работы
ссылка битая
странно что не дописались, я вам по почте ответил, ищите в спаме мб

Answer 2

[Сергей Иванов]

Что то мне подсказывает что вы не верно используете float: left;

.sidebar {
  float: left;
}
.content {
  /* где float?? */
}

помимо этого где сброс float в виде clear:both?

Воспользуйтесь этим и не парьтесь

Comments

[dk-web]

про float подумаю, но разве обязательно указывать для второго блока? ему достаточно комады - обтекай первый слева..
а сбрасывать что? если весь контент идет в одном блоке... я наоборот этот clear отключаю - потому что тогда из контента все выпадает.
Но если использую футер, то тогда конечно clear перед ним или на него)

[dk-web]

а с ресурсом этим я тоже ознакомился... там или футер или колонки - плюс колонки на всю высоту экрана не выстраиваются изначально - так что в любом случае возвращаюсь к своим изысканиям

[dk-web]

Сергей Иванов пожалуй, вы правы.. у меня уже руки опустились( каждый раз что-нибудь да всплывает - просто сложно поверить, что такая базовая штука - как две колонки и одинаковая высота может вызывать столько проблем... начну читать заново учебники