SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Zoom Out Question

    Hello,

    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?

    K

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Can you post links so we can see what is happening? There could be a few things going on.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for answering.
    Here is the link for my nested tables.
    - The Illusionist - Lucas Wilson

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Using Opera, it works absolutely fine.

    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).

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.

    <div style="position:relative">
    <div style="position:absolute;left:0;top:0">a</div>
    <div style="position:absolute;left:0;top:0">z</div>
    </div>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •