border around charecters

How do I set a border around each character in a <td>.

I have a td which prints paging(pagination) dynamically... I want a border around each number(which shows the number of pages)

Thanks

 

Add an element around each number and give it a border. I would use a list/anchor combo...

I like having big clickable buttons.

 

not 100% sure if this works

td {border: 1px solid #000;}

Code (markup):

 

deques, your code give border to the <td> not to the charecter (in this case numbers) i have given to print inside the td.
soulscratch, i don't know how to give ul, li tags to inisde the php code i have given.

---
for ($i = 1; $i <= $pager->numPages; $i++) {
echo " | ";
if ($i == $page)
echo "","$i";
else
echo "<a href=\"$url&page=$i\">$i</a>"; // the number gets printed here..
}
-------

 

... and this is why giving us the code FIRST is important - what you want is reasonably simple...

echo '<ul class="pageList">';
for ($i=1; $i<=$pager->numPages; $i++) { 
	echo '<li>',(($i==$page) ? $i : '<a href="'.$url.'&page='.$i.'">'.$i.'</a>'),'</li>';
}
echo '</ul>';

Code (markup):

with the following CSS:

.pageList {
	list-style:none;
}

.pageList li {
	/* include these two for older firefux/gecko versions */
	display:-moz-inline-block;
	display:-moz-inline-box;
	/* and of course RoW */
	display:inline-block;
	border:1px solid #000;
}

Code (markup):

In the php the use of single quote instead of double means A> you can use double quotes inside it without escaping them, and B> lower overhead because you are telling it NOT to waste time parsing the text. The inlined expression just makes it simpler as well.

On the CSS side, setting to inline-block makes sure that the border actually shows top and bottom - a common 'affliction' when trying to put borders or backgrounds on an inline element. Another approach would be to float them, but that's frought with layout difficulties.

Oh, and I'd probably play with putting some margins and padding on the LI.

 

Thanks deathshadow

it worked as you said i made some changes to the css and got the result the way i wanted..