SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with resizing fields/buttons...

    I want the following field and button to be the same size to look uniform and straight across...not sure how I would do this...please help!




    Thanks, any help would be greatly appreciated!

  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Possibly change the font-size of the input button?

    Where your input button has a class of submit:

    Code:
    input.submit {
    font-size:10px
    }
    10px may be too small, but try playing with the number. Just a suggestion, may not work, and I haven't tried it. Usual disclaimers etc...
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    There are various ways however using the CSS height and width properties should be a fairly safe solution if you what those two controls to be the same height and width.

    <style type="text/css">
    <!--
    input {width: 100px; height: 200px;}
    -->
    </style>
    Last edited by xhtmlcoder; Mar 26, 2003 at 05:01.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xhtmlcoder
    There are various ways however using the CSS height and width properties should be a fairly safe solution if you what those two controls to be the same height and width.

    <style type="text/css">
    <!--
    input {width: 100px; height: 200px;}
    -->
    </style>
    What if your input is a checkbox or radio button?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    checkboxes and radio buttons are the most difficult ones to style...in most cases, it's not even worth trying, as most attributes are not supported or don't affect them in the way you would think they do...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Observably I were referring to the image in question and you'd use the 'class', or 'id' if there was the necessity, or apply the CSS "Attribute Selectors" which as far as I can recall fail in Micro$oft IE.

    Actually you'd get some quite interesting results if you added width and height dimensions to a checkbox, well you certainly do in the early Mozilla since the checkbox and radio button would grow to those dimensions, thus in practice you can end-up with giant checkboxes, have fun:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Hmmm Big</title>
    <style type="text/css">
    <!-- 
    input {
     color: white;
     background-color : gray; 
     width : 100px; 
     height : 100px;     
    -->  
    </style>
    </head>
    <body>
    <form action="#" method="post" id="myForm">
    <input type="radio" name="choice" />
    <input type="checkbox" value="submit" />
    <input type="submit" value="submit" />
    <input type="reset" value="reset" />
    </form>
    </body>
    </html>
    As Redux implied radio buttons can be finicky beasts to style, the last time I began messing with radio buttons and colour states via CSS was a couple of years back, and I totally agree the results are not always what you expect ...
    Last edited by xhtmlcoder; Mar 26, 2003 at 12:40.


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
  •