Question

Been banging my head against this one for a while…

<div id="pager" style="top: 5px; position: relative; " class="pager" >
    <form>
        <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first"/>
        <img src="http://tablesorter.com/addons/pager/icons/prev.png" alt="prev" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="http://tablesorter.com/addons/pager/icons/next.png" alt="next" class="next"/>
        <img src="http://tablesorter.com/addons/pager/icons/last.png" alt="last" class="last"/>
        <select class="pagesize">
            <option selected="selected" value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </form>
</div>

When I actually load up the page and do a quick View Source, here’s what I see:

<div id="pager" style="top: 494px; position: absolute; " class="pager">

The table itself has nothing special, though it does fall under <div id="main">

<table id="runResults" class="tablesorter">

The CSS:

 table 
{
  border: solid 1px #000000;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #000000;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #000000;   
}

Pager is not defined in my CSS, nor are any div elements in general.

This is just a pagination plugin for a table on my site, and it’s rather annoying because obviously the number of entries is not always an integer multiple of 10… meaning that the positioning of the pager goes way off the page when there are only 1 or 2 overflow entries.

How do I make the pager div actually position itself relative to the table?

EDIT: Whenever I select the various options in “pagesize”, the table resizes properly and the div follows as appropriate… if I navigate to the last page (with 2 overflow entries) and then resize, the div goes to the right position but when I change pages without resizing, the div stays where it was and thus it shows up near the top of the table.

EDIT2: I decided to dig around in the jQuery pager plugin I was using, since my own code seemed to be fine. Here’s what I found:

function fixPosition(table) {
            var c = table.config;
            if (!c.pagerPositionSet && c.positionFixed) {
                var c = table.config, o = $(table);
                if (o.offset) {
                    c.container.css({
                        top: o.offset().top + o.height() + 'px',
                        position: 'absolute'
                    });
                }
                c.pagerPositionSet = true;
            }
        }

Turns out the jQuery was forcing the div’s container to a specific position. All I had to do was change

top: o.offset().top + o.height() + 'px',
position: 'absolute'

to

top: '5px',
position: 'relative'

Answer 1

Sounds to me like some Javascript is running and making changes to your page. If you disable javascript, reload your page and view source – o you see your version of the HTML. If so, you ‘just’ need to track down the javascript 😉