CSS for formatting pagination links

[ArizonaJohn]

Hello,

 

Below is the generated HTML for some pagination links, and also the CSS that is applied to it. For Page 1, the links appear to be 940 px from the top of the screen, which is what I want. However, when I click on a page besides page 1, the links appear to be 1880 px below the top of the screen. I would like the links to always be 940 px from the top of the screen regardless of which pagination link the user is on. What should the CSS be to accomplish this?

 

Thanks in advance,

 

John

 

The generated HTML:

 

<div class='pages'>[<b>1</b>] </div> <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>2</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=3&find=best book ever&searching=yes&search=search' class='linksp'>3</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=4&find=best book ever&searching=yes&search=search' class='linksp'>4</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>></a></div>  <div class='pages'><a href='/booksearch.php?currentpage=7&find=best book ever&searching=yes&search=search' class='linksp'>>></a></div>  

 

The CSS:

 

.pages
    {
overflow: hidden;
display: block;
float: left;
margin: 4px;
margin-top: 940px;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif ;
    }		

a.linksp:link {
	color: #000000; text-decoration: none;
	text-align:center;
margin-left:10px;
margin-right:10px;
    margin-bottom:0px;
    padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
	}

a.linksp:visited {
	color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
    margin-bottom:0px;
    padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}

a.linksp:active {
	color: #000000; text-decoration: none; 
text-align:center;
margin-left:10px;
margin-right:10px;
    margin-bottom:0px;
    padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}

a.linksp:hover {
	color: #000000; text-decoration: none; 
background-color: #FFFF00;
text-align:center;
margin-left:10px;
margin-right:10px;
    margin-bottom:0px;
    padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}

[haku]

Nothing in the code you showed us is doing that. However, since you have the top margin of 940 pics on there, and it's getting pushed lower, it must mean that the margin is pushing up against the bottom of some other element.

 

I can tell you this much - whatever you are doing, there is a better way to do it. You shouldn't ever need a margin of 900 px on anything.