Another little CSS problem

AARRRGH

Hello

I hope someone can help me with this.

I'm finalising the design for the website http://www.jobseeker.ie

If you look at the bottom of the search results, for example, http://www.jobseeker.ie/jobs.php?k=&l=limerick you will see the paging system is not wrapping.

The HTML I am using is -

<div class="paginationBar">
<ul class="pagination inline">
<li class="active"><a href="/jobs.php?k=&l=limerick&page=1">1</a></li>
<li><a href="/jobs.php?k=&l=limerick&page=2">2</a></li>
<li><a href="/jobs.php?k=&l=limerick&page=3">3</a></li>
<li><a href="/jobs.php?k=&l=limerick&page=4">4</a></li>
etc.
</ul>
</div>

and the CSS settings are -

div.paginationBar {
padding: 15px 0 20px 0;
text-align: center;
clear: both;
white-space: normal;
}

ul.pagination {
font-size: 11px;
}

ul.pagination li {
font-weight:bold;
margin: 0 1px;
}

ul.pagination li:first-child {
border: none
}

ul.pagination li a {
padding: 4px 6px;
border:1px solid #ccc;
text-decoration:none;
}

ul.pagination li a:hover {
border:1px solid #006699;
}

ul.pagination li.active a {
cursor:default;
font-size: 16px;
color: #333;
border: none;
}

ul.pagination li.active a:hover {
text-decoration:none;
background: none;
}

Any ideas?

Thanks a million

NeVeR

is that all the CSS you are using ??

AARRRGH

Well, that's the CSS for the paging system. I'm using loads of other CSS for loads of other stuff

Basically all I need is a way to make the paging wrap when it gets to the width of the page (or a width I can define.)

Is there an easy way to do that?

NeVeR

might be a problem with the PHP page.. cant see anything in the CSS-- still looking

AARRRGH

Thanks. I'll have a look at my PHP code to see if I'm doing anything funny.

Cheers.

epgriffin

You'll need at least a single space between each of the list elements.
When the HTML is generated the list is output like this

<ul class="pagination inline">
<li class="active"><a href="/jobs.php?k=&l=limerick&page=1">1</a></li><li><a href="/jobs.php?k=&l=limerick&page=2">2</a></li><li><a href="/jobs.php?k=&l=limerick&page=3">3</a></li><li><a href="/jobs.php?k=&l=limerick&page=4">4</a></li>
etc.
</ul>

There's no carriage return or white space. If you put a single white space between each list element it will work... Although the style then overlays each element slightly on top of one another (in IE6) but that's another issue...

Also be sure that the pagination style will never inherit a

whitespace:nowrap;

or it will fall up onto one line again.

forbairt

might I suggest instead of doing a list of 60+ pages ... you just list pages 1 - 10 with a 10-20 button beside it .. and last ? ...

I don't know how many sites display that many pages ... but you can't rely on the page numbering as if a job is removed ... it'll screw up which page the job was listed under ? ...

just a suggestion

AARRRGH

epgriffin: that's it. Thank you very much!

forbairt: yep, that's in the works. Thanks for reminding me.

Cheers!