CSS Help Please

[cssguy]

Hello,

I'm trying to get my pagination to be flush against the very top of the page.


Here is my layout code:

<div class=TopBar id=TopBar>
  <div class=Pages>
    <div class=Paginator>

<span class=AtStart>&lt; Prev</span>

<span class=this-page>1</span> 

<a href="">2</a> 
<a href="">3</a>
<a href="">4</a>  
<a href="">5</a> 
<a href="">6</a>
<a href="">7</a>

<a class=Next href="">Next &gt;</a> 

</div>
  </div>
    </div>

Here is my css code... where the problem lies:

.TopBar {
	BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(/images/dotted.gif); PADDING-BOTTOM: 1px; BACKGROUND-REPEAT: repeat-x; TEXT-ALIGN: center
}


A:link {
	COLOR: #0063dc; TEXT-DECORATION: underline
}
A:visited {
	COLOR: #2e67c7; TEXT-DECORATION: underline
}
A:hover {
	BACKGROUND: #0063dc; COLOR: #ffffff; TEXT-DECORATION: none
}
A:active {
	BACKGROUND: #0259c4; COLOR: #ffffff; TEXT-DECORATION: none
}
.Pages {
	MARGIN-TOP: 20px; MARGIN-BOTTOM: 20px; TEXT-ALIGN: center
}
.Paginator {
	FONT-SIZE: 12px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; PADDING-TOP: 10px
}
.Paginator A {
	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
.pageList .this-page {
	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
.Paginator A:visited {
	BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
.Paginator .AtStart {
	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; COLOR: #aaa; MARGIN-RIGHT: 20px; PADDING-TOP: 2px
}
.Paginator .Prev {
	BORDER-RIGHT: #ddd 2px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 2px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 2px solid; MARGIN-RIGHT: 20px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 2px solid
}
.Paginator .break {
	BORDER-RIGHT: medium none; PADDING-RIGHT: 6px; BORDER-TOP: medium none; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; BORDER-LEFT: medium none; PADDING-TOP: 2px; BORDER-BOTTOM: medium none; TEXT-DECORATION: none
}
.Paginator .Next {
	BORDER-RIGHT: #ddd 2px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ddd 2px solid; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; MARGIN-LEFT: 20px; BORDER-LEFT: #ddd 2px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 2px solid
}
.Paginator .AtEnd {
	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: #fff; PADDING-BOTTOM: 2px; MARGIN-LEFT: 20px; COLOR: #aaa; PADDING-TOP: 2px
}
.Paginator .this-page {
	PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 13px; BORDER-LEFT-COLOR: #999; BACKGROUND: #fff; BORDER-BOTTOM-COLOR: #999; PADDING-BOTTOM: 2px; VERTICAL-ALIGN: top; COLOR: #ff0084; BORDER-TOP-COLOR: #999; PADDING-TOP: 2px; BORDER-RIGHT-COLOR: #999
}
.Paginator A:hover {
	BORDER-LEFT-COLOR: #036; BACKGROUND: #0063dc; BORDER-BOTTOM-COLOR: #036; COLOR: #fff; BORDER-TOP-COLOR: #036; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #036
}
.Pages DIV.Results {
	MARGIN-TOP: 8px; FONT: 11px/15px Arial, Helvetica; COLOR: #aaa; TEXT-ALIGN: center
}

The code works, it's just that I want everything to be at the very very top of the page, and don't know how to do this without scruing it up.

Thanks for your help.

[Tyssen]

Can you provide a link to the page or a more complete version of your code?

[cssguy]

http://www.cheapwebhosters.com/test.htm

I just want what you see there to be at the very top of the screen.

[Tyssen]

Set the margin and padding of the body to 0 and then make sure all the margin/padding-tops of your elements that butt up against the top of the window are 0.

[johnny190]

Set the margin and padding of the body to 0 and then make sure all the margin/padding-tops of your elements that butt up against the top of the window are 0.

That's what I did, but when I change them, part of the little box around the numbers disappear...

[Tyssen]

Care to be a bit more specific about which change is producing the unwanted results?