2 Replies Latest reply on Feb 12, 2010 2:45 AM by Brad Messer

    Why do my AP Divs shift position in browsers?

    Brad Messer Level 1

      I have yellow-highlighted a few words in the right column of this page http://bradmesser.com/index-working-B.html. (The highlight of "snow damage" in left column is a graphic) The text AP Div's Z Index is 3. I placed two AP Divs with Zs of 2 and 1, filled 'em with yellow and dragged them behind the text. The highlights show up in the right places when viewed in Safari 404, Firefox 3.6 and (ugh) IE in Windows. Now scroll down to the screenshot of my page as it appears in DW CS4. Why did I have to place the two highlight divs BELOW where they should go, in order to have them display properly in browsers? And why do you think the bottom highlight had to be so much farther down than the top one in order to display right? I'm sitting here feeling pretty dumb right now. Appreciate any help.

        • 1. Re: Why do my AP Divs shift position in browsers?
          John Waller Adobe Community Professional & MVP

          APDivs don't shift. They're absolutely positioned at the coordinates set in the code.

           

          Web page content shifts according to margins and padding applied to the various HTML tags, the size of the browser window and browser defaults in the browser viewport.

           

          This gives the illusion that the APDivs have shifted when, in fact, the page content is shifting and reflowing behind them.

           

          You have tweaked the position of the APDivs so that they sit exactly above where the content appears in the browsers.

           

          Compare the difference in whitespace between the first and second paras in the browser and DW Design View. "Insurance adjusters..." begins further down in the browser than it does in DW. Hence, the APDiv over "Public adjusters..." needs to be lower to match the coordinates where those words appear.

           

          If you want to highlight words like this, forget APDivs.

           

          Wrap the text to be highlighted with <span>...</span> tags and set the highlight rule on the span tags. The highlight will then follow the text wherever it may be on the page.

          • 2. Re: Why do my AP Divs shift position in browsers?
            Brad Messer Level 1

            Thank you, John. I'd never come across the highlight option. Went on to find a super simple guide at http://www.tek-tips.com/viewthread.cfm?qid=1516271&page=6 and it worked for me. Appreciated!