#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    34
    Rep Power
    12

    Textarea size is different between ie anf ff - firefox seems to be the wrong one!


    Hello all! I'm having an odd problem. I have a select box and a textarea right next to each other that need to be the exact same dimensions. I figure, easy, just set the height and width via CSS properties, but that doesn't seem to be accurate at all - in either browser. I got out a neat program called pixel ruler to see exactly how many pixels each is displayed with. This is what happens:


    • ie - Not counting borders, the textarea is the exact width and height. The select box is correct width (not counting the border. If you include the 1px standard blue border on any of these, they are 2px too wide or tall).

      However, the height of the select box(very annoying) seems to be somewhat ignored in that ie forces the select box to end at the end of a row, so giving it a height will just approximate a row number. It would be nice if I could fix this. Any thoughts on that?


    • firefox- Not including the border, the select box is 2px too few in both the width and height. If you include the border it is exact. (which means that ie and ff are going to be hard to match.)

      But here is the REAL puzzler and the biggest reason for the post. Firefox seems to get the textarea size completely wrong. Not including the border, it is 2px too wide and tall! If you include the border, it is then 4px too wide and tall.


    I have no padding or margins on these by the way, so that can't be the answer. Any thought as to why firefox is putting extra width and height on textareas? Or any suggestions on making a textarea and select the same size in both ff and ie?

    Thanks!
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Well it would be helpful if we could please see a link to your page or the HTML and CSS code to go along with it.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    34
    Rep Power
    12
    Your wish is my command! Here's the code (simplified, but with the same issue. You can paste this in a file and view it). I did find something else out. If I don't put the doctype in there, it actually renders it the correct width and height in Firefox. This, of course, isn't an option, so is there a way to fix it with the doctype in there?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head></head>
    <body>
    	<div style="padding:0; border:0; margin:0;"><select size='5' style="float: left; margin:0; padding:0; width:203px; height: 74px;"><option>empty option 1</option><option>empty option 2</option><option>empty option 3</option><option>empty option 4</option><option>empty option 5</option><option>empty option 6</option><option>empty option 7</option><option>empty option 8</option></select></div>
    	<div style="float: left;">&nbsp;</div>
    	<div style="padding:0; margin:0; border:0;"><textarea style="float: left; margin: 0; padding:0; width:203px; height: 74px;"/></textarea></div>
    </body>
    </html>
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    You must ALWAYS put a Doc type in there. Never ever make a page without one. Try to work a solution WITH it in there. Without a DOC type your page goes into quirks mode.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2005
    Posts
    10
    Rep Power
    0
    I have to laugh sometimes, regardless of what group I am in there are these posts that just leave you hanging.

    Was this resolved, did the poster die or maybe got arrested for stealing cornflakes from a supermarket?

    I need closure, not to mention I am having the same exact problem.

    Again I find myself wasting valuable time because of these idotic inconsistencies between browsers.

    My code is so simple, a monkey could do it. The problem is that Firefox makes the textarea bigger and has no scroll bars - thus scewing up the layout.

    I mean seriously, is there a way to get these two browsers to work right consistently - I don't have time for this all the time.

    Thanks
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133

    400px wide and 200px high textarea.


    Hi there Beauford,

    this code should provide identical textarea elements cross-browser wise...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    textarea {
        display:block;     
        width:398px;
        height:198px;
        padding:0;
        border:1px solid #000;
        margin:0 auto;
        overflow:auto;
     }
    </style>
    
    </head>
    <body>
    
    <div>
    <textarea cols="1" rows="1"></textarea>
    </div>
    
    </body>
    </html>
    
    coothead
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo