#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Copenhagen, Denmark
    Posts
    171
    Rep Power
    35

    Problem with my design in Opera


    Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this?

    Here is my code:
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    	background: #3e1f00 url(../images/background.gif);
    	background-position: top center;
    	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
    	margin-top:30px;
    }
    
    #top {
    	background: red;
    	position: relative;
    	margin-left: auto; margin-right: auto;
    	width: 758px; height: 167px;
    	text-align: left;
    }
    
    #wrapper {
        position: relative;
    	margin: 0 auto;
        width: 758px;
    	background: pink; 	
    }
    
    #middle {
    	position: relative; 
        margin: 0 auto;
    	width: 758px; height: 200px;
    	text-align: left;
    	background: yellow;
    }
    
    #bottom {
    	position: relative;
    	margin-left: auto; margin-right: auto;
    	width: 758px; height: 23px;
    	text-align: left;
    	background: green;
    }
    
    /*** see http://www.positioniseverything.net/easyclearing.html
       for explanation of Tony Aslett's elegant hack ***/
    
    .clearing:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    
    .clearing {
        display: inline-block;
        }
    
    /* hides from IE/Mac \*/
    * html .clearing { 
        height: 1%;
        }
    
    .clearing {
        display: block;
        }
    /* end hide from IE-Mac */
    /*** end clearing hack ***/
    </style>
    </head>
    
    <body>
      <center>
      
        <div id="top">
    	  TOP
        </div>
    	
        <div id="wrapper" class="clearing">
    	
    	  <div id="middle"> 
            MIDDLE
          </div>
    	  	  
        </div>
    	
    	<div id="bottom">
    	  BOTTOM
        </div>
    	
      </center>
    </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2006
    Posts
    185
    Rep Power
    25
    Simpler code appears fine in Opera (as well as IE/FF).
    Code:
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    body{ background-color:#3e1f00; padding:30px 0 0; margin:0; text-align:center;}
      #wrap{ width:758px; margin:0 auto; text-align:left;}
        #top{ height:167px; background-color:red;}
        #mid{ height:200px; background-color:yellow;}
        #bottom{ background-color:green;}
    </style>
    </head>
    <body>
    
    <div id="wrap">
      <div id="top">Top</div>
      <div id="mid">Mid</div>
      <div id="bottom">Bottom</div>
    </div>
    
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Copenhagen, Denmark
    Posts
    171
    Rep Power
    35
    Thanks.

IMN logo majestic logo threadwatch logo seochat tools logo