SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot thespian's Avatar
    Join Date
    Sep 2000
    Location
    South Africa
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for FORM element widths?



    I am busy designing a new web site and have come across a strange situation. On one page there is a form for "Feedback". This form is pretty basic and only uses <INPUT TYPE="TEXT">, <SELECT> and <TEXTAREA> tags.

    I spent a lot of time setting up the width of each of the elements (I have different pages set up for IE and for NETSCAPE) so that they all allign properly. I did this at home using Windows 2000, an 800 x 600 screen resolution and an IE 5.5 browser where it all worked perfectly. However, it is a different story at the office where I am using NT 4.0, an 800 x 600 screen resolution and an IE 5.5 browser - in other words, only the Operating System is different (and of course the view out the window ).

    At the office, the widths of the various "boxes" in the form are no longer the same. I can only assume that this has something to do with the default settings of the computer itself?

    What I would like to know is this - can I control the width of these FORM elements by using CSS? I am using a stylesheet with a font and font-size selected for the <BODY> and I would have thought that since I give no further STYLE instructions when dealing with these elements, that they would have been the same.

    In case you haven't guessed it - I am seriously confused! Any help? All responses are greatly appreciated. If you're interested, the page I am referring to is currently at http://bconte.taly.co.za/cont.asp
    Last edited by thespian; Aug 27, 2001 at 23:34.
    Bill Conté [Protected by Psalm 91]
    Web Mechanix
    Growing OLD is Mandatory - Growing UP is Optional!

  2. #2
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually use this JS script when I want different browsers to display my forms in different ways:
    Code:
       
    <FORM>    
        <SCRIPT>
          if (navigator.appName == 'Netscape') {
            document.write('<INPUT type="text" name="somename" maxlenght="30" size=20>\n');
          } else {
            document.write('<INPUT type="text" name="somename" maxlenght="30" class="myformclass" size=30>\n');
          }
        </SCRIPT>
        <NOSCRIPT>
          <INPUT type="text" size=20>
        </NOSCRIPT>
    </FORM>
    I don't know if this will help in your case, but I don't have any other solution at the moment.

  3. #3
    SitePoint Zealot thespian's Avatar
    Join Date
    Sep 2000
    Location
    South Africa
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Marina,

    Thanx for that. Actually, I already use it (in principle). I just opted to use two seperate pages, but I control the redirection through a similar script.

    My problem is however that I am getting different results using the SAME browser (IE 5.5) and the SAME resolution (800 x 600) but on different Operating Systems (Win2K & NT 4.0). I need to know how to overcome this problem.
    Bill Conté [Protected by Psalm 91]
    Web Mechanix
    Growing OLD is Mandatory - Growing UP is Optional!

  4. #4
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you could control form element widths with CSS. Don't just set the font size, set an absolute width, as in "width : 150px;" or something. Works well in IE5.x and Mozilla.

  5. #5
    SitePoint Zealot thespian's Avatar
    Join Date
    Sep 2000
    Location
    South Africa
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Duckie,

    Give yourself a well-deserved pat on the back.

    I have tried it and IT WORKS like a dream!

    Many thanx for that info.

    I am smiling again.
    Bill Conté [Protected by Psalm 91]
    Web Mechanix
    Growing OLD is Mandatory - Growing UP is Optional!


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
  •