SpinOneSolutions » Internet Explorer http://www.spinonesolutions.com I waste my time so that you don't have to... Fri, 16 Apr 2010 21:39:11 +0000 en hourly 1 http://wordpress.org/?v=3.0 JavaScript reports 0 (Zero) Height and Width for hidden image http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/ http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/#comments Thu, 09 Jul 2009 23:00:14 +0000 Will Wright http://www.spinonesolutions.com/?p=298 The Problem:

I was recently modifying an image gallery for a customer that used a pretty slick JavaScript Carousel for the presentation.  The Basic idea was that the images were all outputted within an LI, hidden via CSS, and then the JavaScript carousel used that LI as the datasource to build the gallery.

Everything worked great except that the images were being re-sized and their aspect ratio was not being maintained.  The solution was to obtain their original size so that the aspect ratio could be computed, and then applied during the re-sizing process.

The issue I ran into is that JavaScript (jQuery) always reported that the height and width was 0 (zero) for the images.

After some digging I found that elements marked “display:none” don’t have to load their hidden contents into the DOM and therefore there was no IMG object for JavaScript to report on!

IE

IE

IE Display None

IE Display None

Mozilla Display None

Mozilla Display None

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 display:none;
 float:left;
 margin:10px;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

The Solution:

The solution to this issue is to alter the method in which we hide the content.  Using “visibility:hidden” works; the height and width are reported correctly, but the browser allocates space for the content which “breaks” the layout.

IE Visibility Hidden

IE Visibility Hidden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 visibility:hidden;
 float:left;
 margin:10px;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

Almost there.  All we need to do now is get rid of the space that’s been allocated for the element.  There are a number of different strategies for doing this and you’ll probably have to pick a particular one based on the other attributes of your layout. I’m just going to use “postition:absolute” because it’s an easy one liner.

IE Visibility Hidden Position Absolute

IE Visibility Hidden Position Absolute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 visibility:hidden;
 float:left;
 margin:10px;
 position:absolute;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

All done!  We now have a hidden element and jQuery is reporting the correct dimensions for the img within it!

]]> http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/feed/ 2 CSS Minimum Height in Firefox & Internet Explorer http://www.spinonesolutions.com/2009/05/css-minimum-height-in-firefox-internet-explorer/ http://www.spinonesolutions.com/2009/05/css-minimum-height-in-firefox-internet-explorer/#comments Wed, 13 May 2009 18:24:31 +0000 Will Wright http://www.spinonesolutions.com/?p=255 The Problem:

You need to give an element a minimum height and you need to work in both FireFox (FF) and Internet Explorer (IE).

The Solution:

In your default style sheet use the declaration below. This will be picked up by Firefox.

min-height:500px;

In your conditionally included style sheet for IE set this declaration.

height:500px;
overflow:visible;

That’s it!

]]> http://www.spinonesolutions.com/2009/05/css-minimum-height-in-firefox-internet-explorer/feed/ 1 Long Legend Text Display Issue http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/ http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/#comments Wed, 08 Apr 2009 15:56:54 +0000 Will Wright http://www.spinonesolutions.com/?p=194 The Problem:

I recently built a form for a customer which had a really long legend!  My content area was floated to allow for a right hand sidebar and I noticed that with the addition of the new legend the layout had broken.

The issue, it turns out, is that both IE and FF handled the legend in an unexpected way.  Let’s throw down some markup for some examples.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }

 legend {
 }
</style>
</head>

<body>

<div class="container">
 <fieldset>
  <legend>This is a really long legend as an example, so lets make it really long</legend>
  <label for="input1">Input 1</label>
  <input type="text" id="input1" name="input1" value="input1">
  <label for="input2">Input 2</label>
  <input type="text" id="input2" name="input2" value="input1">
  <label for="input3">Input 3</label>
  <input type="text" id="input3" name="input3" value="input1">
 </fieldset>
</div>

</body>
</html>

FF3 Example

IE7 Example

The Solution:

The solution for FF3 is exactly what I would expect it to be; add white-space:normal; to the legend style definition.

 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }

legend {
  white-space:normal;
 }

FF3 Fixed

The solution for IE7 is a little bit more involved.  We need to nest a span tag within the legend, and then add the white-space attribute; plus a couple of other ornaments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 label,
 input {
  width:100%;
 }
 
 .container {
  width:250px;
 }
 
 fieldset {
 }
 
 legend {
 }
 
 span {
  display:block;
  white-space:normal;
  width:100%;
 }
</style>
</head>

<body>

<div class="container">
 <fieldset>
  <legend><span>This is a really long legend as an example, so lets make it really long</span></legend>
  <label for="input1">Input 1</label>
  <input type="text" id="input1" name="input1" value="input1">
  <label for="input2">Input 2</label>
  <input type="text" id="input2" name="input2" value="input1">
  <label for="input3">Input 3</label>
  <input type="text" id="input3" name="input3" value="input1">
 </fieldset>
</div>

</body>
</html>

”IE7 ]]> http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/feed/ 4 CSS hover menu sticking open http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/ http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/#comments Tue, 24 Feb 2009 17:21:15 +0000 Will Wright http://www.spinonesolutions.com/?p=175 Problem

Are your CSS hover menus sticking open in IE after the mouse has left the hit region?

Solution

Given the following markup:

<ul id="nav">
  <li>
    <div class="dropdown">
      <ul>
        <li>NavItem</li>
      </ul>
    </div>
  </li>
</ul>

IE doesn’t like hiding via the off screen positioning method.

#nav ul {
position:absolute;
left:-999px;
}
#nav div.drop:hover ul
{
  left:0;
}

So we’ll just switch it to use the display property instead.

#nav ul {
position:absolute;
display:none;
}
#nav div.drop:hover ul
{
  display:block;
}
]]> http://www.spinonesolutions.com/2009/02/css-hover-menu-sticking-open/feed/ 1