.height() почему-то считает высоту элемента неправильно
 

На странице есть несколько контейнеров div.secondary_banner_box, внутри которых типовые элемнты: div.title, div.subtitle и div.text (ну и прочее, что нам неинтересно). Нужно, чтобы независимо от количества контента в любом из элементов div..secondary_banner_box все они начинались (и, следовательно, заканчивались) горизонтально на одном уровне соответственно класса элемента. Заумно как-то получилось...

В общем, чтобы все элементы одного класса были одинаковы по высоте. Есть функция, которая это делает (получает в данном примере ".secondary_banner_box", как первый параметр, а как второй -- один из классов внутренних элементов:

function alterHeights( container, element ) {
		
			var boxes = jQuery(container).length; //считаем сколько всего родительских контейнеров
			
			var heights = [];
			
			for ( var i = 0; i < boxes; i++ ){
			
				heights[i] = jQuery( '#box_' + (i+1) + ' ' + element ).height(); //определяем высоты всех элементов
			
			}
			
			var max = 0;
			
			for ( i = 0; i < boxes; i++) {
			
				if ( heights[i] > max ) max = heights[i]; //определеяем максимальную высоту среди всех элементов
			
			}
			
			for ( i = 0; i < boxes; i++ ) {
			
				jQuery( '#box_' + (i+1) + ' ' + element ).height(max); // выставялем эту максимальную высоту для всех элементов
			
			}
		
		}

Вроде всё ОК и часто отрабатывает эта конструкция как надо. Но часто и не нормально. Ненормальность заключается, в том, что "jQuery( '#box_' + (i+1) + ' ' + element ).height()" возвращает значение, большее, чем там реально должно быть.

Например, на этой странице, если функция не выполняется, то высота самого высокого элемента среди .title ( а именно #box_6 .title ) равняется 69px. Если же функция выполняется, максимальная высота становится 96px.

Скриншот без выполнения функции:



Скриншот с выполнением функции:



В чём причина такого странного поведения -- мне непонятно, поэтому прошу помощи.

adelante,
padding добавляет высоту ширину элемента
попробуйте прописать padding:0!important;

Увы, не помогло :(

Совершенно не понятно, в чём причина такого поведения. Сейчас я прошёл по всем 6 контейнерам и в одном из элементом каждого контейнера (.subtitle) повыключал выставленный "height:72px;", -- ни в одном из этих элементов нет такой высоты 0_о

adelante,
Лучше чтоб не гадать - ссылку на тестовую страницу и скриншот - с обведенной рамкой и селектором -высоту чего глянуть

На скриншотах прикреплённых выбран для анализа элемент "#box_6 .title".

Это заголовок правого тура во втором ряду. На скриншотах серым выделено слово "исследуем" (1й скриншот) и буква "и" (2й скриншот).

adelante,
:dance: Онлайн - Лечение зубов по фотографии - с гарантией - дорого!

http://questtravel.ru/?s=африка

adelante,
В Опере - так =>
Мозилла и Хром

Попробуй так:

//Скрипт отработатет после загрузки картинок
$('.secondary_banner_box img').load(function(){
    var height = 0;
    $('.secondary_banner_box').each(function(){
        var h = $(this).height();
        if (h > height) {
            height = h;
        }
    });
    $('.secondary_banner_box').height(height);
    //Или так
    //$('.secondary_banner_box').css('min-height', height);
});

imsha, мне ж не .secondary_banner_box менять надо, а некоторых его детей. Или я что-то не понял?

Deff, пардон, но я не понял, как мне помогают эти скриншоты. Кроме оперного, где max-height:-1px; Попробовать такой max-height?

adelante,
Пока не наю чем помогают
Не думаю что поможет max-height:-1px; (это максимальный размер неограничен

Танцы с бубном - Пробуйте изменить
font-family и line-height