• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 568
  • Last Modified:

Safari rendering submit button as image incorrectly

I have used a image as a submit button and used CSS to style it, and everything looks OK in Firefox. However in Safari there is a box showing around the text and it will not center the text.

The attached image will show the "Update" button at the top in Firefox, and then lower it is in Safari, any ideas?
CSS:
 
.MenuButton2 {
	float:left;
	background-image: url("/icns/span.png");
	height: 18px;
	width: 100px;
	text-align:center;
	font-size: 11px; 
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	text-decoration: none; 
	border-right: .1em solid #999;
	overflow: hidden; }
 
 
HTML:
 
<input id="UpdateButton" name="MenuAction" type="image" value="Update" align="center" class="MenuButton2">

Open in new window

button.jpg
0
aeg1s
Asked:
aeg1s
1 Solution
 
LZ1Commented:
Try removing the quotes from the image source.  
Let me know
0
 
level9wizardCommented:
The quotes in the image source should stay - don't remove them.

Try changing:
<input id="UpdateButton" name="MenuAction" type="image" value="Update" align="center" class="MenuButton2">

To:
<input id="UpdateButton" name="MenuAction" type="submit" value="Update" class="MenuButton2">

and control margin, padding, text alignment, and borders in your css:
borders: none;
margin: 0 auto;
padding: 2 px;
text-align: center;
0
 
aeg1sAuthor Commented:
Nope still has the image around it. The border looks like it is a missing image box.
0
 
aeg1sAuthor Commented:
I have found the issue, please close the request
0
 
HATCHETCommented:
Mind telling us how you fixed it so everyone else having this issue can benefit from what you learned?

Thanks!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now