Divs overlap on IE zoom

Hi, my site is fine in Google Chrome and Firefox, but in IE, I get the main content div overlapping the fixed sidebar div when I zoom the page over 100%.

Any ideas what the issue may be? Here is the css:



  
    

* {margin: 0px; padding: 0px;}

* 

*

 div#test {

    background-image:  url();

    margin-left : 14%;

padding-top : 40px;

padding-left : 32px;

     margin-right : auto;

    background-repeat: no-repeat;

    height: 200px;

    width: auto;

      line-height : 30px;

    text-align : left;

    font-size : 11px;

       font-weight : normal;

        font-family : Verdana, Arial, Helvetica, sans-serif; 

}



div#test_1 {

    background-image:  url(small_green_box.jpg);  

    margin-left : 157px;

padding-top : 14px;

padding-left : 16px;

     margin-right : auto;

    background-repeat: no-repeat;

  height: 90px;

  

    text-align : left;

    font-size : 13px;



}





a:link img {
border-style : none;
}
* {
margin : 0;
padding : 0;
}
* * div#test {
background-image : url();
margin-left : 14%;
padding-top : 40px;
padding-left : 32px;
margin-right : auto;
background-repeat : no-repeat;
height : 200px;
width : auto;
line-height : 30px;
text-align : left;
font-size : 11px;
font-weight : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
div#test_1 {
background-image : url(small_green_box.jpg);
margin-left : 157px;
padding-top : 14px;
padding-left : 16px;
margin-right : auto;
background-repeat : no-repeat;
height : 90px;
text-align : left;
font-size : 13px;
}
a:link img {
border-style : none;
}
body {    
margin : 0;
padding : 0;
height : 100%;
color : white;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : medium;
background-image : url(background.jpg);
background-attachment : fixed;
background : url(background.jpg) no-repeat fixed;
}
.invisible {
display : none;
}
#fixed {
font-size : 13px;
position : absolute;
top : 0;
margin-left : auto;
margin-right : auto;
width : 13em;
padding-left : 18px;
padding-top : 12px;
padding-bottom : 20px;
color : #006600;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-align : left;
border : 0 solid black;
}   
body > #fixed {   
position : fixed;
height : 100%;
}  
#content { 
position : relative;
margin-left : 17.6em;
margin-right : auto;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 6px;
padding-right : 6px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : normal;
line-height : 1.5;
text-align : center;
background : #ffffff;
color : #000066;
width : 617px;  
  
}     
h1 {
font-size : 2em;
text-align : center;
margin : auto;
font-weight : bold;
color : #000066;
width : 340px;
}
h2 {
font-size : 11px;
text-align : center;
margin : auto;
background : #ffffff;
color : #000066;
width : auto;
font-weight : normal;
padding-left : 2px;
}
h3 {
text-align : justify;
font-size : 12px;
width : 260px;
padding-left : 6px;
padding-right : 9px;
padding-top : 0;
font-weight : normal;
border : 0 solid #6633ff;
color : #000066;
font-style : italic;
}
h4 {
color : #0066cc;
text-align : center;
font-size : 13px;
font-weight : bold;
margin-top : 12px;
margin-bottom : 0;
padding-top : 0;
padding-bottom : 26px;
line-height : 30px;
}
h5 {
text-align : center;
color : #000066;
font-size : 11px;
font-weight : normal;
margin-top : 12px;
margin-bottom : 0;
padding-top : 0;
padding-bottom : 12px;
}
h6 {
text-align : center;
font-size : 14px;
font-weight : normal;
color : #000066;
background : #ffffff;
margin-top : 17px;
margin-bottom : 0;
padding-top : 0;
font-weight : bold;
}
a:link {
color : #0033cc;
text-decoration : none;
}
a:visited {
outline : none;
color : #0033cc;
}
a:active {
outline : none;
color : #0033cc;
}
a:hover {
color : #3399ff;
text-decoration : none;
}
a {
text-decoration : none;
}
#fixed a {
color : #0033cc;
padding-top : 3px;
margin : auto;
padding-bottom : 3px;
padding-right : 10px;
width : 112px;
text-align : left;
text-decoration : none;
font-size : 11px;
font-weight : normal;
}
#fixed a:hover {
color : #6699ff;
font-weight : normal;
}
#ffixed a {
color : #fffccc;
padding-top : 3px;
padding-bottom : 3px;
width : 112px;
text-align : left;
text-decoration : none;
background : #ffcc00;
font-size : 11px;
font-weight : normal;
}
#ffixed a:hover {
background : #ffffff;
}
div.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin : 0 auto;
font-weight : normal;
}
div.address img {
border : 0;
text-align : center;
}
.wrap {
width : 100%;
height : 100%;

clear:both; 
}
.scroll {


   position : relative;
   
   left : 31px;
color : #000066;
font-weight : normal;

font-size : 12px;
text-align : left;
width : 840px;
}

