Simply set the size of a submit button

ScottInTexas · 09-12-2007, 12:39 PM

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

VIPStephan · 09-12-2007, 12:55 PM

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.

Fang · 09-12-2007, 01:05 PM

Make it even smaller by removing the padding:

Code:

input[type=submit] {width: auto; padding:0; overflow:visible;}

ScottInTexas · 09-12-2007, 01:45 PM

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.

CFMaBiSmAd · 09-12-2007, 02:46 PM

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.

VIPStephan · 09-12-2007, 03:04 PM

Quote:

Originally Posted by ScottInTexas

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.

ScottInTexas · 09-12-2007, 04:48 PM

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;
}

VIPStephan · 09-12-2007, 08:06 PM

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).

ScottInTexas · 09-12-2007, 10:39 PM

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.