I have a website where on one page I used nested tables to position elements and on another page I used <div> tags to position elements. I did this for testing purposes.
On all webpages, there is a background image 900x600 set in the css file.
On the far left of my web page, I have links displaying vertically at different locations down the page.
ex: about us
coming events
contact us
blog
It works out fine both using the nested table option and <div> positioning.
However, I know that the <div> is the way to go.
My customer is complaining that when he clicks the “Zoom Out” menu option in his browser, the menu tags (about us, etc.) move away from their expected position in the web page.
Is there a way to fix this? If so, could someone point me to a tutorial I could review?
Using IE8, it’s completely chuggered. At zoom=100%, the text doesn’t line up with the background, and as you zoom out it gets worse. You have to zoom in to 125% to get everything to line up right. (Note, this is on my computer with my settings. It’s very likely to vary from one computer to another).
Your main problem is that your foreground and background are totally divorced from each other. There’s nothing other than lick, spit, a wing and a prayer holding them together. Using a layout table won’t be helping matters, and using nested layout tables went out of fashion sometime before the Reformation, but essentially, if you want to line background images up with text, you have to make each background image a background image to the text it is a background to. You can’t just line them up in your browser and assume they’ll line up for everyone else.
(OK, with absolute positioning, you might “get away” with that, but you’re likely to store up a whole load of other problems going down that route).
To use absolute positioning and keep everything lined up correctly the absolute positioned elements need to be inside relative positioned elements - that way they maintain their position relative to those relative elements. Having it offset by zero from the relative element would be the only offset that would definitely continue to align correctly after the zoom is changed though.
For example the following will always place the ‘z’ on top of the ‘a’ regardless of how the page is laid out and whatever zoom you use.