SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with IE 7

    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:

    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 ...

    Code:
    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;	
    }
    Attached Images Attached Images

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,053
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried it with float left and margins:
    Code CSS:
    #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;
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Have you tried it with float left and margins:
    Code CSS:
    #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;
    }

    Yes, but unfortunately, that does not work.

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anybody know it that is some kind of IE7 bug?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You need set #ornament to clear and then float it and drag it back up and that will keep browsers the same.

    Code:
    #ornament {
        background-image: url(http://www.juliaeller.com/greteswahn/ornament_gs1.png);
        background-repeat: no-repeat;
        height: 289px;
        width: 216px;
        position:relative;
        margin-top: -5em;
        left: 0.8em;
        z-index:-1;
        float:left;
        clear:left
    }
    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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul O'B!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •