1

I'm using this input

<input src="img/buttons1.png" name="submit" class="submit1" type="image" value="See Today's Date Deal" tabindex="502" />

and here it's the css

.submit1 {
              display: block;
              width: 250px;
              height: 28px;
              background: url(img/buttons1.png) no-repeat 0 0;
              padding-top: 12px;
              text-align: center;
              font-size: 17px !important;
              color:#fff; 
              border:0;
              outline:none;
}

In Firefox looks great but in Chrome, Safari and Internet Explorer it is http://screencast.com/t/PsWmBZA8J
I'd like to remove border and show text.

Any suggestion would be great! Thanks

Sam
  • 1,509
  • 3
  • 19
  • 28
Juri
  • 13
  • 1
  • 3

6 Answers6

2

You have used both a CSS background property and the src attribute on the <input>. The src link is invalid so the browser is displaying the broken image placeholder. This looks different in every browser which is the border and small question mark you are seeing. IE shows a little red cross and a border.

Either make it <input type="submit"/> and use the CSS background property or use <input type="image" src=""/>

See this demo where the first button has a broken src attribute, and is showing the placeholder as well as the CSS background image. Whereas the second button is a submit button without the src and just the correct URL for the background image.

Edit: This has been asked before: How to change an input button image using CSS? and input type="image" shows unwanted border in Chrome and broken link in IE7

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
1

make sure that the path to your images folder is the right one. use ../ to go up one directory, and / to go up to the main directory.

Mr. Smee
  • 968
  • 11
  • 28
1

here's the input on the form:

<input type="submit" id="submit" class="submit-btn" style="margin-top:5px" border="0" value="&nbsp;">

and here is my CSS:

.submit-btn {
    background: url("images/submit.png") no-repeat 0 0 transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}
.submit-btn:hover {
background: url("images/submit.png") no-repeat 0 -35px transparent;
height:35px;
width:142px;
display:block;
border: 0 none;
}

the issue can also be that if you don't tell it to be transparent, the browser will default a white background which looks like a border.

Nick
  • 11
  • 1
0

Maybe you should use type="button". The code would be:

<input name="submit" class="submit1" type="button" value="See Today's Date Deal" tabindex="502" />

And the CSS would remain as-is.

zebasz
  • 788
  • 7
  • 14
0

I was looking for a solution to this problem as well.

One could specifically want an <input type="image"> because one can have two submit buttons in one form that way. The reason to use a background image i.s.o. src attribute is Sprite. (background position shifting on hover).

When you want all this, you still have to use a valid src attribute, since it is expected - by Chrome at least - to get rid of this line around the input, which is not a border, nor an outline. So i use a 1 pixel transparent gif for the src attribute to satisfy Chrome.

Esger
  • 1,310
  • 12
  • 18
-1

Have you tried setting border:0px instead of just 0?

Jeff Meatball Yang
  • 37,839
  • 27
  • 91
  • 125