.scroll2 {


   position : relative;
   
   left : 83px;
color : #000066;
font-weight : normal;

font-size : 12px;
text-align : left;
width : 840px;

line-height : 20px;
}
.scroll23 {


   position : relative;
   
   left : 74px;
color : #000066;
font-weight : normal;

font-size : 12px;
text-align : left;
width : 840px;

line-height : 20px;
}

.scroll5 {


   position : relative;
   
   left : 57px;
color : #000066;
font-weight : normal;

font-size : 12px;
text-align : left;
width : 840px;
}
LI.list1 {
list-style : disc;
color : #0000cc;
}
LI.list2 {
list-style : square inside;
color : black;
background : #ffffcc;
}
.blacktext {
color : #000066;
font-size : 12px;
font-weight : normal;
}
.title1 {
margin : auto;
background : #ffffff;
color : #000066;
width : 399px;
padding-top : 2px;
padding-left : 6px;
padding-right : 12px;
font-size : 15px;
font-weight : normal;
text-align : center;
overflow : auto;
}
.title2 {
margin : auto;
background : #ffffff;
color : #003366;
width : 500px;
padding-right : 0;
font-size : 14px;
font-weight : normal;
text-align : center;
font-style : normal;
} 
img {
border-style : none;
vertical-align : middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}
#c2 a:link {
color : #3399ff;
text-decoration : none;
}
#c2 a:visited {
color : #3399ff;
}
#c2 a:active {
outline : none;
color : #3399ff;
}
#c2 a:hover {
color : #cccccc;
text-decoration : none;
}
#c2 a {
text-decoration : none;
outline : none;
}
#c3 a:link {
background-color : #ffffff;
color : #3399ff;
text-decoration : none;
}
#c3 a:visited {
background-color : #ffffff;
color : #3399ff;
}
#c3 a:active {
outline : none;
background-color : #ffffff;
color : #3399ff;
}
#c3 a:hover {
background-color : #ffffff;
color : #cccccc;
text-decoration : none;
}
#c3 a {
text-decoration : none;
outline : none;
}
.w3 {
position : absolute;
left : 18px;
width : 140px;
text-decoration : none;
outline : none;
padding-left : 0;
margin-left : 40px;
margin-right : 0;
margin-top : 14px;
border : 0 solid #000000;
}
.logo {
background : #ffffff;
color : #3399ff;
text-decoration : none;
outline : none;
width : 158px;
height : 76px;
   text-align : center;
padding-top : 3px;
padding-left : 6px;
padding-right : 7px;
padding-bottom : 0px;
  font-size : 18px;
  letter-spacing: 0px;
  font-weight : bold;
margin-top : 14px;
position : absolute;


left : 10px;
top : 22px;
}
      
