contact form buttons not right on iPhone 4 HTML/CSS 2

[pendle666]

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:

[pre]
<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>
[/pre]

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:

[pre]
#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;
cursorointer;
}

/* 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;
cursorointer;
}

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


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

 

[Borvik]

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.

 

[pendle666]

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

 

[Borvik]

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.

 

[pendle666]

Hello

I've uploaded the file here:

http://www.manxbmd.com/felis/contact.html

I've also copied the CSS to a HTML page so you can see it properly:

http://www.manxbmd.com/felis/p7spepper03.html

The cancel/reset button is basically to set all the fields back to blank. In fact, I'm beginning to wonder if one is really necessary?





thank you for helping

____________
Pendle

 

[Borvik]

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.

 

[vacunita]

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.

#submit {
	/* background:url(images/submit.png); */
	font-family: "Lato", Helvetica, sans-serif;
	width:127px;
	height:48px;
	text-align: center;
	/* text-indent:-9999px; */
        [COLOR=#A40000][b]-webkit-appearance:none;
	-webkit-border-radius:none;[/b][/color]
	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

 

[Borvik]

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>

 

[pendle666]

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

 

[pendle666]

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

thank you for helping

____________
Pendle