Opening zoom footer in ie7

**Miltongomes** · 26-03-2009

hello, when I click on a photo to zoom in IE7, it opens at the bottom of the page, and suddenly, I see only the high zoom! it annoys me! thank you for your help!

**Gusgr8** · 26-03-2009

IE7's zoom is shaky at the best of times and I wouldn't waste too much time on it because it has many many bugs. As long as the page is still readable then that's all you should really worry about when a page is zoomed. It is never going to look exactly the same.

I can tell you though that the problem is cause by position relative on your #container which throws Ie's zoom out of wack. If you remove the position relative from #container and use my footer technique instead of yours then it will zoom a lot better than your version.

Position relative on main containers seem to throw the IE7 zoom completely out (as does using the body to center the page among many other things).

I would strongly advise against using the absolute footer version anyway because it is very unstable and in dynamic situations breaks completely.

Here is my footer technique in place although the dimensions will need to be tweaked because you have added padding and borders into the mix with varying units (ie px and em) which makes it almost impossible to add together exactly.

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" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="distribution" content="GLOBAL" />
<meta name="rating" content="General" />
<meta name="robots" content="ALL, INDEX, FOLLOW" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
//-->
//]]>
</script>
<style type="text/css">
<!--
html, body {
    height:100%;
    padding: 0;
    margin: 0;
}
body {
    font : 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
    background : #4C40C5;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color : #88A3C9;
}
html {
    font-size:100%;
}
/* Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
.twoColElsLtHdr #container {
    width:48.75em;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    border-left: 1px solid #66635C;
    border-right: 1px solid #66635C;
    background: #362D8B;
    min-height:100%;
}
/*prevents IE auto-expansion bug so the footer stretches whole width of container*/
/*If put in a cond comment for IE (including IE7), overflow-x: hidden will remove vertical scrollbar!!*/
* html .twoColElsLtHdr #container {
    height:100%;
    overflow-x: hidden;
}
.twoColElsLtHdr #clearfooter {
    clear:both;
    height:8em;
    width:100%;
}
.twoColElsLtHdr #footer {
    width:48.75em;
    height:8em;
    background-color:#000;
    color: #FFF;
    font-weight:bold;
    text-align:center;
    padding: 1em 0 0 0;
    text-transform: uppercase;
    margin-left:auto;
    margin-right:auto;
    border-top: 4px solid #BAB7A4;
    background: #362D8B;
    margin-top:-9em;
}
.twoColElsLtHdr #footer a:link, #footer a:visited {
    color: #88A3C9;
    text-decoration: none;
}
.twoColElsLtHdr #footer a:hover {
    color: #88A3C9;
    text-decoration: underline;
}
.twoColElsLtHdr #footernav ul {
    /*    margin-left:5px;*/
    padding-left: 0;
    display: block;
    padding-top:20px;
    font-size:0.65em;
}
.twoColElsLtHdr #footernav ul li {
    margin-left: 0;
    padding: 3px 5px;
    border-left: 1px solid #bfbfbf;
    list-style: none;
    display: inline;
}
/*prevent IE7 to break li when zooming*/
.twoColElsLtHdr #footernav ul li a {
    zoom:1;
}
.twoColElsLtHdr #footernav ul li.first {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}
.twoColElsLtHdr #signature {
    margin : 3em auto 0 auto;
    width: 44em; /*add to keep this stuff 
    from breaking the container with font-scalling*/
    font-size:0.75em;
}
.twoColElsLtHdr #header {
    /*padding: 0 10px;   this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    border-bottom: 1px solid #999;
}
/*Resizing with css*/
img.block {/* replacement for <br /> after images */
    display: block; /* forces line break for content after */
}
img.elastic {
    width: 48.75em; /* replaces 774px width */
    height: 20.56em; /* replaces 329px height */
}
/* end resizing */

.twoColElsLtHdr #headersmall {
    float:right;
    margin-top: -3em;
}
img.elasticsmall {
    width:15.3125em; /* replaces 245px width */
    height:1.5625em; /* replaces 25px height */
}
/*.twoColElsLtHdr #header h1 {
    margin: 0; zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse 
    padding: 10px 0;   using padding instead of margin will allow you to keep the element away from the edges of the div 
}
*/
/*turning borders of by default for IE*/
img {
    border: none;
}
/* links */