.logo3 {

color : #000099;
text-decoration : none;
outline : none;
width : 160px;
letter-spacing: 0px;
 text-align : center;
  line-height : 24px;
  font-size : 12px;
margin-top : 0px;
position : relative;
padding-left : 1px;
font-weight : normal;

top : 24px;


padding-top : 14px;
}
form table {
margin : 0 auto;
}
h4.c2 {
text-align : center;
}
h3.c1 {
text-align : center;
}
a:hover {
background : none;
text-decoration : none;
}
a.tooltip span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip:hover span {
display : none;
position : absolute;
left : 310px;
top : 304px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;

height : 120px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 10px;
color : #ffffff;
line-height : 22px;
}
a.tooltip2:hover span {
display : inline;
position : absolute;
left : 0px;
top : 4px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;

height : 120px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 10px;
color : #ffffff;
line-height : 22px;
}
a.tooltip span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip2 span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip:hover span1 {
display : inline;
position : absolute;
left : 330px;
top : 330px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 0;
color : #ffffff;
line-height : 22px;
}
#table2 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
margin : 0 auto;
padding-left : 8px;
}
#table2 th {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
}
#table2 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
line-height : 25px;
}
#table4 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
margin : 0 auto;
padding-left : 8px;
}
#table4 th {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
}
#table4 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
line-height : 25px;
}
#table6 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 18px;
}
#table6 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table6 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}  

#table61 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 68px;
}
#table61 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table61 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}
 
   
   #table63 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 0px;
}
#table63 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table63 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}



#table8 {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 410px;
text-align : left;
padding-left : 50px;
margin : 0 auto;
line-height : 25px;
}
#table8 th {
font-size : 11px;
color : #000000;
font-weight : bold;
width : 205px;
text-align : left;
}
#table8 td {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 205px;
text-align : left;
}


#table18 {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 410px;
text-align : left;
padding-left : 0px;
 padding-right : 20px;
margin : 0 auto;
line-height : 25px;
}
#table18 th {
font-size : 11px;
color : #000000;
font-weight : bold;
width : 205px;
text-align : left;
}
#table18 td {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 205px;
text-align : left;
}

.pronunciation {
margin-left : 214px;
margin-right : auto;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 6px;
padding-right : 6px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
line-height : 1.5;
text-align : justify;
background : #ffffff;
color : #000066;
width : auto

}     


and I link to this ie hack



html {
    overflow: hidden;
}


body {
    height: 100%;
    overflow: auto;
}

Thanks.

Can we have some html to go with that to build a test case?

Sure.



<!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" xml:lang="en" lang="en">

<head>

<title>Profesor Particular Nativo Inglés / Private Native  English Teacher</title>






<link href="/border.css" rel="stylesheet" type="text/css"/>





  <link rel="stylesheet" href="css_9.css" />





<!--[if IE 6]>

<link rel="stylesheet" href="iehackjfk.css" type="text/css" />

<![endif]-->

<!--[if lte ie 6 ]>

<style type="text/css">





</style>

<![endif]--> 





</head>

<body>



<div class="wrap">



<div id="content">







  <br/> 

           <div class="title2">

     

   &nbsp;<img src="3doors.gif" width="141" height="69" alt=""/>   
  &nbsp;&nbsp; <img src="pro_8.gif" width="209" height="35" alt=""/>  

   

   

  <br/>  <br/>       

        

<h4>   Private English Classes in Manresa and Granollers<br/>

      </h4>
      
          
        
  
    
    
  <div class="scroll5">

  <table width= "390px">

<tr>
                                   
   
       
        <td style="color: #999999; font-size: 11px" colspan="2" align="center"><br/>    <img src="online1.gif" width="181" height="59" alt=""/>   
   

         

   <!--
Skype 'Add me to Skype' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:john_bcn?add"><img src="http://download.skype.com/share/skypebuttons/buttons/add_green_white_195x63.png" 

style="border: none;" width="195" height="63" alt="Add me to Skype" /></a>
 <a class="mailto" href="mailto:john@profesornativo.com" >Mail me </a> for prices of  Skype Classes and in-person classes.
      
          
           
</td>
</tr>
 
  
     
 
</table>

  </div>
<br/>    <br/>   
 

  <div class="scroll23"> 

    
