Layer <div> position changes when screen resolution changes

Hi

I have a <div> tag placed just after the <body> tag, so that i want the exact position of the image at a particular place say :left:16px; top:8px
This position setting are for screen resolution 800X600.

The problem is when i increase the screen resolution to an higher one..the position changes and the image appears outside.

Is there any example in javascript or css to position my layer in the same position irrespective of my screen resolution?

Code :
<body leftmargin="0" topmargin="0">
<div id="imgLayer" style="position:absolute; left:16px; top:8px; width:131px; height:20px; z-index:1"><img src="images/myImage.gif" width="131" height="20">
</div>

Here the width, height and image width & height keeps changing according to the different pages i load.
To summarise :
in the <div> tag the position, left, top & z-index values will be constant.
What change is the the width, height and in <img> tag the image name, width and height.

Any work around???
GajarajRAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dorwardCommented:
With that absolute positioning, you should not be getting the image moving in relation to the top left corner of the browser window. Most likely it is moving in relation to something else on the page, but without seeing the context its very hard to tell. Try posting a URI.
0
pbb72Commented:
Which browser brand and version are you using?  And if you press reload for the page in a new resolution, does the DIV then go to the correct place?  I know Internet Explorer has some sizing issues...
0
GajarajRAuthor Commented:
I am using IE 6.0.
No if i press the refresh button after changing the resolution the DIV does not goto the correct place.

For ur ref. i have pasted the code below:

<body leftmargin="0" topmargin="0" onload="javascript:{if(parent.frames[0]&&parent.frames['menuFrame'].Go)parent.frames['menuFrame'].Go()}">
<div id="Layer1" style="position:absolute; left:16px; top:8px; width:164px; height:20px; z-index:1"><img src="images/contentLabel.gif" width="164" height="20"></div>
<script language="JavaScript1.2">mmLoadMenus();</script>
<!-- <table width="100%" border="0" align="center"> -->
<table width="767" border="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td height="200" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="590" height="253" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr>
                <td width="587" height="250" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <!--DWLayoutTable-->
                    <tr>
                      <td width="11" height="250" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
                      <td class="contentBodyStyle" width="565">&nbsp;
                          <p class="paraStyle">some content here</p>
                          <p class="paraStyle">some content here </p>
                          <p class="paraStyle">some content here</p>
                          <p class="paraStyle">some content here</p>
                        </div></td>
                      <td width="11" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
                    </tr>
                  </table></td>
                <td width="1" valign="top" background="images/Line_V_tile.gif"><IMG
            height=2 alt=""
            src="images/Line_V_tile.gif" width=1
            border=0></td>
                <td width="2">&nbsp;</td>
              </tr>
              <tr>
                <td height="3"></td>
                <td></td>
                <td></td>
              </tr>
            </table></td>
          <td width="171" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr>
                <td width="171" height="290" valign="top"><img src="images/contentManImg.jpg" width="170" height="287"></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF7100">
        <!--DWLayoutTable-->
        <tr>
          <td class="footerHBINameStyle">Copyright &copy; HBI Software Pvt. Ltd / + 91 80 5324775</td>
          <td class="footerEmailStyle">contact@hbi-software.com</td>
          <td class="footerViewStyle">Site Best viewd in 800 X 600 resolution</td>
        </tr>
      </table></td>
   </tr>
</table>
</body>
</html>

Any suggestions?
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

pbb72Commented:
No changes occur for me when I change resolution.  But I see that you are calling a function Go and a function mmLoadMenus.  Could one of those be reading the screen resolution and change objects on your page?
In what way does the DIV change?  Does it get larger/smaller?  Does it move left/right/up/down?  Maybe you could put 2 screenshots somewhere so that we can see it.
0
GajarajRAuthor Commented:
- As i told u that i am using frames (2 frames - top & bottom) where i have my navigation bar with drop down menus on top frame and the bottom frame has the contents and here the drop down menus display.

So that is the reason i am using mmLoadMenus and go function.

DIV is moving towards the left when i increase the resolution to 1024.
How can i send u the screen shots??
0
pbb72Commented:
yes, can you send me the screenshots?  send them to ee(at)pbb.dds.nl, replacing the (at) with @
0
GajarajRAuthor Commented:
Got over the problem i have put the image inside <TR>, simple solution insteading of doing R & D...on the issue.

Now the problem is sorted out.

Thankx for the help.
0
Asta CuTechnical consultant & graphic designCommented:
GajarajR,
No comment has been added lately (103 days), so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area for this question:

RECOMMENDATION: Accept GajarajR's answer http:#9700123 and Refund

Please leave any comments here within 4 days.

-- Please DO NOT accept this comment as an answer ! --


Thanks,
astaec
EE Cleanup Volunteer
0
SpazMODicCommented:
PAQed, with points refunded (50)

SpazMODic
EE Moderator
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.