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
  • 396 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Texx

Dani AI

Generated

Short answer for : IE8's hover look came from the browser/OS UA styling, so to get the same inner orange border in IE11 you must override the UA rules rather than rely on defaults. The common causes of your three problems are (1) mixing element types (<input> vs <button>), (2) changing border width on :hover (which alters layout), and (3) using a hover rule that matches disabled controls. was right to call out the mixed selectors; make your CSS target the exact elements you use (or both) and explicitly exclude disabled controls.

Practical, low-risk approach (keeps size stable and prevents disabled hover):

  • Reserve border space up front (do not add/remove border width on :hover).
  • Draw an inner border using an inset box-shadow (this does not affect layout).
  • Use :not(:disabled) or :enabled for hover selectors so disabled buttons stay unchanged.
  • Normalize UA appearance (appearance: none / font: inherit) so IE11 won’t swap in system blue.

Example CSS (apply to your buttons; this is different from the CSS you posted):

button, input[type="button"], input[type="submit"] {
  appearance: none;
  box-sizing: border-box;
  font: inherit;
  padding: 0.4em 0.8em;
  border: 2px solid transparent;   /* reserve space so hover doesn't resize */
  background: #f3f3f3;
}

button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover {
  box-shadow: inset 0 0 0 2px orange;  /* inner orange ring, no layout shift */
  background: #f3f3f3;                  /* keep fill stable (prevents blue fill) */
}

:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

Extra tips: avoid setting width/height only on :hover; set them on the base rule if you must have fixed size. If hover still shows a “system” blue, explicitly set background-image: none / background-color and check for OS/High-Contrast themes. Do not remove focus outlines without replacing them (accessibility). Finally, as warned, test widely—if the app relied on IE8-only behavior you may need broader compatibility planning rather than per-control fixes.

Recommended Answers

All 3 Replies

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.