View Single Post

smallzoo · #1 (**permalink**) 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;
  }