Jump to content

Zoom out/in problems


Fmdpa
 Share

Recommended Posts

On every one of my HTML pages, the alignment is perfect, that is, until you zoom out. The everything is spread unevenly over the page. Here's the sample code to one of my pages.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title></title> <link rel="Shortcut Icon" href="favicon.ico"> <!--external stylesheet:--><link href="styles/style.css" rel='stylesheet' type="text/css">  <script type="text/JavaScript">document.write("scripts/script1.js"); function changeImage(id, src){  document.getElementById(id).src = src;}</script></head> <body><!--BEGIN TAB TABLE--><table  style="text-align: left; height: 325px;" width="72%" border="0" cellPadding="0" summary="webpage tabs table">  <tr> <td width="47%" align="right" vAlign="bottom">   <a href="index.html">  <img border="0" height="75" width="150" alt="Home" title="Home" src= "GIF/t-home.gif" id="b1" onmouseover="changeImage('b1', 'GIF/t-home-mouseOver.gif')" onmouseout="changeImage('b1', 'GIF/t-home-mouseOut.gif')" /> </a>  <td width="20%" align="right" vAlign="bottom">      <a href="landscape.html">  <img border="0" height="75" width="150" alt="Landscape images" title="Landscape Images" src= "GIF/land.gif" id="b2" onmouseover ="changeImage('b2', 'GIF/land-mouseOver.gif')" onmouseout="changeImage('b2', 'GIF/land-mouseOut.gif')" /> </a>  <td width="20%" align="right" vAlign="bottom">   <a href="wildlife.html">  <img border="0" height="75" width="150" alt="Wildlife images" title="Wildlife images" src="GIF/wildlife.gif" id="b3"  onmouseover="changeImage('b3', 'GIF/wildlife-mouseOver.gif')" onmouseout="changeImage('b3', 'GIF/wildlife-mouseOut.gif')" /> </a>  <td width="10%" align="right" vAlign="bottom">   <a href="other.html">   <img border="0" height="75" width="150" alt="Misc. images" title="Other Images" src="GIF/active/other.gif" id="b4"  onmouseover="changeImage('b4', 'GIF/active/other-mouseOver.gif')" onmouseout="changeImage('b4', 'GIF/active/other-mouseOut.gif')" /> </a>  <td width="10%" align="right" vAlign="bottom">   <a href="tutorials.html">   <img border="0" height="75" width="150" alt="tutorials" title="Photography Tutorials" src="GIF/tutorials.gif" id="b5"  onmouseover="changeImage('b5', 'GIF/tutorials-mouseOver.gif')" onmouseout="changeImage('b5', 'GIF/tutorials-mouseOut.gif')" /> </a> </table> <!--END TAB TABLE-->  <!--begin image table--> <table style="height:250px;"align="center" width="80%" border="0" cellPadding="0" cellSpacing="20" summary="image table" id='thephoto'> <div id='photoholder'> <tr>   <td width="10%" align="center" vAlign="top">    <a href="ST1.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST1.jpg" id="b6" onmouseover=   "changeImage('b6','thumb/ST1.jpg')" onmouseout="changeImage('b6','thumb/fade-ST1.jpg')"/>  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST2.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST2.jpg" id="b7" onmouseover=   "changeImage('b7','thumb/ST2.jpg')" onmouseout="changeImage('b7','thumb/fade-ST2.jpg')" />  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST3.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST3.jpg" id="b8" onmouseover=   "changeImage('b8','thumb/ST3.jpg')" onmouseout="changeImage('b8','thumb/fade-ST3.jpg')" />  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST4.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST4.gif" id="b9" onmouseover=   "changeImage('b9','thumb/ST4.gif')" onmouseout="changeImage('b9','thumb/fade-ST4.gif')" />  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST5.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST5.gif" id="b10" onmouseover=   "changeImage('b10','thumb/ST5.gif')" onmouseout="changeImage('b10','thumb/fade-ST5.gif')" />  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST6.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST6.gif" id="b11" onmouseover=   "changeImage('b11','thumb/ST6.gif')" onmouseout="changeImage('b11','thumb/fade-ST6.gif')" />  </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="ST7.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST7.gif" id="b12" onmouseover=   "changeImage('b12','thumb/ST7.gif')" onmouseout="changeImage('b12','thumb/fade-ST7.gif')" />  </a>  <\/td>       <td width="10%" align="center" vAlign="top">    <a href="ST8.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Star Trails" src="thumb/fade-ST8.gif" id="b13" onmouseover=   "changeImage('b13','thumb/ST8.gif')" onmouseout="changeImage('b13','thumb/fade-ST8.gif')" />  </a>   <\/td>    <\/tr>  <!--END FIRST IMAGE ROW, BEGIN SECOND ROW-->  <tr>   <td width="10%" align="center" vAlign="top">     <a href="BB1.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Abundant Blueberry Bush" src="thumb/fade-BB1.gif" id="b14"   onmouseover="changeImage('b14','thumb/BB1.gif')" onmouseout="changeImage('b14','thumb/fade-BB1.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="HF1.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF1.gif" id="b15" onmouseover=  "changeImage('b15','thumb/HF1.gif')" onmouseout="changeImage('b15','thumb/fade-HF1.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="HF2.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF2.gif" id="b16" onmouseover=  "changeImage('b16','thumb/HF2.gif')" onmouseout="changeImage('b16','thumb/fade-HF2.gif')" />   </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="HF3.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF3.gif" id="b17" onmouseover=  "changeImage('b17','thumb/HF3.gif')" onmouseout="changeImage('b17','thumb/fade-HF3.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="HF4.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF4.gif" id="b18" onmouseover=  "changeImage('b18','thumb/HF4.gif')" onmouseout="changeImage('b18','thumb/fade-HF4.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="HF5.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF5.gif" id="b19" onmouseover=  "changeImage('b19','thumb/HF5.gif')" onmouseout="changeImage('b19','thumb/fade-HF5.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="HF6.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Hoarfrost Crystals" src="thumb/fade-HF6.gif" id="b20" onmouseover=  "changeImage('b20','thumb/HF6.gif')" onmouseout="changeImage('b20','thumb/fade-HF6.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="OI1.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Foggy Driveway" src="thumb/fade-OI1.gif" id="b21" onmouseover=  "changeImage('b21','thumb/OI1.gif')" onmouseout="changeImage('b21','thumb/fade-OI1.gif')" />   </a>     <\/td>  <\/tr>    <!--END TABLE-ROW NO.2; BEGIN NO.3-->    <tr>  <td width="10%" align="center" vAlign="top">    <a href="OI2.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Autumn Aspen Trees in Warm Light" src="thumb/fade-OI2.gif" id="b22"   onmouseover="changeImage('b22','thumb/OI2.gif')" onmouseout="changeImage('b22','thumb/fade-OI2.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="OI3.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Birch Tree Shadow in Winter" src="thumb/fade-OI3.gif" id="b23"   onmouseover="changeImage('b23','thumb/OI3.gif')" onmouseout="changeImage('b23','thumb/fade-OI3.gif')" />   </a>  <\/td>     <td width="10%" align="center" vAlign="top">    <a href="OI4.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Birch Tree Forest in Golden Sunlight" src="thumb/fade-OI4.gif" id=  "b24"   onmouseover="changeImage('b24','thumb/OI4.gif')" onmouseout="changeImage('b24','thumb/fade-OI4.gif')" />   </a>  <\/td>    <td width="10%" align="center" vAlign="top">    <a href="OI5.html#photoholder">  <img border="0" height="100" width="100" alt="Image Thumb" title="Birch Tree Forest in Golden Sunlight" src="thumb/fade-OI5.gif" id=  "b25"   onmouseover="changeImage('b25','thumb/OI5.gif')" onmouseout="changeImage('b25','thumb/fade-OI5.gif')" />   </a>  <\/td>	  <\/tr> </div></table></body></html>

Sorry that the indents didn't go through when I copied it. Here's the CSS stylesheet:

   body {   height:2000px;   background:#000000 url('SRC/emp3.jpg') no-repeat top;	  margin-middle; }  h3 { color:white; text-align:justify; position:absolute; left:300px; top:850px; width:500px; }  p { font-family:Tempus Sans ITC; font-size:18px; color:white; text-align:justify; position:absolute; left:300px; top:900px; width:500px; }  hr { position:absolute; text-align:center; top:900px; left:300px; width:500px; }  a:link,a:visited { text-decoration:none; color:#757575 } a:hover,a:active { text-decoration:none; color:#cbcbcb }

How do I lock the elements of the page in place, when the magnification is not 100%? Do I have to define a body width?

Link to comment
Share on other sites

100% is always relative. If you have a body with 100% width, it will be 100% whether the browser is maximized or shrunk in half, it will automatically take up the full available width (100%). Having percentages on everything means everything will always shift when the browser size changes. It is always best when dealing with percentages to have containing element for everything to go into, and set some sort of min/max width setting on it to keep it from going to the extremes when various users browse your page.I would actually reconsider the way you are laying out your page, honestly. Tables + non-strict DTD + absolute positioning + percentages = developers nightmare.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...