<table>
    <tr>
        <td align="left"><p>Communicatve Method</p></td>
        <td align="left"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grammar and Conversation</p></td>
        
        </tr>  <tr>
        <td align="left"><p>EOI / Cambridge Exams</p></td>
        <td align="left"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Private and Group Classes</p></td>
         </tr>  <tr>
        <td align="left"><p>In-Company Classes</p></td>
        <td align="left"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Intensive Classes</p></td>
    </tr>
</table>

    
       </div>
 
 </div>
   
    <br/><br/><br/>   <br/>      
 <div id="table61">



      <table>

<thead>

<tr>

<th align="center" style="  padding: 3px; ;background : #3333ff; color: #ffffff" scope="col">Teacher</th>  
<th align="center" style="  padding: 3px; ;background : #3333ff; color: #ffffff" scope="col">Location</th> 
<th align="center" style="  padding: 3px; ;background : #3333ff; color: #ffffff" scope="col">Telephone</th>  
<th align="center" style="  padding: 3px; ;background : #3333ff; color: #ffffff" scope="col">Email</th>

</tr>

</thead> 

<tbody> 

<tr>

<td align="center" style=" padding: 3px; background : #eeeeee">John (Native)</td>   
<td align="center" style="  padding: 3px; ;background : #eeeeee">Manresa</td>   
<td align="center" style="  padding: 3px; ;background : #eeeeee">630 485 745</td>    
<td align="center" style=" padding: 3px; ;background : #eeeeee"><a class="mailto" href="mailto:john@profesornativo.com" >john@profesornativo.com </a></td>

 </tr>  

<tr> 

<td align="center" style="  padding: 3px; ;background : #eeeeee"> Anna (Bilingual) </td>   
<td align="center" style="  padding: 3px; ;background : #eeeeee">Granollers</td>   
<td align="center" style="  padding: 3px; ;background : #eeeeee">687 066  <span style="display:none;">_</span>431 </td>  
<td align="center" style="  padding: 3px; ;background : #eeeeee"> <a class="mailto" href="mailto:anna@profesornativo.com " >anna@profesornativo.com </a></td>  

</tr>

</tbody>

</table> 
      <br/>
                 
      <br/>   
    

</div>

 

   

        





    <br/><br/>
        




<!-- SiteSearch Google -->



<form method="get" action="http://www.google.com/search">

<table border="0">

<tr><td  valign="top" >

<input type="hidden" name="domains" value="http://www.elise.com"/>

<input type="text" name="q" size="22" maxlength="255" value=""/>

<a href="http://www.google.com/"><img src="http://www.google.com/logos/Logo_25wht.gif"  alt="Google"/></a>

<input type="submit" style="padding : 4px; vertical-align: top" name="sa" value="Search"/>



<input type="hidden" name="client" value="pub-5527714554151844"/>

<input type="hidden" name="forid" value="1"/>

<input type="hidden" name="ie" value="ISO-8859-1"/>

<input type="hidden" name="oe" value="ISO-8859-1"/>

<input type="hidden" name="safe" value="active"/>

<input type="hidden" name="cof" value="GALT:#660000;GL:1;DIV:#999999;VLC:336633;AH:center;BGC:FFFFFF;LBGC:993300;ALC:003366;LC:003366;T:000000;GFNT:666666;GIMP:666666;FORID:1;"/>



</td>

</tr>



</table>

        


  




<table>



<tr> 

<td>  &nbsp; <br />   </td>

</tr>   <tr>

<td>  &nbsp; <br />   </td>

</tr>   <tr>

<td align="center">


<a href="http://xyz.freelogs.com/stats/j/jkbbv/">
<img  alt="myspace hit counter" src="http://xyz.freelogs.com/counter/index.php?u=jkbbv&amp;s=ariali" /></a>
<script type="javascript"> src=http://xyz.freelogs.com/counter/script.php?u=jkbbv></script>
<br/><a style="font-size:12px" href="http://www.freelogs.com/" >counter</a>




</td>

</tr>





</table>

</form>



<div class="address">





<br/>

  <br/>





 John Kelly &copy; 2006 

</div>

</div>

</div>





<div id="fixed">





<br/>