/*Adding background transparent messes links up in IE*/
a:link {
    color: #bfbfbf;
    text-decoration: underline;
}
a:visited {
    color: #666666;
    text-decoration: none;
}
a:hover {
    color : #a52a2a;
    text-decoration : underline;
}
/* Text */    
 h1 {
    background: transparent;
    text-transform: uppercase;
    font: bold .8em/1.2em Helvetica, Arial, Verdana, sans-serif;
    text-align:left;
    padding-top:2.4em;
    padding-left:.5em;
}
h2 {
    background: transparent;
    font: bold .75em/1.2em Helvetica, Arial, Verdana, sans-serif;
    text-align:left;
    padding-top:1em;
    padding-left:.5em;
}
.twoColElsLtHdr #mainContent p {
    background: transparent;
    padding: 10px 15px;
    text-align: justify;
    font-size:0.75em;
}
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width. 
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColElsLtHdr #sidebar1 p" rule.
*/
 

.twoColElsLtHdr #sidebar1 {
    float: left;
    width: 12.5em; /* since this element is floated, a width must be given */
    /*background: #EBEBEB;  the background color will be displayed for the length of the content in the column, but no further */
    /*padding: 15px 0;  top and bottom padding create visual space within this div */
    margin-top:  1.5em;
    margin-left: 0.3em;
    font-size:0.75em;
}
.twoColElsLtHdr #sidebar1 ul {
    margin : 0;
    padding : 0;
    list-style-type : none;
}
.twoColElsLtHdr #sidebar1 li {
    margin: 2em 0 0.5em;
    border: 1px solid #191940;
}
.twoColElsLtHdr #sidebar1 li a {
    display: block;
    padding: 15px 0.5em 15px 0.5em;/* controls the nav box: up, down etc*/
    text-decoration: none;
    text-align:center;
    border-left: 1em solid #6A6A8F;
    border-right: 1em solid #6A6A8F;
    height: 1%; /* haslayout trigger to prevent unwanted space between li in IE. Makes li also clickable whole width*/
}
.twoColElsLtHdr #sidebar1 li a:link {
    color: #88A3C9;
}
.twoColElsLtHdr #sidebar1 li a:visited {
    color : #181830;
}
.twoColElsLtHdr #sidebar1 li a:hover {
    border-left: 1em solid #494980;
    border-right: 1em solid #494980;
    color: #000;
    background: #BBBBC8;
}
.twoColElsLtHdr #sidebar1 #current a {
    border-left: 12px solid #202152;
    border-right: 12px solid #202152;
}
/*.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
    margin-left: 10px;  the left and right margin should be given to every element that will be placed in the side columns  
    margin-right: 10px;
}*/

/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
*/
.twoColElsLtHdr #mainContent {
    margin: 0 1.8em 0 13em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
}
/*Thumbgallery*/
/*center gallery */
.twoColElsLtHdr #gallerywrap {
    float:left;
    position:relative;
    left: 2%;
    margin-bottom:50px;
}
.twoColElsLtHdr #gallery {
    width: 33em;
    overflow:auto;
    /*margin-bottom:50px;*/
    padding-top:15px;
    float:left;
}
/* center the gallery in IE*/     
/** html #contentright {
    margin: 0 auto;
}*/

/* Miscellaneous classes for reuse */

