SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 spacing (how to control it)

    Hello,
    I'm having trouble with spacing in IE6. My "container" is getting a random height/space in IE6 whereas in FF it's not showing this. How do I specify for IE to not display space without me telling it to? I'm sure this is easy but I'm really out of practice...

    Here is the image...it should work like it appears in IE (not FF):



    Code:
    HTML {
    	margin: 0 auto;
    	overflow: hidden;
    }
    
    body {
    	width: 100%;
    	height: 100%;
    	background:url(../_includes/images/backgrounds/main.jpg);
    	font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    	margin: 0 auto; 
    }
    
    
    #wrapper {
    	width: 948px;
    	margin: 0 auto;
    	padding: 50px 0 0 0;
    	}
    	
    	
    .logo {
    	background:url(../_includes/images/logo.gif) no-repeat;
    	width: 111px;
    	height: 39px;
    	cursor: pointer;
    	margin: 0 0 0 30px;
    	padding: 0 0 50px 0;
    	overflow: hidden;
    	}
    
    .container {
    	width: 948px;
    	height: 500px;
    	}
    
    .canvas {
    	width: 888px;
    	padding: 0 30px;
    	background:url(../_includes/images/backgrounds/test.gif);
    	}
    
    
    .canvas .header {
    	height: 50px;
    	padding: 48px 0;
    	}
    
    
    
    .top {
    	width: 948px;
    	height: 14px;
    	background:url(../_includes/images/canvas/top.gif) no-repeat;
    	overflow: hidden;
    	}
    	
    .bottom {
    	width: 948px;
    	height: 14px;
    	background:url(../_includes/images/canvas/bottom.gif) no-repeat;
    	overflow: hidden;
    	}
    	
    
    
    
    /* PORTFOLIO ******************************************************************/
    /******************************************************************************/
    
    
    
    
    .showcase {
    	float: left;
    	margin: 0 0 48px 0;
    	
    }
    
    .showcase ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	
    }	
    .showcase ul li {
    	display: inline;
    	float: left;
    	height: 127px;
    	margin: 1px 1px 0px 0;
    	width: 221px;
    	overflow: hidden;
    }
    .showcase ul li a:hover {
      cursor: pointer;
    }
    
    .showcase ul li.item_01 {background: url(../_includes/images/showcase/rollovers/libin.gif);}
    .showcase ul li.item_02 {background: url(../_includes/images/showcase/rollovers/aina.gif);}
    .showcase ul li.item_03 {background: url(../_includes/images/showcase/rollovers/agrium.gif);}
    .showcase ul li.item_04 {background: url(../_includes/images/showcase/rollovers/aina.gif);}
    .showcase ul li.item_05 {background: url(../_includes/images/showcase/rollovers/aina.gif);}
    .showcase ul li.item_06 {background: url(../_includes/images/showcase/rollovers/aina.gif);}
    .showcase ul li.item_07 {background: url(../_includes/images/showcase/rollovers/aina.gif);}
    .showcase ul li.item_08 {background: url(../_includes/images/showcase/rollovers/aina.gif);}

    This is what I have in my page:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/overlay.js"></script>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/multibox.js"></script>
    <script type="text/javascript" src="js/correctPNG.js"></script>
    <script type="text/javascript" src="js/smoothscroll.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <div class="logo"></div>
      <div class="container">
        <div class="top"></div>
        <div class="canvas">
          <div class="header"><img src="_includes/images/canvas/titles/work.gif" alt="Work" /></div>
          <div class="showcase">
            <ul>
              <li class="item_01"><a href="#work_01"><img src="_includes/images/showcase/libin.jpg" class="opacity" border="0"></a></li>
              <li class="item_02"><a href="#work_02"><img src="_includes/images/showcase/luxstone.jpg" class="opacity" border="0"></a></li>
              <li class="item_03"><a href="#work_03"><img src="_includes/images/showcase/agrium.jpg" class="opacity" border="0"></a></li>
              <li class="item_04"><a href="#work_04"><img src="_includes/images/showcase/hbi.jpg" class="opacity" border="0"></a></li>
              <li class="item_05"><a href="#work_01"><img src="_includes/images/showcase/aina.jpg" class="opacity" border="0"></a></li>
              <li class="item_06"><a href="#work_02"><img src="_includes/images/showcase/1.gif" class="opacity" border="0"></a></li>
              <li class="item_07"><a href="#work_03"><img src="_includes/images/showcase/1.gif" class="opacity" border="0"></a></li>
              <li class="item_08"><a href="#work_04"><img src="_includes/images/showcase/1.gif" class="opacity" border="0"></a></li>
            </ul>
          </div>
        </div>
    	<div class="bottom"></div>
      </div>
    </div>
    </body>
    </html>

    If I give the showcase container a height then the background repeats, however, there is a way for this to work without specifying a height (I think) but I can't figure out how to accomplish this...


    Thanks!
    Last edited by JoeSomebody; Jul 23, 2008 at 18:01.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This made a diff:

    .canvas {
    width: 888px;
    padding: 0 30px;
    background: #ffffff;
    position: absolute;
    }


    However, now I can't add anything after the canvas section...won't display

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Joe,
    If I give the showcase container a height then the background repeats, however, there is a way for this to work without specifying a height (I think) but I can't figure out how to accomplish this...
    Is the IE6 image you gave with a height on the showcase container?

    You may be having a haslayout issue with ie6, try giving your showcase container height:1&#37;; that will force ie6 to give layout to it without effecting other browsers.

    If I give the showcase container a height then the background repeats
    You can give the no-repeat rule after your image path. Just like you have done in other areas of your css.

    However, now I can't add anything after the canvas section...won't display
    Adding position:absolute removes the element from the flow of the document. Also you would also need to position it from top and side coordinates. Avoid position:absolute

    How do I specify for IE to not display space without me telling it to?
    You can give IE6 a specific rule by using the * html hack

    example

    Code:
    .canvas {
        width: 888px;
        padding: 0 30px;
        background:url(../_includes/images/backgrounds/test.gif);
        }
    
    * html .canvas {padding:0 10px;} /* for ie6 only*/
    You need to get a reset in at the top of your stylesheet too, * {margin:0; padding:0;} and remove the margin:0 auto form your html.

    If you have a link to your page it would be nice to have the images to debug with


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
  •