Question

I’m styling a form, using an input where type=image. It renders fine in FF, but not in IE (pic below), where it adds a bevelled border. It’s also showing the little icon thing over my image, although I’m guessing that’s because it’s a form element with no action associated, perhaps? –

styling for the input is as follows, all pretty simple:

    input.search-button {
        display:block;    
        float:left;
        width:25px;
        height:25px;
        background:url(images/search.png) no-repeat;
}

I’ve tried adding border:0, no joy. Any ideas as to how to best tidy up the presentation?

Answer 1

For the border, try setting border:none;. For the input, I would double-check your path. It looks like you are trying to use a background image INSTEAD of an actual image in the src attribute.

Also, try leading your image paths with a forward slash (/) which will take you all of the way to the root, and then drill down from there.

Hope this helps!

Matt