Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- IE8 CSS Parse Bug with combined selectors


SuzyUK - 10:03 pm on Jul 7, 2009 (gmt 0)


after trying to write a jQuery solution to simulate the function of the :checked, :disabled, :enabled [webmasterworld.com] UI states for IE8. I ran into a couple of issues, the first I found about - but I think the final one is an IE8 CSS parse error/bug, does anyone know if it's known, or if I've done something wrong.

in the test code below, in which I've provided both the JS test and a cleanly classed element, IE8 is not processing the combined selector in either case. (it does in IE8 as IE7, as well as in IE6/7 themselves)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(':not(:disabled)').addClass('isenabled');
});
</script>

<style type="text/css">
button:disabled {background-color: red; color: white;}

/* you should be able to combine your selectors like this, but IE8(as IE8) doesn't like it */
button:enabled, button.isenabled {background-color: green; color: yellow;}

/* comment out the rule below to see IE8 (as IE8) Fail on the both the green enabled buttons whereas it should be using the combined selector above*/
button.isenabled {background-color: green;color: yellow;}
</style>
</head>
<body>
<form action="#">
<button disabled="disabled">disabled</button>
<button>enabled by default</button>
<button class="isenabled">enabled by classname</button>
</form>
<div></div>
</body>
</html>

thoughts?

edited to move comment out of the way to clarify example, per reply below

[edited by: SuzyUK at 10:16 pm (utc) on July 7, 2009]


Thread source:: http://www.webmasterworld.com/css/3947962.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com