No replies
grimaldi
Offline
Enthusiast
Last seen: 7 years 48 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Howdy peeps,

This ones got me a bit stuck and I'm not sure if I can do anything about it without making the button have a fixed width (which I don't really want to do as its used in a fair few places). First up, this appears fine on a Mac in Firefox, Safari, Chrome & Opera. And fine on Windows in IE8/7/6, Firefox, Chrome, Opera ...everything but Safari (Windows 7)!

I've having an issue where I have a button which has a span inside it Safari on Windows seems to display some mystery padding on it, so the span doesn't sit flush with the edges of the button. The span has an arrow on the end of it (to the right) and another graphic to the left. The reason it uses a span inside the button is to make it flexible and scale to whatever width. You can see this in the screenshot above the code I've added to this post. It uses a sprite but for ease, if anyone wants to take a look at it I've just made each element have solid background colours - you still get the same result! This button is in a form/fieldset but again I've striped it out for this example, again even without all this you get the same look.

Heres a screen of whats happening (Windows Safari):

screen.jpg

Here is the HTML for the button:

<footer class="foot-link">
	<button type="submit" value="Sign Up"><span>Submit Form</span></button>
</footer>

Here is the CSS:

aside {
	margin: 30px;
	width: 250px;
}
 
.foot-link a,
.foot-link button  {
	background: #f00;
	border: none;
	clear: both;
	display: block;
	height: 18px;
	margin: 0 0 24px;
	outline:none; 
	padding: 0;
	position: relative;
	width: 100%;
	}
.foot-link a:hover,
.foot-link button:hover  {
	background-position: left -234px;
	color: #fff;
	cursor: pointer;
	}
.foot-link span {
	background: #00f;
	border: none;
	color: #62929c;
	display: block;
	font: 11px "Helvetica";
	height: 17px;
	line-height: 18px;
	margin: 0;
	padding: 1px 24px 0 0;
	text-align: right;
	top: 0;
	width: auto;
	}

It would be great is someone could help me on this or just let me know its one of those things the browser doesn't support. Its hard to fix/target when it just happens on one platform and not another!

Thanks in advance,
Ste