<div class="logo">

       Native Teacher
          </div>
                  
          <div class="logo3">
       &nbsp;  &nbsp;&nbsp;    specialized in  <br/>   
           Private English Classes
         </div>
<br/>



<br/>



<br/>

<br/>



<br/>



<br/>

<br/>



<br/>

  <br/>

    
<br/>

  <br/>

<br/>

  <br/>

<br/>

  



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="test.htm"  class="tooltip2"> Free Level Test
<span style="font-size : 11px;  color : #000000;

 background-color : #33ff66; position : absolute; top : 124px; left : 3px; height : 90px; 
 width : 300px; padding-bottom : 26px;">  
  How many correct answers can you obtain? <br/>  0-8 (Beginner); 9-15 (Pre-Intermediate)
 <br/> 16-26 (Intermediate); 27-37 (Upper Intermediate)
  <br/> 38-48 (First Certificate); 49-56 (Advanced)
   <br/> 57-60 (Proficiency). Click the link!
  
     </span></a>


<br/>

<br/>



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="exercises.htm" >Free Exercises</a>

<br/>

<br/>





 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="pronunciation.htm">Pronunciation</a>



<br/>

<br/>



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="mailto" href="mailto:john@profesornativo.com" >Contact me</a>

    



<br/><br/><br/><br/><br/><br/><br/>



  

    

      <br/><br/><br/>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;  <br/> 



              

            <div class="w3">

                 

 <a href="http://validator.w3.org/check?uri=referer">

 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>



                   



<a href="http://jigsaw.w3.org/css-validator/check/referer">  <img style="width:88px;height:31px" 

src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />

</a>





 







  </div>     </div>

</body>

</html>



HTML and CSS both validate correctly. Thanks

Hi,

That code needs a lot of love and care :slight_smile:

In Ie9 the middle content appears to overlap on zoom but in fact what happens is the layout is centred on zoom and you will see the horizontal scrollbar has moved so you just need to slide it back to the left and the layout is then visible. There’s not much you can do about that.

You must ensure that the content container and the fixed container both have the same font-size to start with or the ems will scale at different rates. You can of course adjust the size of the inner elements as required.

You need a scrollbar on that fixed sidebar because all content below the fold is unreachable for fixed elements. Fixed sidebars seldom work well unless they are for small snippets.

Don’t use breaks to make space and try to get some structure into your page. You can’t start with an h4 heading as that’s like starting a book from the 4th chapter. use lists for lists of things and only use table for tabular data. Use paragraphs for paragraphs and don’t use breaks instead.

Ok, I’ll try to clean up the code. But as the site does seem t work fine in Google Chrome, why not in IE?

Is there some fix to make it work in IE? Thanks.

I just told you there was no problem with IE :slight_smile:

When IE zooms it move the horizontal scrollbar for you to keep the layout centered. You just need to move it back. Try it on any page and you will see its the same. It’s just that because you have a fixed element it doesn’t move out of the left of the viewport like a floated or static element would but you would still have to adjust the horizontal scrollbar on any zoomed page. That’s just the way that IE does it.

ok, but Zooming in with Chrome moves the content towards the right (doesn’t overlap the sidebar).

I mean Chrome moves ALL the page evenly to the right when zooming. I know what you mean about “correcting”

the page with the horizontal scroll, but the point is, is there a way to get IE to zoom the same as Chrome and Firefox?

I also tried removing the horizontal scroll with

overflow-x: hidden 

which renders fine in Chrome and Firefox, but makes things worse in IE. The site is profesornativo(dot)com Thanks

I’m afraid there’s nothing you can do.

This screenshot attached should make it clear what’s happening with the simplest of layouts.

Removing the horizontal scrollbar is not a good idea :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#outer {
	width:960px;
	margin:auto;
	min-height:500px;
	background:red;
	border:10px solid #000;
}
</style>
</head>

<body>
<div id="outer">
		<h1>Testing IE9 Zoom</h1>
</div>
</body>
</html>



ok, I see what you mean. So, now I want to redo the site… Thanks.