Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Simply set the size of a submit button

    I have two forms and on each the submit button is very wide. I would like it to look like a regular button rather than a bar across the page. I have looked for the correct attribute but can't find any documentation on it. I have tried size=10, size=10px, size=10em and nothing changes the size. Look at the submit new thread and preview post buttons below, how come they are only as wide as they need to be?

    I have displayed the page in both Mozilla Firefox and IE 7
    Scott Stewart
    Always happy to learn from pros.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Usually a submit button in a form is an input element of type “submit” so probably you have set the width of all input fields in general in the CSS somewhere which, of course, will also set the width of the submit button (and the CSS is overriding HTML attributes like size etc.).

    You can reset that width by setting it specifically for that button with a CSS 2.1 selector (which won’t work in IE 6, though):

    Code:
    input[type=submit] {width: auto;}
    Or, to get a cross-browser compatible solution give your sumit input (or a parent) an ID and address it with the ID selector in the CSS.

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Make it even smaller by removing the padding:
    Code:
    input[type=submit] {width: auto; padding:0; overflow:visible;}

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Yes the submit button is an input type=button. I added this to my CSS
    Code:
    input[type=submit]{
       width:auto;
       padding:0;
    }
    I haven't seen a format like that. I test my page with mozilla and when everything appears to be working I check it with IE7.

    This change made 0 difference. It was as if the change wasn't added.
    Scott Stewart
    Always happy to learn from pros.

  • #5
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    3,092
    Thanks
    2
    Thanked 322 Times in 314 Posts
    Did you intend to post a link? I don't see one above.

    Seeing the actual code is really the only way to avoid guessing about what is causing this and what would fix it.
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Quote Originally Posted by ScottInTexas View Post
    Yes the submit button is an input type=button.
    If it’s an input of type button then of course the selctor must state so:

    Code:
    input[type=button] {…}
    But really, I second CFM$%§… (whatever that name was)’s statement about the code. After all, we’re in a coding forum and if you don’t help us to help you we… well, we can’t help you.

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    This error message appears in the main content portion of my web page when mail() fails. It is called with an include in the index.php.
    Code:
    <div id="mailerror">
    	<p class="errormsg">I'm sorry.  There was an error sending your email.  Please call us by phone and we will be glad to help you.<br />
    	Click on the Continue button below to return to the home page.</P>
    	<span class="formfield"> <form id="returnform" name="mailform" action="" method="post" ></span>
    	<input type="hidden" name="whocares" value="home" size="2" >
    	<input type="submit" value="Continue">
    	</form>
    	
    </div>
    The switch statement in Index.php
    PHP Code:

    <div id="maincontent">
     <?php
       
    switch ($thispage){
            case 
    "services":
                include(
    "services.php");
                break;
            case 
    'register':
                include(
    'regform.php');
                break;
            case 
    'contact':
                
    //echo 'In contact including mailme.php';
                
    include('mailme.php');
                break;
            case 
    'mailit':
                
    //echo "In mailit.<br />";
                
    if (isset($_POST['email']))
                {
                    
    //echo "sending mail <br />";
                    
    $subject $_POST['subject'];
                    
    $headers='From:'.$_POST['fromadd'];
                    
    $message=wordwrap($_POST['mailmsg'], 70);
                    
    $message=str_replace('\n.''\n..'$message);
                    if (
    mail('information@alaskaerrands.com''Subject:'.$subject$message$headers ))
                    {
                        
    //echo "Mail was sent.<br />";
                        
    include('home.php');
                    }else{
                        
    //echo "Mail Failed.<br />";
                        
    $thispage="home";
                        include(
    'mailerror.php');
                    }
                }
                break;
           default:
               
    $thispage="home";
                     include(
    'home.php');
        }
    ?>
    And finally a portion of the style sheet.
    Code:
    input[type=submit]{
    	width:auto;
    	padding:0;
    	margin:10px;
    }
    Scott Stewart
    Always happy to learn from pros.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    This, however, still doesn’t tell us anything about what is causing the button to be so wide in the first place. Please show us either a live page (link) or at least the entire CSS you have and the HTML output (PHP is irrelevant).

  • #9
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Nothing has changed since this morning's post. The button to which I referred is now the size I wanted it in the first place. Go figure.
    Scott Stewart
    Always happy to learn from pros.


  •  

    Posting Permissions

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