ansaurus

Question

css submit button / a href cross-browser

Answer 1

A:

If you want a uniform appearance, you'll need to use an image submit button.

chaos 2009-07-18 18:34:01

I sort of hoping to use css for that. You know, lighter website, easier to change, better support for changing text inside the button.

Cudos 2009-07-18 18:40:05

Answer 2

+1 A:

For the button instead of type="submit" use type="image".

For instance:

<button type="image" src="path_to_your_image.png">Buy now</button>

For link you can use css to set the background of your link:

background-image: url('path_to_your_image.png');

czuk 2009-07-18 18:40:35

Answer 3

+2 A:

You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}

Chacha102 2009-07-18 18:43:33

Cudos 2009-07-18 19:00:20

Chacha102 2009-07-18 19:19:22

One useful way to get rid of the text is (in a conditional IE comment) apply the style line-height: 0; as long as your input button has a width and a height you'll be golden.

andykram 2010-01-03 22:57:45

Answer 4

A:

You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.

Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.

Alan 2009-07-18 18:51:38

Answer 5

A:

I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.

And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.

You can fix the most glaring differences on IE6 and 7 quite easily, though.

Add this to the CSS for your buttons (<button> and <input>):

overflow: visible;

You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.

And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:

display: inline-block;

mercator 2009-07-18 20:23:59

ansaurus

tags:

views:

answers:

css submit button / a href cross-browser

related questions