INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

contact form buttons not right on iPhone 4 HTML/CSS

contact form buttons not right on iPhone 4 HTML/CSS

(OP)
Hello

I've been working on a small website for a friend's business. The pages look and work as I intended on all platforms with the exception of the iPhone 4 - the work phone my friend has. I've attached a picture of the Submit/Cancel buttons on the contact form. The Submit button is far too rounded - it should be as the Cancel one is.

Here is the HTML for that particular piece:

<form action="scripts/contact.php" method="post" enctype="multipart/form-data">
 <label></label>
    <input name="first_name" type="text" required="required" placeholder="Name" />

 <label></label>
    <input name="email" type="email" required="required" placeholder="Email Address" />

 <label></label>
    <input name="telephone" type="text" required="required" placeholder="Telephone Number" />		            
		    
 <label></label>
    <textarea name="comments" cols="20" rows="5" required="required" placeholder="Message"></textarea>
		    
   <input id="submit" name="submit" type="submit" value="Submit"/>
   <input id="cancel" name="cancel" value="Cancel"/>
</form>
 

I can see straight away that there is no "type" attribute for the Cancel button, however if I try using a "reset" type then it actually cuts off the button so it's only half displayed (all platforms).

The CSS for the buttons are as follows:

#submit {
	/* background:url(images/submit.png); */
	font-family: "Lato", Helvetica, sans-serif;
	width:127px;
	height:48px;
	text-align: center;
	/* text-indent:-9999px; */
	border-radius:0.25em;
	border:none;
	margin-top:20px;
	cursor:pointer;
}

/* Styles the submit hover */	
#submit:hover {
	color:#ffffff;
	background-color: #ff0000;
	opacity:0.9;
}

/* Styles the cancel button*/	
#cancel {
	/* background:url(images/cancel.png); */
	font-family: "Lato", Helvetica, sans-serif;
	width:107px;
	height:28px;
	text-align: center;
	/* text-indent:-9999px; */
	border-radius:0.25em;
	border:none;
	margin-top:20px;
	cursor:pointer;
}

/* Styles the cancel hover */
#cancel:hover {
	color:#ffffff;
	background-color: #ff0000;
	opacity:0.9;
}
 


Again the button sizes are different in the CSS because if I make them the same in the CSS, then one is bigger than the other in the actual page.

If anyone can shed some light on this, I'd be very grateful.

thank you for helping

____________
Pendle

RE: contact form buttons not right on iPhone 4 HTML/CSS

First, by omitting the type on the cancel and leaving it an input tag you are essentially turning it into a textbox and styling it to look like a button.

Second, your border-radius is defined in terms of "em" - which is based on the font-size. In none of those styles do I see the font-size defined.

There might be more - but let's start with that.

RE: contact form buttons not right on iPhone 4 HTML/CSS

(OP)

I've changed the cancel to:

<button id="cancel" name="cancel" type="reset" value="Cancel"/>

but on viewing in chrome it's put the buttons out of top alignment and I've lost the text description for the Cancel button. (example attached)

The border-radius I've got to give me a rounded edge, I didn't think that the font size was necessary, but I've add in a line for each button in the CSS (although it's specified for the form anyway) but it didn't make any difference.

I had a look at W3Schools and they have an example of cancel/submit buttons and they're all inputs.

thank you for helping

____________
Pendle

RE: contact form buttons not right on iPhone 4 HTML/CSS

As far as w3schools - yes they may all be inputs, but they would all have a type defined (button, submit, reset). By leaving the type attribute off, it defaults to type="text" - a textbox.

You should also evaluate what exactly you want the Cancel button to do. A <button> (or <input>) with type="reset" will reset all the form elements back to the default values sent by the server.

It is difficult to deal with styling issues without a full example to work with. If you could provide a link to an example showing your problem (where we can see the full code) it would be much easier to diagnose the problem.

For the alignment, I would be looking at the margins of any style that might (styles on *, input, button, .class, #id) as well as the padding for the container element. Floating elements can also do some weird things here.

For the missing text, my first look would be the padding - beyond that I couldn't say. Again an example with full html/css demonstrating the problem would be most helpful.

RE: contact form buttons not right on iPhone 4 HTML/CSS

Most of the time it isn't necessary.

For your button you have a paragraph (<p>) with "* Indicates a required field." as the text of the button.

The way the <button> tag works is this, the value attribute gets submitted with the form (if the button has a name), and the content of what SHOWS on the button is what is between the tags: <buttton>Button Text Here</button>.

Fixing that, fixes your alignment issue.

RE: contact form buttons not right on iPhone 4 HTML/CSS

The issue with the roundness on the iPhone is because of default stylesheet properties being applied by the system. You'll need to override them with the following CSS properties in red, to force iOS default to basic squares so you can then apply the roundness you need.

CODE

#submit {
	/* background:url(images/submit.png); */
	font-family: "Lato", Helvetica, sans-serif;
	width:127px;
	height:48px;
	text-align: center;
	/* text-indent:-9999px; */
        -webkit-appearance:none;
	-webkit-border-radius:none;
	border-radius:0.25em;
	border:none;
	margin-top:20px;
	cursor:pointer;
} 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: contact form buttons not right on iPhone 4 HTML/CSS

Sorry, I should amend what I posted above. You didn't specify that aforementioned paragraph in the button - it just turned out that way due to the button tag being defined incorrectly. The button tag requires content and an end tag.

So <button id="cancel" name="cancel" type="reset" value="Cancel"/> is invalid.
Use: <button id="cancel" name="cancel" type="reset" value="Cancel">Cancel</button>
Or: <button id="cancel" type="reset">Cancel</button>

RE: contact form buttons not right on iPhone 4 HTML/CSS

(OP)
Thank you both for your responses.

I've put them into my pages and I'll ask my pal to take a look on his phone.

thank you for helping

____________
Pendle

RE: contact form buttons not right on iPhone 4 HTML/CSS

(OP)
All checked and looking good - thank you very much for your help

thank you for helping

____________
Pendle

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close