Why does my layout work in IE<6 but not IE>7?_问答_开发者

I'm developing on a Mac, so I'm relying on emulators for IE-testing. According to netrenderer (http://ipinfo.info/netrenderer/), my layout (which naturally works beautifully on my installed versions of Safari & Firefox) works in IE6 and below, but not at all in IE7 and above.

Note that I haven't tested this with an actual IE install- only with netrenderer. It is showing that on IE6 and below, despite there being some minor font-sizing issues, it mostly works: the "menu" sits on the left and the "content" sits on the right, and a background image shows up for "menu". In IE 8&9 the divs sit on top of each other, and in IE7 the "menu" div is shoved over to the far right. In 7, 8 and 9 no background开发者_如何学Go image shows up for "menu".

I've created a test page with simplified content and the relevant styles built into the header here: http://www.steph-morris.com/test.html

I've run it through the W3C validator and it validated fine. I've tried dicking around with position: variations on the various containers, as suggested by many a StackOverflow IE positioning solution, to no avail. I am hoping that some battle-hardened veteran of the browser compatibility wars will be able to take one look at it and let me know why the layout concept I've chosen won't work with IE, and point me in the direction of an acceptable hack or substitute.

This was a while ago now, but i noticed your link was still active (and still showing the broken layout)...

I had a quick look at this and I think the problem lies within your css. I didnt have time to have a thorough look but i did manage to quickly draw up a basic version of your site by changing some lines which worked in IE9/8/7 and FF.

Hope this helps :)

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Steph Morris | TEST</title>

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan">

<style>

body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica}

#menu {width:170px; float:left; margin-right:1em}
#logo{}
#logo h1{}
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif}

#middle_left ul {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 13px;
list-style:none;
padding:0;
color:#000}

#other {float:left; width:600px;}
#other h1 {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 35px;
padding-right: 15px;
padding-top: 15px;
margin:0;
}
#other_text {padding:25px;}
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent}
</style>

</head>

<body>    
<div id="container_other">
    <div id="menu">
        <div id="menu_left">
            <div id="top_left">
                <div id="logo"><h1><a href="#">Steph Morris</a></h1></div>
            </div>
            <div id="middle_left">
                <ul>
                    <li><div><a href="#">The Start</a></div></li>
                    <li><div><a href="#">About</a></div></li>
                    <li><div><a href="#">The Novel</a></div></li>
                    <li><div><a href="#">Translation / Übersetzung</a></div></li>
                    <li class="current"><div><a href="#">Around</a></div></li>
                </ul>
            </div>
            <div id="bottom_left">
                <p class="contact"><a href="mailto:steph@stephmorris.com">Contact:<br>steph@<br>stephmorris.com</a></p>
            </div>
        </div>
    </div>
    <div id="other" class="">
        <h1 class="veolay">Other Works</h1>
        <div id="other_content">
            <div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes&mdash;we will manipulate these soon using jQuery.</p>
            <p>For the slideshow animation we are going to switch between each photo at a set rate. So let&rsquo;s start by writing a function that brings in a new photo on top of the last active image:</p>
        </div>
        </div> 
    </div> 
</div>
</body>
</html>