CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxbrowser
asaf
asaf

Reputation: 331

css button on IE

i wanted to make a log-in button with the type="submit" with an image that has an hover image too and :active image also, well its work fine on firefox and chrome, but on internet explorer its just give the basic image and not giving the hover image and the active image. and beside that, its make a dotted line on the button when you click on it.

how its show on IE:

http://imageshack.us/photo/my-images/72/ieproblem.jpg/

how its show on chrome and firefox:

http://imageshack.us/photo/my-images/685/chromes.jpg/

.button
 {
    border:none;
    background: url(../img/login.jpg);
    width:41px;height:19px;
   }
    .button:hover 
        {
        background: url(../img/loginhover.jpg)  no-repeat top left;
        width: 41px;
        height: 19px;
        }

 .button:active {

 background: url(../img/loginactive.jpg);
   }

the button code on HTML:

<input type="submit" class="button" value=""/>

Upvotes: 0

Views: 115

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57322

If you are using earlier versions of IE, it has issues with :hover.

if you are using the ie7 >

you need to add href to your anchor, :hover is not picked up by IE otherwise:

and to remove the outline you can try

a {
   outline: 0;
}

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

I believe this is caused by the outline property within IE.

Check out http://css-tricks.com/removing-the-dotted-outline/ for some tips on how to remove it.

a {
   outline: 0;
}

Or apply the outline style to other elements.

Upvotes: 0

Related Questions