[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Matching Div Height Problem in Mozilla Browsers

Posted on 2006-05-17
2
Medium Priority
?
237 Views
Last Modified: 2011-04-14
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!
0
Comment
Question by:pnowell
2 Comments
 
LVL 19

Accepted Solution

by:
dakyd earned 2000 total points
ID: 16709691
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
 

Author Comment

by:pnowell
ID: 16710781
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question