diff --git a/jquery.watermark.js b/jquery.watermark.js
index 08b0623..3173d1f 100644
--- a/jquery.watermark.js
+++ b/jquery.watermark.js
@@ -40,6 +40,23 @@
       return 'placeholder' in i;
     }
   });
+  
+  $.fn.actualOuterHeight = function () {
+        // find the closest visible parent and get it's hidden children
+        var visibleParent = this.closest(':visible').children(),
+            thisOuterHeight;
+
+        // set a temporary class on the hidden parent of the element
+        visibleParent.addClass('temp-show');
+
+        // get the outer height
+        thisOuterHeight = this.outerHeight();
+
+        // remove the temporary class
+        visibleParent.removeClass('temp-show');
+
+        return thisOuterHeight;
+  };
 
   $.fn.watermark = function (text, options) {
     var elems;
@@ -96,7 +113,7 @@
         e_height = e_height === 'normal' ? parseInt($elem.css('font-size'), 10) : e_height;
         e_top = ($elem.css('padding-top') !== 'auto' ? parseInt($elem.css('padding-top'), 10) : 0);
       } else {
-        e_height = $elem.outerHeight();
+        e_height = $elem.actualOuterHeight();
         if (e_height <= 0) {
           e_height = ($elem.css('padding-top') !== 'auto' ? parseInt($elem.css('padding-top'), 10) : 0);
           e_height += ($elem.css('padding-bottom') !== 'auto' ? parseInt($elem.css('padding-bottom'), 10) : 0);
@@ -152,6 +169,14 @@
   };
 
   $(function () {
+    //add temp-show class to page to retrieve actual height
+    var newCssClass = document.createElement('style');
+    newCssClass.setAttribute("type", "text/css");
+    var newContent = document.createTextNode('.temp-show{position:absolute !important; visibility:hidden !important; display:block !important;}');
+    newCssClass.appendChild(newContent);
+    var head = document.getElementsByTagName('head')[0];
+    head.appendChild(newCssClass);
+    
     $('.jq_watermark').watermark();
   });
 })(jQuery);