Text doesn't stay put. It adjusts itself according to browser resolution.

[webguy_070]

Hello. I have a problem with my site and hope you can help me. My site: http://1clix.net/testing/ Please refer to the "Hiring Local Residents in" section. If your browser resolution is 1920x1080, then you'll see that the "City, State" part after "Hiring Local Residents in" is aligned perfectly. However, if you're browsing that site in any resolution that's not 1920x1080, you'll see that the "City, State" text adjusts itself relative to the browser resolution. I do not want this. I want to make it so that no matter the browser resolution, the text stays fixed after the "Hiring Local Residents in" section. You can use the following site to see how my website looks in different resolutions to better understand my problem: http://www.yournew.c...lution_test.cfm Here is the part of the code for the "City, State" text.

<div style="position:fixed; left:803; top:282; font-family:Arial; font-size:15px; color:#5e71d9; text-decoration:underline;"><a href="#" target="_blank"><strong>  <script language="JavaScript">document.write(geoip_city());</script>, <script language="JavaScript">document.write(geoip_region());</script></a></strong></div>

You can see I'm using the "position" element. I've tried all 4 (static, absolute, fixed, relative) but the text still moves around depending on the browser size. Feel free to view my page source. I hope you can help me with this. Your time is greatly appreciated. Thank you.

[Ingolme]

I don't see it adjusting itself. It's staying in the exact same position while the rest of the page is moving. The text does seem to wrap when the browser window doesn't fit the text, which can be solved by setting "white-space: nowrap" in the CSS of the element.

[webguy_070]

I don't see it adjusting itself. It's staying in the exact same position while the rest of the page is moving. The text does seem to wrap when the browser window doesn't fit the text, which can be solved by setting "white-space: nowrap" in the CSS of the element.

Ingolme, what browser resolution are you viewing the page in? If you're viewing it in 1920x1080, then it will be fine. But if you view it in a resolution of say 800x600, you'll see that the "City, State" is in the incorrect spot. Edited September 28, 2012 by webguy_070

[Ingolme]

I viewed it in multiple resolutions. You told the element to be 803 pixels from the left of the screen. In an 800x600 screen 803 pixels is out of view. This isn't a flaw of CSS, it's a flaw in your design. You should actually want this element to move, not to stay in one place. Given that the rest of your page seems to be sliced up images, I'd consider changing that so that you put the geolocation text within the rest of the text and allow the page to flow normally.

[webguy_070]

I viewed it in multiple resolutions. You told the element to be 803 pixels from the left of the screen. In an 800x600 screen 803 pixels is out of view. This isn't a flaw of CSS, it's a flaw in your design. You should actually want this element to move, not to stay in one place. Given that the rest of your page seems to be sliced up images, I'd consider changing that so that you put the geolocation text within the rest of the text and allow the page to flow normally.

I see. It is because of the "left:" messing it up. What would be the best way to make it stay in the same spot across all browser resolutions? The geolocation is not the only text I will be placing, I need a permanent solution to this.

[Ingolme]

Well, given your particular situation, if you don't want to rethink your page code and structurePut the text in this part:

<td rowspan="10" colspan="2" style="position: relative"><img width="321" height="157" alt="" src="images/search_04.gif">  <div style="position: absolute; left: 100px; top: 100px;">	    <!-- All the script tags and other things go in here -->  </div></td>

Your entire page could be done without a single image if you made it properly. Images cause delay in page loading, the more images there are the longer the delay will be.