/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.mnheading {
    margin : 3em 0 3em 0;
    text-align: center;
}
.headingpadder {
    padding-bottom:4em;
}
.clear {
    clear: both;
    height: 0;
    margin: 0;
    font-size: 1px;
    line-height: 0;
}
.navpadder {
    padding: 8px 0.5em 8px 0.5em !important;
}/* controls the nav box: up, down. etc. Important rule overrides padding on li a*/
.padder {
    padding: 20px 0 0 5px;
}
.thumbnail {
    float : left;
    border : 1px solid #999;
    padding : 0.625em;
    text-align : center;
    margin: 10px auto 0 auto;
    white-space:nowrap;
    width:6.6875em;
    height:4.6875em;
}
img.thumbnaileleastic {
    width:6.6875em;
    height:4.6875em;
}
.topper {
    margin-top: 20px;
}
.dzmail {
    padding: 10px 0 0 5px;
    margin: 0 0 -2px;
}
.rightborder {
    /*    padding: 5px;*/
    border-top: 1px solid;
    border-right: 1px solid;
    margin-bottom: 50px;
}
.leftborder {
    /*padding: 5px;*/
    border-top: 1px solid;
    border-left: 1px solid;
    margin-bottom: 50px;
}
.bottomborder {
    /*    padding: 5px;*/
    border-bottom: 1px solid;
    border-left: 1px solid;
    margin-bottom: 50px;
}
-->
</style>
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
/*.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }*/
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body class="twoColElsLtHdr">
<div id="container">
    <div id="header"> <img src="http://www.dzinelabs.com/sandbox/MP/Images/logoblue1.gif" alt="Foto da logomarca" name="Foto da logomarca" width="774" height="329" class="block elastic" /> </div>
    <!-- end #header -->
    <div id="sidebar1">
        <ul>
            <li id="current"><a href="../index.html" title="Ir para A Empresa">A Empresa</a></li>
            <li><a href="Missao.php" title="Ir para Miss&atilde;o">MissÃ£o</a></li>
            <li><a href="clientes.php" title="Ir para Clientes">Clientes</a></li>
            <li><a href="equipamentos.php" title="Ir para Equipamentos transportados" class="navpadder">Equipamentos Transportados</a></li>
            <li><a href="frota.php" title="Ir para Nossa Frota">Nossa Frota</a></li>
            <li><a href="orcamento.php" title="Ir para OrÃ§amento">OrÃ§amento</a></li>
            <li><a href="Contact.php" title="Ir para Contact">Fale Conosco</a></li>
        </ul>
        <!-- end #sidebar1 -->
    </div>
    <div id="mainContent">
        <h1>Departamento LogÃ*stica</h1>
        <h2 class="headingpadder">Transporte com eficiÃªncia e seguranÃ§a</h2>
        <div id="headersmall"> <img src="http://www.dzinelabs.com/sandbox/MP/Images/logobluesmallhor1.gif" alt="Foto da logomarca pequena" name="Foto da logomarca pequena" width="245" height="25" class=" block elasticsmall" /> </div>
        <p class="rightborder">A Mendes Peres Transportes Ltda estÃ¡ no ramo de transporte desde 1995.
            Sediada em uma Ã¡rea de 5000mÂ² em Belo Horizonte as margens da Via Expressa,
            com escoamento rÃ¡pido para toda grande Belo Horizonte, transportamos
            para todo o Brasil com eficiÃªncia e seguranÃ§a.</p>
        <p class="leftborder">A Mendes Peres Transportes Ltda., possui frota prÃ³pria de Carretas
            comuns e Especiais, e carros com bom estado de conservaÃ§Ã£o.</p>
        <p class="bottomborder">A empresa vem atendendo o setor industrial de Matozinhos desde 2002, e este ano para ficar mais prÃ³ximo do setor e assim atender com mais agilidade, adquiriu uma Ã¡rea de 10,000m2 em Matozinhos e estÃ¡ construindo um pÃ¡tio, onde alÃ©m da logÃ*stica, teremos outros serviÃ§os ligados ao setor.</p>
        <br class="clear" />
        <div id="gallerywrap">
            <div id="gallery">
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb2.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb3.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb4.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb5.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb6.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb7.gif" alt="Foto de carga" class="block thumbnaileleastic" title="Foto de carga" /></div>
                <div class="thumbnail"><img src="http://www.dzinelabs.com/sandbox/MP/Images/thumb8.gif" alt="Foto de carga" class="block thumbnaileleastic"  title="Foto de carga" /></div>
            </div>
        </div>
    </div>
    <!-- end #mainContent -->
    <div id="clearfooter"></div>
    <!-- end #footer -->
</div>
<!-- end #container -->
<div id="footer">
    <div id="footernav">
        <ul>
            <li class="first"><a href="../index.html" title="Ir para A Empresa"> Empresa</a></li>
            <li><a href="Missao.php" title="Ir para Miss&atilde;o"> Miss&atilde;o </a></li>
            <li><a href="clientes.php" title="Ir para Clientes">Clientes</a></li>
            <li><a href="equipamentos.php" title="Ir para Equipamentos transportados">Equipamentos</a></li>
            <li><a href="frota.php" title="Ir para Nossa Frota"> Nossa Frota </a></li>
            <li><a href="orcamento.php" title="Ir para Or&ccedil;amento"> Or&ccedil;amento</a></li>
            <li><a href="Contact.php" title="Ir para Contact">Fale Conosco</a></li>
        </ul>
    </div>
    <div id="signature">CriaÃ§Ã£o: Â© Dzinelabs 2007 - tel. 8816-0697<a href="mailto:xxx@dzinxxx.com" class="dzmail">xxx@dzinxxx.com</a></div>
</div>
</body>
</html>

**Expertz** · 26-03-2009

This is an ie7 "feature" (Bug!) where when you have positioned elements, with hasLayout - this would usually be any 'column' in a layout with position: relative; and a width!

when you use the zoom, either way, in such a layout it will cause elements to overlap using "zoom in" or gap using "zoom out" - this is because IE applies extra margins, it applies negative ones for the zoom in!

ie7 can't cope unless a parent, ancestor element is also positioned so in your case adding position: relative; to the body element stabilised it

Your footer was the symptom, the "overlap" was actually happening on each of your relatively positioned divs so by the time it was applied to all your columns the colored footer showed the biggest difference in position.

If the zoom was positive it was doing the same only making a gap rather than overlapping.