CODEWITHSUNDEEP
cssimagebuttoninputborder
Juri
Juri

Reputation: 13

Input CSS showing border in Chrome, Safari and Internet Explorer and no text

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

Upvotes: 1

Views: 7436

Answers (6)

Nick
Nick

Reputation: 11

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.

Upvotes: 1

Esger
Esger

Reputation: 1417

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.

Upvotes: 0

andyb
andyb

Reputation: 43823

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

Upvotes: 2

Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39027

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

Upvotes: -1

Mr. Smee
Mr. Smee

Reputation: 960

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.

Upvotes: 1

zebasz
zebasz

Reputation: 788

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.

Upvotes: 0

Related Questions