logo

jQuery IE CSS height issue

logo

Just a quick post as I came across this problem today when I was trying to dynamically set the height of a div depending on the height of another div.

My original code was something along the lines of:

<script type="text/javascript">

$(document).ready(function(){

   var tmpContentSize = jQuery(".colmask").css(‘height’);
   jQuery(".col2").css(‘height’,tmpContentSize);
   jQuery(".col3").css(‘height’,tmpContentSize);

});

</script>

This worked exactly as I wanted in firefox, but good old IE didn’t enjoy my solution as much.

Here is a similar way to do this that IE will enjoy:

<script type="text/javascript">

$(document).ready(function(){

   var totalSize = jQuery(".colmask").height();
   var tmpContentSize = totalSize + "px";
   jQuery(".col2").css(‘height’,tmpContentSize);
   jQuery(".col3").css(‘height’,tmpContentSize);

});

</script>

The .height() method is recommended for mathematical calculations as it returns a unit (eg 400) instead of a string. The .css(‘height’) method returns the height of the element and “px” tacked on, eg: 400px.

For some unknown reason IE seems to have issues with .css(‘height’) if the element (eg a large div) is larger than is showing on the screen. The .height() method doesn’t have this issue in IE.

6 Responses to “jQuery IE CSS height issue”

  1. [...] jQuery IE CSS height issue – Timby's Tech Talk [...]

  2. [...] jQuery IE CSS height issue – Timby’s Tech Talk [...]

  3. [...] jQuery IE CSS height issue – Timby's Tech Talk [...]

  4. watch wwe says:

    fantastic put up, very informative. I ponder why the other specialists of this sector do not realize this. You must continue your writing. I am sure, you’ve a great readers’ base already!

  5. Hello just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Firefox. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d post to let you know. The design look great though! Hope you get the problem resolved soon. Cheers

Leave a Reply

logo
logo
Powered by Wordpress | Designed by Elegant Themes