Home/ Questions/Q 6197947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T03:54:41+00:00

I have a login page that has 2 tags that have a background image

  • 0

I have a login page that has 2 tags that have a background image defined in HTML as:

<div>
    <button type="submit" name="loginButton" value="App1" class="login-button app1-logo-bkgrd align-left" />
    <button type="submit" name="loginButton" value="App2" class="login-button app2-logo-bkgrd align-right" />
</div>

I have the CSS classes defined as:

.align-left {
    float: left;
}

.align-right {
    float: right;
}

.app1-logo-bkgrd {
    background: transparent url('images/app1logo.png') top left no-repeat;
    width:220px;
    height:180px;
}

.app2-logo-bkgrd {
    background: transparent url('images/app2logo.png') top left no-repeat;
    width:220px;
    height:180px;
}

.login-button 
{
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

I am using <!DOCTYPE html>

For some reason the second button (with value=”App2″) gets magically repeated in IE9 standards mode whereas the same HTML/CSS works fine in FF5.

If I hit the compatibility mode button it then displays correctly (IE has switched to IE7 document type – so says the dev tools).

If view source on IE 9 when the problem occurs then it shows be only one instance of the 2nd button; however using dev tools and using the selector feature it reckons there is another App2 button just after the form.

I tried removing the 1st (value=”App1″) button and changing the remaining button to use the same align-left class but it still gets repeated for now reason.

Anybody have any suggestions as to what might be causing the problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is actually caused by a bug in IE9.

    If you use a self-closing button tag which is styled with a background image then it will appear repeated in the page but only 1 of the images will be clickable. Not sure if the containing <div> is relevant I haven’t tried without.

    In my case where I had 2 buttons the 2nd button effectively fixed the bug for the 1st one which is why it was so confusing, i.e. if I swapped the order of the buttons then one that previously broken one worked.

    The workaround is to use <button></button> syntax even though there is nothing between the open and close tag when using a background image in this way.

    • 0