Jump to content

Zoom out/in problems

Fmdpa

By Fmdpa
in CSS

Recommended Posts

Fmdpa Dedicated Member

Fmdpa

Posted
Posted

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
thescientist w3schools Guru

thescientist

Posted
Posted

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...