Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Layer <div> position changes when screen resolution changes

Posted on 2003-11-04
9
Medium Priority
?
879 Views
Last Modified: 2010-05-18
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???
0
Comment
Question by:GajarajR
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 9685414
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
 
LVL 1

Expert Comment

by:pbb72
ID: 9685830
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
 

Author Comment

by:GajarajR
ID: 9686524
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Expert Comment

by:pbb72
ID: 9687763
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
 

Author Comment

by:GajarajR
ID: 9692238
- 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
 
LVL 1

Expert Comment

by:pbb72
ID: 9696999
yes, can you send me the screenshots?  send them to ee(at)pbb.dds.nl, replacing the (at) with @
0
 

Author Comment

by:GajarajR
ID: 9700123
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
 
LVL 27

Expert Comment

by:Asta Cu
ID: 10397745
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
 

Accepted Solution

by:
SpazMODic earned 0 total points
ID: 10426451
PAQed, with points refunded (50)

SpazMODic
EE Moderator
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

596 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question