1

I have a submit image button:

 <input id="sbutton" type="image" value="&nbsp;" />

Styled like that:

#sbutton {
    text-indent: -99999px;
    border: 0;
    background-image: url('submit.png'); 
    width: 201px;
    height: 37px;
}

It works perfect in Opera in Firefox the button size is about 10x10px and in Safari and Chrome it has some kind of strange border (like iframes have), and I have no idea how to get rid of that?

Thanks :)

Barnee
  • 3,212
  • 8
  • 41
  • 53
fomicz
  • 1,752
  • 7
  • 25
  • 33
  • 1
    for the size problem, try adding `display: block`. I'm pretty sure a button is an inline element. – Stephan Muller Sep 14 '10 at 12:46
  • Here you go: tinyurl.com/2ugzj6j It works ok in Opera, has border in Safari/Chrome O.o Firefox selects it when clicked. I guess input image isn't too well supported (?). – fomicz Sep 14 '10 at 13:27

5 Answers5

1

Could it be an outline? Set: 

 #sbutton:active,
 #sbutton:focus
 {
  outline: none;
 }

Try that out.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • It's not a outline, I guess it's the default border for all inputs, border: none and outline: none doesn't change a thing O.o – fomicz Sep 14 '10 at 12:55
  • Do you have a live example? It might be inheriting some values from higher up the cascade. A screenshot would help too. – Kyle Sep 14 '10 at 13:00
  • I'll upload it in a few minutes. – fomicz Sep 14 '10 at 13:11
  • Here you go: http://tinyurl.com/2ugzj6j It works ok in Opera, has border in Safari/Chrome O.o Firefox selects it when clicked. I guess input image isn't too well supported (?). – fomicz Sep 14 '10 at 13:25
  • Got a Polish 404: 404] File Not Found : Plik nie istnieje. – Kyle Sep 15 '10 at 07:06
  • rofl, you have edited your solution after my answer and just copied it. – James Sep 15 '10 at 10:58
1

Changed type from image to submit as I was using a background image in CSS and this fixed my issue.

Kaysten
  • 11
  • 1
0

Try:

border:none;

rather than:

border:0;
Rostyslav Dzinko
  • 39,424
  • 5
  • 49
  • 62
Spudley
  • 166,037
  • 39
  • 233
  • 307
0

This is a right solution for this question:

:active, :focus { outline: none; }
James
  • 42,081
  • 53
  • 136
  • 161
0

Apparently this happens for image inputs with no src attribute. You can give it an src, as in this post:

input type="image" shows unwanted border in Chrome and broken link in IE7

OR, you could just use a type="submit" input instead of type="image", if you're setting the background image anyway.

Community
  • 1
  • 1
mltsy
  • 6,598
  • 3
  • 38
  • 51