Div position when zooming

smallzoo · Apr 4th, 2008, 10:22

For a variety of reasons I wanted to let users zoom in and out of my web page
Bit when I zoom into the web page some of the divs zoom in and out correctly and stay aligned to each other but two of the divs zoom in/out but do NOT remain in the same position relative to the previous divs. !!!!
I need to get this principle working in both IE and Firefox
can anyone help
THANKS
Peter
Web page

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="HomeHeader" runat="server">
<title>BLAH BLAH</title>
<link  href="css/test.css" rel="stylesheet" type="text/css" media="all"  id="colors" />
</head>
<body>
<div id="wrapper">
    <form id="home" runat="server" >
    <div id="header">
      <table>
      <tr><td id="farmpic"><img  class="farmexpand"  src="http://www.webforumz.com/images/farmland_top.jpg"  alt="Farm Picture" /></td></tr>
      </table>
 </div>
 <div id="content">
  <div class="panel1">
      <img align="left" class="whatexpand" src="http://www.webforumz.com/images/whatwedo.jpg" alt="Main Image" />
       <div id="introcol1">
           <h1>Welcome to TEST</h1>
           <p>blah blah blah<br />blah blah<br />blah blah
                    </p>
           <h1>Need Further Details..</h1>
           <p>further blah blah<br /><br /></p>
                </div>
        </div>
     <div class="smallpanel" >
   <p>
    Lots of blah here.. this does not seem to stay on the same place<br /> relative to the last paragraph
            </p>
     </div>
     <div id="footer">
      &copy; Copyright 2008 blah blah.. This doesnt seem to stay either
        </div>
 </div> <!-- end #content -->
    </form>
  </div>
</body>
</html>
</code>
CSS
<code>
 * {
  margin:0;
  padding:0;
 }
 body {
  background-color:#fff;
  background: url(../images/whiteblueblend.jpg) bottom left fixed repeat-x #fff;  /*Fixed property 'fixes' the body height issue in FF 1.5 */
  line-height:120%;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:1em;
 }
 #wrapper 
 {
  width: 58em; 
  #width: 52em; 
  min-height : 42.5em; 
  #min-height : 40em; 
  #width: 52em; 
  margin: 0.5% auto ;
  padding:0 0 0 0;
  background-color:#ffffff;
  font-size:0.92em; 
 }
 #header {
  background-color:#ffffff;
 }
 
  #header img {
   border:none;
  }
 #logo {
  width: 58em;
  #width: 52em;
 }
 #farmpic {
  width: 58em;
  #width: 52em;
  height:1em;
 }
 img.logoexpand {
  width: 16em;
  #width: 14em;
 }
 
 img.farmexpand {
  width: 58em;
  #width: 52em;
 }
 img.whatexpand {
  width: 12em;
  #width: 12em;
 }
 
 #introcol1 {
  width: 39em;
  #width: 33em;
  position:relative;
  left:2em;
  overflow:auto;
 }
 #introcol2 {
  width: 34em;
  #width: 33em;
  position:relative;
  left:10em;
 }

 #content {
  width: 58em; 
  min-width:58em;
  #width: 52em; 
  #min-width:52em;
  min-height:24em;
  #min-height:20em;
  clear:left;
  margin:0 auto;
  text-align:center;
 }
  #content ul {
   margin:0.5em 2em 0.5em 2em;
   clear:left;
  }
   #content ul li {
   
   }
  #content dl {
   clear:left;
   padding-top:1.3em;
  }

   #content div.panel1 {
    width:52.5em;
    #width:48em;
    text-align:left;
    left: 1em;
    position:relative;
   }
   #content div.panel1 h1 {
    font-size:1.1em;
    text-align:left ;
    color:Red;
   }

   #content div.panel1 p {
    font-size:1.0em;
    #font-size:0.9em;
    text-align:left;
   }
   
   #content div.smallpanel {
    width:55em;
    #width:50em;
    padding-left:1em;
    text-align:left;
    position:relative;
    top:1em;
   }
   #content div.smallpanel p {
    font-size:1.2em;
    #font-size:1.1em;
    text-align:left;
    left: 1em;
   }
   
   
  
 #footer {
  width:65em;
  #width:65em;
  font-size:1em;
  border-top:1px solid #e2e2e2;
  position:relative;
  top:2em;
  }

dancave · Apr 22nd, 2008, 12:25

You are really looking at a javascript solution here i think.

browsers have there own built in text reszing and zoomin gfunctions which you cannot control, these are the purely for the user.

you can use javascript to capture events and alter CSS properties on the fly which would give you your desired effect. i however am rubbish at JavaScript so cant help. Sorry

aso186 · Apr 22nd, 2008, 13:35

smallzoo, I presume you're referring to the built-in zoom feature in IE7? (as dancave mentioned)

Whilst rather handy, this feature is still way behind the likes of Opera's zoom facility, and you can never guarantee that IE7 will handle your layout correctly when zooming.

A javascript alternative might be more reliable, but I can only guess that'll be pretty hard to code (especially if you want to get the same effect as IE7's native zoom).

dancave · May 6th, 2008, 08:11

Agreed