When the class "ie6" is not included on the 2nd line, as shown below, what I see in FireFox are the two hyperlinks "Mozilla Firefox" and "Google Chrome" below the heading text "Firefox Link Fail". I was expecting that the entire div would be hidden. Inspecting with FireBug shows that the two links have been repeated outside the div block.
Is there a workaround for this, or can you fix it?
Thank you,
Code: Select all
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Firefox Link Fail</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
.ie6-upgrade { display: none; }
.ie6 .ie6-upgrade { display: block; }
.ie6-message {
background:#4a4a4a;
color: #fff;
padding: 5px;
width:100%;
}
.ie6-message a {
color: #fff;
}
</style>
</head>
<body>
<div class="ie6-upgrade ie6-message">
<strong>Note</strong>: Blah, blah, consider using a modern browser such as
<!-- With NoScript active, these links are displayed in Firefox AFTER the h2 below -->
<a href="http://www.getfirefox.com/">Mozilla Firefox</a> or
<a href="http://www.google.com/chrome/">Google Chrome</a>.
</div>
<h2>Firefox Link Fail</h2>
</body>
</html>