Member Avatar for murali2489

Dear All,

I am working in Windows 7 Application Migration team. I need to migrate apps from IE 8 to IE 11.

Requirement is

  1. During Mouse Hover IE 11 buttons should look like IE 8 buttons.

In IE 8 during mouse hover there was an orange border inside the buttons but in IE 11 the whole buttons changes to blue color . I need to make it exactly like IE 8 during mouse hovering.

Below is the code i put in CSS.

input[type="button"]:hover:enabled{

    border-style:solid;
    border-color: Orange;

}



button:hover{
width: 5.7em;  height: 1.75em;
     border-color:orange;

}

This code changes the color to Orange during hovering but it looks different than in IE 8 .

**Diffculties facing after using this code

  1. This code does not make buttons similar to IE8. It still differs a lot.

  2. button Size changes during hovering. How to prevent button size from changing when hovering.

  3. Disabled button also changes color on hovering even after putting enabled pseudoclass in code.

Please advise a way to make the buttons look like in IE8 during mouse hover.

  • 4 Contributors
  • 3 Replies
  • 371 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Texx
Member Avatar for rtrethewey

The code you posted really doesn't show enough to locate the problems you're having.

One thing I'd suggest is to make sure that you aren't mixing instances of <input type="button"> and <button>, as your CSS suggests exists in your HTML. You should either include both as selectors in your CSS or homogenize your HTML to use one or the other.

From there, I'd suggest that you examine any conditionals in your HTML (ie. "<!-[if IE] ->") since IE11 doesn't support them. My advice would be to remove them and simply rely on the primary CSS to give all users the best experience you practically can.

Member Avatar for sathish_4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <link href="../CSS/Common.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="gridTableDocProp Grid" id="gviewFiles" style="width: 100%" border:1px solid #c00; padding:1px rules="all" frame="box" cellspacing="1" cellpadding="3"> <body><tr class="GridHeaderCSS"> <td style="width: 5px;">No</td> <td style="width: 100px;">Uploaded files</td> <td style="width: 30px;">File Size</td> <td style="width: 30px;">Action</td> </tr><tr style="vertical-align: top;"><td>1</td><td fnGuID="NewAttach1!!a8a5f1c9-e372-4e23-9bac-f0881decd5d2.txt">NewAttach1.txt</td><td>79 B</td><td><input title="Click to remove" class="SearchCSS" id="btn[object Object]1" type="button" value="Remove"></td></tr><tr style="vertical-align: top;"><td>2</td><td fnGuID="NewAttach2!!453a6b9a-5534-43e3-b5b0-37addd244a4f.txt">NewAttach2.txt</td><td>79 B</td><td><input title="Click to remove" class="SearchCSS" id="btn[object Object]1" type="button" value="Remove"></td></tr><tr style="vertical-align: top;"><td>3</td><td fnGuID="NewAttach3!!30c05b80-8cd9-4860-a20c-3082a3bb7a1e.txt">NewAttach3.txt</td><td>79 B</td><td><input title="Click to remove" class="SearchCSS" id="btn[object Object]1" type="button" value="Remove"></td></tr> </tbody></table> </body> </html>

Member Avatar for Texx

try using something like codepen to post your code so we can all see it. However I think a more general answer to your issue would be more helpful to you as it surely will not be the only time this same issue comes in up in your project.

First the issue is called "Cross Browser Compibility" 2nd if you don't know this and you are trying to migrate an app and not just a plain website, I think it may be time for you to admit you are in far over your head. Only programmers should edit apps. And if you don't know how to fix this you are almost certianly not a programmer. (Pleaseforgive me if I'm wrong). This is an excellent way to totrally break an app so that it no longer functions and worse, possibly destroy all the data it's ever saved/created/makes in the future etc etc.

If this app was made for IE8, it was made by an inept progreammer, it should have been made to work in a "web browser" as in any web browser, not on specific one. Choosing to make the new version of this app for IE10 would also be foolish as it's already obsolete. Microsoft not has the "Edge" browser.
Further, if it only works on one browser, I can only image that it doesn't wok on smaller or larger devices like tablets, phones, retina screens or 4k screens. That's just whats out there now. In the very near future, far more screen sizes are coming.

The web eniovronment has changed a very great deal since IE8 was introduced. Often the very framework of the design has to be rebuild to make older apps compatible with modern devices. Which actually isn't that big of a deal for a pro but something an amatuer shouldn't attempt, especially with an app.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.