CP Blogs

Width and Height Issues-- IE6

---

string(146) "Smarty error: [in evaluated template line 6]: syntax error: unrecognized tag: width: 64px; height: 82px; (Smarty_Compiler.class.php, line 446)" string(117) "Smarty error: [in evaluated template line 6]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(192) "Smarty error: [in evaluated template line 10]: syntax error: unrecognized tag: width: auto; height: auto; min-width: 64px; min-height: 82px; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 10]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(121) "Smarty error: [in evaluated template line 19]: syntax error: unrecognized tag 'var' (Smarty_Compiler.class.php, line 590)" string(137) "Smarty error: [in evaluated template line 20]: syntax error: unrecognized tag: nw=a+"px"; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 20]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(156) "Smarty error: [in evaluated template line 26]: syntax error: unrecognized tag: width:expression(P7_MinMaxW(962,1258)); (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 26]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(158) "Smarty error: [in evaluated template line 27]: syntax error: unrecognized tag: width:expression(P7_MinMaxW(575,100000)); (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 27]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(128) "Smarty error: [in evaluated template line 28]: syntax error: unrecognized tag: height: 1%; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in evaluated template line 28]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

IE6 has a rather strange way of doing things but luckily we are in the twilight years of that dino. So like it's some surprise, IE6 doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!

This can cause problems, because we may need boxes to be re-sizable should more text need to go in them or should the user re-size text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to re-size. If we only use the min-width and min-height commands though then we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 64 x 82px. However, if users re-size the text then the box size will need to expand gracefully.

To resolve this problem, you can use the following code for an element with class="*":

.box
      
   html>body   .box
    

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector commands . Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

Looking for another solution? This is a common way that's a little more powerful. Uses js but heck with ~98% usage* why not?

<script type="text/JavaScript">
   <!--
   //pass min and max -measured against window width
   function P7_MinMaxW(a,b)if(w<=a)return nw;
 }
 //-->
 </script>
 <!--[if lte IE 6]>
 <style type="text/css">
 #pagewrapper  #main  #container  </style>
 <![endif]-->

* Site Stats for Corben's Products