SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TextArea expands beyond container when typed in... IE bug?

    In our web application we have a 3 column layout. I have an issue with my text area (set to a % width) expanding beyond the bounds of its container div when typed it. The page renders correctly however the bug only occurs when you type in the box in IE 6.

    Since our web application is password protected I had to toss up a crude skeleton of it to demonstrate the issue.

    The url is: http://rightreason.net/test/textarea.htm

    It only appears to happen in IE 6 for window (i've only tested on 6 as we no longer support IE versions prior to 6).

    Mozilla and Safari don't have the expansion issue.

    I appreciate any help to resolve this issue. Thank you.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    ie doesn't like the width of its elements defined by margins alone.

    You can add the ubiquitous height:1% hack to force the issue as follows.
    Code:
    <!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>
    /*css layout*/
    body {
     min-width:778px;
     margin:0px;
     background:#ffffff url(images/bg.gif) repeat-y;
     padding:0px;
     font-family:Geneva, Arial, Helvetica, sans-serif;
     font-size:12px;
    }
    #right {
     position:absolute;
     right:0px;
     top:60px;
     width:178px;
     overflow:hidden;
    }
    #left { 
     position:absolute;
     left:0px;
     top:105px;
     z-index:1;
     width:175px;
     margin:0px;
     margin-left:-1px;
     padding:20px 0px 10px 0px;
     font-size:12px;
    }
     
    #main {
     padding-top:0px;
     margin:0px 187px 0px 180px;
    }
    #inner {
     background:#CCCCCC; 
     border:1px dotted black; 
     padding:10px;
    }
    /* commented backslash mac hiding hack \*/ 
    #main, #inner {height:1%}
    /* end hack */ 
    
    #header {
     margin:0px;
     position:relative;
     height:120px;
     width:735px;
     z-index:2; 
    }
    </style>
    </head>
    <body>
    <div id="header">Header is here.</div>
    <div id="left">Left Column</div>
    <div id="main">
     <div id="inner">
      <textarea style="width:100%;" rows="4"></textarea>
     </div>
    </div>
    <div id="right">Right Column</div>
    </body>
    </html>
    The page will now display properly

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that does solve the issue.

    One question, having never used the 'height:1%' hack for IE I'm not quite sure why it works? What is it doing and does it have any side effects? I'll need to apply this hack to most of my pages.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The height:1% works because it triggers what is called "haslayout" mode and is something that ie seems to keep a secret to itself. HasLayout mode is triggered when an element gets a dimension and then it starts behaving properly. Why MS decided it shouldn't work properly without haslayout mode is anybody's guess.

    The haslayout mode is explained here:

    http://msdn.microsoft.com/library/de.../haslayout.asp

    Any of the properties specified on that page will trigger layout mode which is why display:inline-block or zoom or position:absolute or any dimension will also work. they all trigger the same behaviour in IE.

    The height:1% is mainly used because it has the least detrimental impact on a layout in IE (but it needs to be kept hidden from other browsers).

    Ie treats height as though it were minimum height and will automatically increase the parent to compensate for its content height. Therefore a 1% height is never going to be in effect because the content will always be more than that. So this is why it is commonly used as it has no real side effects.

    You can read a bit more about it here:

    http://www.positioniseverything.net/...html#haslayout

    You will indeed need to use the height:1% when you specify elements that have their dimensions defined by margins or to cure numerous floating (peek-a-boo) bugs, missing borders and padding and others......

    As well as hiding the height:1% from other browers (using the star selector hack * html) you should also hide it from ie5 mac using the mac hiding hack as in the code I gave you.

    Armed with this knowledge you can solve most of ie's irritating bugs I wouldn't use it for every element but only when you notice something is wrong.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •