Problems with IE 7

HTML & CSS
1

Hei!

I need som help with this site: www.juliaeller.com/greteswahn

All browsers view the ornament correctly but not IE7. Here it moves to the right. I have checked the code in the css and html validator - successfully.

My question: Why is the ornament moving to the right in IE7?

I have attached screenshots to explain the difference.

Thank you for your help!

Here comes the html-code:

<!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=UTF-8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

<title>Grete Swahn</title>

<!--[if gte IE 7]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
<!-- <![endif]-->

<style type="text/css">
#main {
	background-color: transparent;	
	margin-top: 1em;
}

</style>


</head>

<body>

<div id="wrap">



<div id="header" class="group">

	<div id="logo">
    
    <img src="logo1.png" alt="Grete Swahn" width="255" height="66" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="0,0,255,66" href="index.html" alt="GreteSwahnHome" />
    </map>
    
	<h1>Grete Swahn</h1>
    
	</div>
   
		<ul id="nav">
    		<li><a href="galleri.html">Galleri</a></li>
        	<li><a href="utsmykking.html">Utsmykking</a></li>
        	<li><a href="installasjoner.html">Installasjoner</a></li>
        	<li><a href="utstillinger.html">Utstillinger</a></li>
        	<li><a href="cv.html">CV</a></li>
        	<li><a href="kontakt.html">Kontakt</a></li>
    	</ul>
        
	<div id="ornament"></div>  
     
</div> <!-- /header -->

<div class="group">
	<div id="main">
    	<img src="index2.jpg" width="700" height="525" alt="Grete Swahn" />
    </div> <!-- /main -->
    
	

	<div id="secondary">
    	
    </div> <!-- /secondary -->
</div> <!-- /.group -->



<div id="footer">
	
</div> <!-- /footer -->

</div> <!-- /wrap -->


</body>
</html>

And here CSS …

body{
	
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.875em;
	background-image:url(../gradient.jpg);
	background-repeat:repeat-x;
	background-color:#c2c2c2;
	color: black;
	width: 100%;
}

#wrap {
	width: 70em;
	margin: 0 auto;
	margin-top: 3em;	
}


#ornament {
	background-image: url(../ornament_gs1.png);
	background-repeat: no-repeat;
	height: 289px;
	width: 216px;
	position:relative;
	top: -1.5em;
	left: 0.8em;
	z-index:-1;
}


#header {
	height:6em;
}

img {
	float: left;
}

h1 { 
	text-indent: -9999px;
} 

#main {
	width: 50em;
	height: 50em;
	background-color: white;
	float: right;
	
	
}




/*
navigation
----------------------------------------*/

#nav {
	list-style-type: none;
	float: right;
	background-color: #00b175;
	width: 50em;
	padding: 0.2em 0 0.2em 0;
	margin-top: 0.8em;
	
}

#nav li {
	display: inline;
	
}




#nav li a, a:link {
	color: white;
	text-decoration: none;
	text-transform:uppercase;
	letter-spacing: 1.5px;
	padding-left: 1.2em;

}

#nav li a.current {
	color: black;	
}

#nav a:visited {
	text-decoration: none;	
}

#nav a:hover { 
 color: black; 
} 

#nav a:active {
	
}



/*
Removes Extra Whitespace in List Links bug
----------------------------------------*/
li {
height: 1em;
}

html>body li {
height: auto;
}

/*
self-clear floats
----------------------------------------*/
.group:after {
	content: ".";
	display:block;
	height: 0;
	clear:both;
	visibility: hidden;
}

/*for IE7 */

*:first-child+html .group {
	min-height: 1px;	
}
2

You need set #ornament to clear and then float it and drag it back up and that will keep browsers the same.


#ornament {
    background-image: url(http://www.juliaeller.com/greteswahn/ornament_gs1.png);
    background-repeat: no-repeat;
    height: 289px;
    width: 216px;
    position:relative;
[B]    margin-top: -5em;[/B]
    left: 0.8em;
    z-index:-1;
[B]    float:left;
    clear:left[/B]
}

In IE7 an element with haslayout won’t slide its background under floated content whereas other browsers will. It will always move to the side or underneath. Therefore by clearing and floating we make others behave the same.

The image would have been better as a background image to the header though as it is purely decoration.

3

Yes, but unfortunately, that does not work.

4

Have you tried it with float left and margins:

#ornament {
	background-image: url(../ornament_gs1.png);
	background-repeat: no-repeat;
	height: 289px;
	width: 216px;
    float: left;
	position:relative;
	margin-top: -1.5em;
	margin-left: 0.8em;
	z-index:-1;
}
5

Thank you, Paul O’B!!!

6

Does anybody know it that is some kind of IE7 bug?