Jun
06
IE7 CSS Bug
This appears to affect all beta builds of IE7 (or at least beta 2 & 3). A CSS statement containing multiple #id.class selectors will only style the last item in the list.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
#content_cell.class1, #content_cell.class2{background:black;}
</style>
</head>
<body>
<table>
<tr>
<td id="content_cell" class="class1">
<div style="width:200px;height:500px;
background:#eee;margin:3em;">some text</div>
</td>
</tr>
</table>
</body>
</html>
This code should create a box with a 3em wide black "border" around it, but in IE7, all you see is a gray box.
Splitting the line into two is a workaround for the bug:
#content_cell.class1{background:black;}
#content_cell.class2{background:black;}
Here is a screenshot of what happens.
