Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    78
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Rollover submit buttons (IE Vs FF)

    I have created a submit button.want to chage the image on rollover.

    My code is :

    IN HTML :-
    <input type="submit"/>


    IN CSS :-
    input[type=submit]{
    background-image:url(images/blue_btn.gif);
    background-repeat:no-repeat;
    width:99px;
    height:37px;

    }

    input[type=submit]:hover{
    background-image:url(images/yellow_btn.gif);
    background-repeat:no-repeat;
    width:99px;
    height:37px;

    }



    Its working fine in FF but its not working in IE



    Thanks in advance
    Last edited by prajwala; 12-19-2007 at 12:10 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Which version of IE? In IE6 it’s not working because it doesn’t support the CSS attribute selector. You need to asign an ID to the input and apply the styles accordingly. I don’t know about IE 7, though, as I haven’t done that yet.

    Also this <![endif]-->. Is this in your CSS file or where?

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    78
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Which version of IE? In IE6 it’s not working because it doesn’t support the CSS attribute selector. You need to asign an ID to the input and apply the styles accordingly. I don’t know about IE 7, though, as I haven’t done that yet.

    Also this <![endif]-->. Is this in your CSS file or where?
    i tried the code using id but its not working


    IN HTML :-
    <input type="submit" id="test"/>

    IN CSS :-
    #test{
    background-image:url(images/blue_btn.gif);
    background-repeat:no-repeat;
    width:99px;
    height:37px;

    }

    #test:hover{
    background-image:url(images/yellow_btn.gif);
    background-repeat:no-repeat;
    width:99px;
    height:37px;

    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •