Welcome to the MacNN Forums.

tavilach · Jul 15, 2005, 02:57 PM

I just discovered the IE7 hack (mentioned in one of the sticky threads), but I can't seem to get it to work. My stylesheet and XHTML page are both completely standards compliant. My setup is:

index.htm:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->
<div class="header-back">
<div class="header">
<div class="header-text">
<img src="logo.gif" />
</div>
</div>
</div>

<div class="link-back">
<div class="link-bar">test
</div>
</div>

<div class="body-back">
<div class="body-top">
<div class="sidebar">
</div>
</div>
<div class="body-repeat">
<div class="body-text">
test
</div>
</div>
<div class="body-bottom">
</div>
</div>
</body>
</html>

style.css:

Code:
/* CSS Document */

body
{
	background-color:#CCCCCC;
}

div.header-back
{
	background-color:#FFFFFF;
	width:712px;
}

div.header
{
	background-image:url('header.gif');
	background-position: left;
	background-repeat:no-repeat;
	margin-left: auto;
	margin-right: auto;
	padding:0;
	height:94px;
}

div.header-text
{
	position:absolute;
	top:15px;
	left:22px;
}

div.body-back
{
	position:relative;
	top:1px;
	background-color:#FFFFFF;
	width:712px;
}

div.body-top
{
	background-image:url('body_top.gif');
	background-position: left;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	height:60px;
}

div.body-repeat
{
	background-image:url('body_repeat.gif');
	background-position: left;
	background-repeat:repeat-y;
	margin:0;
	padding:0;
	min-height:600px;
}

div.body-text
{
	position:relative;
	top:10px;
	left:175px;
	height:590px;
	width:518px;
	border-style:solid;
	border-width:thin;
	border-color:#CCCCCC;
}

div.body-bottom
{
	background-image:url('body_bottom.gif');
	background-position: left;
	background-repeat: no-repeat;
	margin:0;
	padding:0;
	height:60px;
}

div.sidebar
{
	position:relative;
	top:12px;
	left:12px;
	height:600px;
	width:150px;
	border-style:solid;
	border-width:thin;
	border-color:#CCCCCC;
	background-color:#EBEBEB
}

div.link-back
{
	background-color:#EBEBEB;
	width:712px;
}

div.link-bar
{
	position:relative;
	height:30px;
	background-image:url('link_bar.gif');
	background-repeat:no-repeat;
}

Folder Structure: C:\Site\ie7, where index.htm and style.css are located in C:\Site.

I assume that I'm not loading IE7 correctly. Help would be very much appreciated!

Note: When I try to open the .js files directly, I get various "____ is not defined" Microsoft JScript runtime errors. I'm using Windows XP for testing.

Edit: Is there any CSS checker specifically for Internet Explorer that could point me to the reasons behind faulty rendering of different elements? How do developers of complex stylesheets (like those found at csszengarden.com) manage to have CSS that works in almost all browsers? Lists of tags that don't work in various browsers are not enough, because how they can be used is what's important.

madmacgames · Jul 15, 2005, 03:17 PM

Hey I have also noticed that the new versions of IE7 absolutely refuse to load... both the compressed and uncompressed, so it is not a compression issue.

I use a slightly older version that actually does load. I have had success with both version 0.7.2 and 0.7.3, but anything newer will not work. You can grab version 0.7.2 from my site if you want to give it a try... Would be easy to determine if the problem as with you or with your version of IE7:

http://www.madmacgames.com/includes/...-standard-p.js

selowitch · Jul 16, 2005, 10:11 AM

Where do you download IE 7?