Matching Div Height Problem in Mozilla Browsers

When I assign the height of a div through a statement like…

contDivs[i].style.height=maxHeight;

…Mozilla browsers like Firefox seem to ignore this assisgnment.

I have employed the often-referenced Javascript code for matching the heights of two or more divs containing dynamic content to be found at:

http://www.devarticles.com/c/a/Web-Design-Standards/Matching-div-heights-with-CSS-and-JavaScript/

 After the script measures the height of each div whose height is to be matched and determines the greatest height via…

maxHeight=Math.max(maxHeight,divHeight);

…maxHeight gets determined but, when I try to assign the element's height as in the first statement above, it changed the div height in IE 6 but not in Firefox 1.5.0.3 (Mozilla 5.0).

Do I need some different statement for Mozilla?  Will this statement work for both IE and Mozilla or do I need to have a browser conditional to handle this?

Your help is much appreciated!
pnowellAsked:
Who is Participating?
 
dakydCommented:
There are a couple of things that could cause that type of behavior:
1) Browsers that respect the standards expect units for measurements, so you need to add a unit to your assignment.  Most likely, you're using pixels, so add "px" to the end of your assignment:
  contDivs[i].style.height=maxHeight + "px";

  As you've discovered, IE likes to play fast & loose w/ the rules, so it'll let you get away without specifying a unit, and it will assume pixels.  Adding it back in won't change the way IE renders, so it's usually a good idea to include it anyway.

2) You've changed the style/display of the divs to be inline rather than block.  Inline elements only take up as much space as their content requires, so no amount of changing the style should change the height (it's a pain to wade through, but for more detail, check out the CSS2 spec from the W3C, http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property).  Again, IE does things its own way, though, so in that browser, you *can* modify the height of an inline element using the height attribute.

  This second option seems much less likely, but if it is the case, changing the display back to "block" should let you modify the height.  I didn't look through everything on the link you posted (those pages take forever to load, and I'm on a T1), so I don't know if it'll cause any adverse effects elsewhere, but somehow I doubt it.

Regardless, hope that helps.
0
 
pnowellAuthor Commented:
Dakyd,

Thanks!  Yes, the "px" worked.  And I will award you the points and delete the other post.  I found out from E.E. that they made a decision not to show questions in the new questions lists to the person who wrote them definitely leading to the impression that they weren't posted (strange huh?.  But they can be seen by the inquirer under "my Account."

And Dakyd, please be looking for another post from me with a new question in a few hours on a related topic.  



0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.