Another day, another problem! FF Column height and YT Video

[vinchenzison]

Hi all,

Another problem.
This time it's with my column heights. I'm using some mootools code to make my main and right divs the same height.
This has worked fine right up until I embedded a video into an article.
The column is only growing as big as the right div content or the text in the main div. Whichever is longer.
Example here http://www.tsnet.co.uk/connect/typol...php/video.html

This is the code I'm using to make my divs the same height. (Not my code but a google search)

function equalHeights() {
var height = 0;
divs = $$('#main','#right');
divs.each( function(e){
 if (e.offsetHeight > height){
  height = e.offsetHeight;
 }
});
 
divs.each( function(e){
 e.setStyle( 'height', height + 'px' );
 if (e.offsetHeight > height) {
  e.setStyle( 'height', (height - (e.offsetHeight - height)) + 'px' );
 }
}); 
}

and then calling the function at the end of my window.domready

(I'm open to hear of other methods to do this too)

Is this happening because the video is loading after the domready event?
Any ideas for a fix?

Thanks again!

[qrczak]

In your source code:

<div id="main" style="height: 127px;">

and that's the problem. Remove this inline css style (height).

[vinchenzison]

Hi

I think this style is put in place by the mootools code that gives me equal height column so is generated on domready.
If you look in IE then this problem doesn't exist, only in Firefox. It's usually IE giving me issues!!

[qrczak]

Yes, you're right. It's only happen in Firefox. I don't know why. In IE, Opera, Chrome and Safari works fine.

[vinchenzison]

My suspicions were right and the youtube video is loading after the domready.
Although not the most elegant solution, I put a 200ms delay on the equalheight function and this works ok.
I will see how this works with several videos on one page

I tried 3 videos and got the same issue so had to make it 500ms Not good

Edit - I changed the domready for load and I don't need to use a delay but it's not pretty seeing the sidebar jump in growth with the equalheight function kicks in.

[SuperMatz]

Pherhaps it would be easier and more "compatible" using a background pattern (for the div #container) that spans both columns? That eliminates the need for JavaScript and is 100% cross-browser.

[vinchenzison]

Pherhaps it would be easier and more "compatible" using a background pattern (for the div #container) that spans both columns? That eliminates the need for JavaScript and is 100% cross-browser.

Actually thinking about it, I can just apply my border and background colour to the container. Before I had a border-left of the #right div but now we aren't so I can remove the styling from #main and #right and just have it on #container.
Thanks for the idea