Skip navigation
xjmsinlax
Currently Being Moderated

Huge spaces between tables

Aug 4, 2012 1:07 AM

I cannot seem to eliminate the huge space between tables.  I have set the td to vertical align top but it seems to make no difference.  Example: http://blandheritage.org/GENEALOGY/numberingsystem.html

 
Replies
  • Currently Being Moderated
    Aug 4, 2012 4:59 AM   in reply to xjmsinlax

    There are no tables on that page.  Everything is either an absolutely positioned div, or a paragraph contained within an absolutely positioned div.  The huge space is caused by your (INLINE) positioning of the apDiv12 -

     

    <div id="apDiv12" style="position: absolute; left: 10px; top: 1016px; width: 994px; height: 1452px; z-index: 10">

     

    I count 90 such absolutely positioned elements on your page, which could be the poster child for why one shouldn't use absolute positioning as a primary layout method (http://www.apptools.com/examples/pagelayout101.php).  Just use your browser text size controls to increase the browser's display of text a couple of ticks and see what happens to your layout (in Safari I just use Command-+).  Two ticks, and the contents have overlapped so much that the page becomes unreadable.  I recognize it my be too late to inform you of this fundamental mistake in your approach on this page, but if I were you, I'd fix it.  Who would ramp up the text size like this?  Anyone with vision problems who may have their browsers already set at a large text display for readability - you have no control over that....

     

    The good news is that this is the only page I see on your site that is built this way - all other pages are table-based, and while that approach is also uber-retro, at least it doesn't suffer from this potential overlapping problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 5:02 AM   in reply to MurraySummers

    By the way - if you would change that line of code from this -

     

    <div id="apDiv12" style="position: absolute; left: 10px; top: 1016px; width: 994px; height: 1452px; z-index: 10">

     

    to this -

     

    <div id="apDiv12" style="position: absolute; left: 10px; top: 1016px; width: 785px; height: 1452px; z-index: 10">

     

    You would get rid of the huge space, but you would also make your page MORE vulnerable to the text resize gotcha, since the two text regions are now much closer vertically they will overlap sooner.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points