Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7

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

You are using the image as a background. Why not set it as the src property of the button ?

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

When you set the type as image the input expects an src attribute as well..

Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

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

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

chrome border issue

You're using <input type="image" />, so a src attribute is expected. You haven't specified one, so Chrome shows a grey border, in the same way it does for an img with no src attribute.

If you want to stick to using <input type="image" /> and using a CSS sprite, you're going to have to specify something as the src, such as a 1x1 transparent "blank.gif".

http://jsfiddle.net/thirtydot/TXYg6/14/

However, that just seems horrible. Instead, I recommend switching to <input type="submit" />, which solves the problem.

How do i remove broken image box?

use alt here for fallback

demo

html

<img src="abc" alt="image" />

css

img {
    width:200px;
    height:200px;
}

Alternatively, if you dont want to show any alt text, just give a blank space.

demo here

HTML

<img src="abc" alt=" " />

How remove border around image in css?

Try this:

img{border:0;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0;}

More information about the border css property can by found here.

Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.

What's the valid way to include an image with no src?

While there is no valid way to omit an image's source, there are sources which won't cause server hits. I recently had a similar issue with iframes and determined //:0 to be the best option. No, really!

Starting with // (omitting the protocol) causes the protocol of the current page to be used, preventing "insecure content" warnings in HTTPS pages. Skipping the host name isn't necessary, but makes it shorter. Finally, a port of :0 ensures that a server request can't be made (it isn't a valid port, according to the spec).

This is the only URL which I found caused no server hits or error messages in any browser. The usual choice — javascript:void(0) — will cause an "insecure content" warning in IE7 if used on a page served via HTTPS. Any other port caused an attempted server connection, even for invalid addresses. (Some browsers would simply make the invalid request and wait for them to time out.)

This was tested in Chrome, Safari 5, FF 3.6, and IE 6/7/8, but I would expect it to work in any browser, as it should be the network layer which kills any attempted request.

Remove border from IFrame

Add the frameBorder attribute (note the capital ‘B’).

So it would look like:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>

---

Related Topics