CSS problem using left panel on search results page

[Alden]

Hi, I'm new to the Zoom search program. I'm getting most of it so far but I've run into a weird problem.

I want my search results to appear in a page with a format in line with the rest of the web site. Part of that format is a left panel created using a container containing the CSS line "float: left;".

This is apparently creating problems with the search results display: Everything is fine until we get to the line that says "sorted by [relevance or date]". Then there's only white space till the container at the left side of the page ends; then the search results are listed normally.

Deleting that single line of CSS (float: left gets rid of the huge chunk of white space, but naturally messes up the rest of the page.

I could of course try re-writing my search results page using tables rather than CSS, but I'm wondering if anyone knows a way around this oddity without resorting to that.

Thanks,
Alden

[Ray]

It is hard to comment without seeing the page in question. But you may find it easier to change the default CSS in the search template page to adapt, as opposed to the other way around.

The "Sort by relevance / date" line is styled with the ".sorting" class. This is defaulted to "text-align: right". Does removing this change the behaviour of your left container?

You will find an explanation of the CSS classes used by Zoom defined here.

[Alden]

CSS Problem

Unfortunately changing .sorting{} doesn't affect the problem.

Here's the test page URL: http://www.coachingforchange.com/search_test_css.html

The linked CSS file is at http://www.coachingforchange.com/search.css
where you will find the offending #leftcol {} rules.

Thanks,
Alden

[Ray]

We had a look at your page and CSS.

Try changing the following in your search_template.html

Locate the following lines:

.result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }

And remove the "clear: left;" attribute so that it looks like this:

.result_block { margin-top: 15px; margin-bottom: 15px; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; }

I think that should do it.

[Alden]

CSS problem using left panel on search results page

You got it! Works fine now. Thanks!

Alden