Changing className does not work as expected in IE8

[LarrySteele]

Corporate intranet site where IE8 is the standard browser.

We had been using gifs for our buttons - site color for active and gray when inactive. Easy day.

I'm in the process of internationalizing the site to translate labels, tool tips, instructions, etc to any one of 15 languages.

Rather than having 30 images for each button, I'm switching them to html inputs and having CSS manage their appearance. The I'll just fill in the text dynamically. Works great, easy day, except... When I change the className of one of these buttons, the color does not change until the mouse hovers over it.

Here's my javascript snippet that should change the button's className from button_dis to button. After this runs, my button's background should change to the site's active color. Since I didn't see the change, I added an alert to confirm the script was running and that the className was button. The alert test passed, yet the button's background color did not change. Also, the var "d" correctly evaluates true.

if(d) {
    document.getElementById("btn_reset").className = "button";
} else {
    document.getElementById("btn_reset").className = "button_dis";
}

alert(document.getElementById("btn_reset").className);

I found that if I mouse over the button, it does change to the active color I set for button:hover pseudo class. That tells me that the correct class was set and attached to the button. When I move my mouse away from the button, then the correct active background color appears.

Of course in FF 14, the color changes right away.

I've seen several posts that mention a bug in IE8's rendering during my search, but the descriptions didn't appear to related to what I'm seeing. Though it does seem to be a rendering issue. I'm sure I'm not the only to experience this, but I wasn't able to figure out the right question for Google to get the answer I need.

Is this a bug in IE8 that needs to be worked around or am I missing something painfully simplistic.

Thanks in advance.

 

[vacunita]

From a code perspective, it should work. So there's not much we can say, without seeing it in context. And since you mention it works when you hover over the button, I'm thinking its the actual running of the code that's the issue, rather than the code itself.

So: When are you running the code? Under what circumstance is it getting executed?






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[LarrySteele]

Phil,

Thanks for responding. This script runs when I make a change to any of the elements - text boxes, selects, etc. I know it's running at the right time because I'm getting my alert at the expected time.

Note that the code does not run when I hover over the button - only that the color finally changes.

Here's the event flow:
[ul]
[li]Change any data element on screen[/li]
[li]Javascript function btn_active() fires (source for snippet above)[/li]
[li]Function calls formIsDirty() to check if user has changed any data - the result is stored in my var d in snippet above[/li]
[li]Back in btn_active, the className value is set based on form dirtiness - in the tests, it is set to button[/li]
[li]>> Now the button's color should reflect the color from CSS, but does not in IE8 (it does in FF 14)[/li]
[li]>>In IE8, when I hover over the button, no javascript is called, however the color changes to the color set for the hover pseudo class.[/li]
[li]>>In IE8, when I leave the button, again, no javascript called, however the color changes to the color set for the button class.[/li]
[/ul]

It looks like IE8 doesn't notify the rendering engine that the className was changed on the given element, so there's no screen refresh - or at least refresh of given element.

You probably already know how I'm doing the button pseudo class, but I'll post here anyway...

a.button {
    position: relative;
    padding-top: 1px;
    padding-right: 12px;
    padding-bottom: 1px;
    padding-left: 12px;
    background: #f60;
    border: 1px solid #f93;
    color: #fff;
    font-size: 10pt;
    margin-right: 25px;
}

a.button:link {
    background: #f60;
    border: 1px solid #f93;
    cursor: pointer;
    }

a.button:hover, a.button:active {
    background: #f93;
    border: 1px solid #fa4;
    cursor: pointer;
    }

a.button_dis {
    position: relative;
    padding-top: 1px;
    padding-right: 12px;
    padding-bottom: 1px;
    padding-left: 12px;
    background: #999;
    border: 1px solid #aaa;
    color: #fff;
    font-size: 10pt;
    margin-right: 25px;
}

a.button_dis:hover {
    cursor: default;
    }

 

[LarrySteele]

Phil,

I may have stumbled upon a post similar to what I'm experiencing: Forcing IE8 to rerender/repaint :before/:after pseudo elements. I still need to do more investigation to figure out if the thread is relevant to my situation.

Larry

 

[vacunita]

Its possible it could be some other CSS affecting this. I don't think its a bug to be worked over, since I can change the class on IE8 myself and see it work instantly.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Class Change</title>
<script type="text/javascript">

function changeClass()
{
	document.getElementById('btn').className = 'button_dis';
	//alert(document.getElementById('mybutton').className);
	return false;
}

</script>

<style type='text/css'>

a.button {
    position: relative;
    padding-top: 1px;
    padding-right: 12px;
    padding-bottom: 1px;
    padding-left: 12px;
    background: #f60;
    border: 1px solid #f93;
    color: #fff;
    font-size: 10pt;
    margin-right: 25px;
}

a.button:link {
    background: #f60;
    border: 1px solid #f93;
    cursor: pointer;
    }

a.button:hover, a.button:active {
    background: #f93;
    border: 1px solid #fa4;
    cursor: pointer;
    }


a.button_dis {
    position: relative;
    padding-top: 1px;
    padding-right: 12px;
    padding-bottom: 1px;
    padding-left: 12px;
    background: #999;
    border: 1px solid #aaa;
    color: #fff;
    font-size: 10pt;
    margin-right: 25px;
}

a.button_dis:hover {
    cursor: default;
   } 
   
  

</style>
</head>
<body>
<input type="button" value="My button" name="thebutton" onclick="return changeClass();">

<a href="class.html" id='btn' class="button">This class will Change</a>

</body>
</html>

Does IE's error console report anything?
Is formIsdirty() taking longer than you think to change it?


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[LarrySteele]

Thanks Phil. I'm getting same result as you.

Does IE's error console report anything?

No errors, just doesn't refresh.

Is formIsdirty() taking longer than you think to change it?

formIsDirty() returns quickly. I get my message box and it returns expected value for dirty form.


Between posts, I tried setting the color directly (elem.style.backgroundColor) and it changed immediately. I've since removed.

I then tested by setting the style in the onclick event (onchange="document.getElementById('btn_reset').className = 'button_dis';"). As before, it changed the class, but did not refresh the background color until I hovered and exited.

After removing that, I'm back to where I was at beginning of the thread.

You mentioned about timing, and I wondered if it was possible that the DOM was updating, but very slowly. So I triggered the change and called up View Source. The page has >18k lines (almost all are values in the various select elements). Anyway, the view source page came up after a couple of minutes, and button still hadn't changed. After a few more minutes, I hovered it goes from gray to light orange and then to orange when I leave it.

There's obviously a conflict somewhere. I'm not sure if it's in the JavaScript, CSS, or CFM/HTML (oh, and my DOCTYPE is 4.01 transitional). Unfortunately, I'm in the middle of a huge change, and time is tight. Looks like I may have to go with an interim fix - set the className as I am now, but also manually setting the colors to force IE to render the change immediately.

Hopefully I can get back to this and find out where things went wrong.

Thanks for helping me confirm it's not necessarily a browser bug.

 

[tcole6]

Hey Larry,

Wasn't sure if you had a working resolution for this issue or not.

What I've had to do is in the javascript function that does the className assignment, I've also had to do a re-assignment of the className to the document body. (i.e. document.body.className = document.body.className) to get the screen to properly update the CSS. This works if the body has a class or not. Once I did that, my screen acted exactly as it does in IE9 and FF/Chrome/Opera/Safari

Hope that helps.