CODEWITHSUNDEEP
csscross-browserbackground-image
mparryy
mparryy

Reputation: 384

CSS background image only working in firefox

On a search button I created a background image which shows only in firefox and not in other browsers (checked Chrome, IE and Opera).

This is my HTML (generated by Joomla):

<input class="button" type="image" onclick="this.form.searchword.focus();" src="/dev/" value="Search">

And here is my CSS:

#search .search .button{
    background: #1B3F8B url('../images/search_btn.png') no-repeat center center;
    border:1px solid #1B3F8B;
    width:22px;
    height:32px;
    float:right;
}

My image is a RGB .png

The weird thing is that I see it loaded in Google Chrome but after half a second it disappears and it shows the regular 'image not loaded' image.

I can't seem to find any answers to this problem, anybody have any experience with this problem or knows what I am doing wrong?

Upvotes: 0

Views: 264

Answers (2)

Andrew
Andrew

Reputation: 2011

You need to change type="image" to type="button". Since the background image is in the css class you can remove the src from the HTML markup also.

The markup would look like:

<input class="button" type="button" onclick="this.form.searchword.focus();" value="Search">

You also need to update your CSS to add commas:

#search, .search, .button{

Upvotes: 2

John Lieb-Bauman
John Lieb-Bauman

Reputation: 1436

You need commas delimiting the selectors in your CSS. You still need to remove the src="/dev/", I think.

#search, .search, .button {
    background : url('../images/search_btn.png') center center no-repeat #1B3F8B;
    border : #1B3F8B solid 1px;
    width : 22px;
    height : 32px;
    float : right;
}

http://jsfiddle.net/M5BaR/1/

Upvotes: 1

Related Questions