WordPress Search Page – CSS Looks Different

[Gelias]

Hopefully someone can help me with this issue.

The issue only occurs when you type something in the search box. The Results page is just shifted all the way to the right for some weird reason. Everything else on the site looks good. The search.php has the same div structure as the whole site and everything looks good just shifted.

Here is a link to the image with the issue
Here is a link to the image of the archives which has same structure and no issue.

Hopefully someone can help.

Thanks.

[noahgelman]

No, you’re definitely missing either a div tag, or an ID or Class that should be on a div. Or you have an extra div in there causing the issue.

Do you have a link to the website?

[Gelias]

It’s local. Here is the code for the search.php

Search Results






" title="">












No posts found. Try a different search?

[noahgelman]

Can you post the code to a page that looks proper and also the css for “l-inside” and “l-constrained” ?

[Gelias]

Sure no prob. So here is the archive.php

$arc_year = get_the_time('Y');

$arc_month = get_the_time('m');

$posts = query_posts( "year=$arc_year&monthnum=$arc_month" );

$count = count($posts);

?>





Archive Results for ">""  Results Found































" title="">Read More…

And here is the css

.l-inside {

margin: 0 auto;

width: 960px;

overflow: hidden;

position: relative;

}



.l-constrained {

width: 700px;

float: left;

margin: 0px 10px 5px 0;

}

The issue is that the site shifts. Everything is in place but it shifts half way through the screen.

Thanks again for your help.

[noahgelman]

2 differences I see.

1. Your archieves page has a “top-space” class on “.l-constrained”. What is the css for that?

2. While both use an If and While statement, your archieves page closes with only an while your search page closes with both and . That might be your issue.

[Gelias]

top-space just adds a margin .top-space { margin-top: 15px;}

Really? the endif might be causing this? I’m going to try and remove the content and just leave the divs and see that fixes it.

[Gelias]

Even after removing all the content to just this. Only the search page shifts.

Search Results

[noahgelman]

hmmm….. interesting…

My next guess would be something in your header. Your ‘body’ is probably getting a ‘search’ class of some sort (some kind of class to designate it’s the search page) and the page is inheriting some css styles you didn’t intend.

I don’t know how much from scratch you’re building this from, or how much css is still there from the default css but this is my next guess.

[Gelias]

Ya it just clicked after you said that. I have another div with class search but that’s reserved for wordpress. Thanks for your help Noah. Greatly appreciated

[noahgelman]

No problem

[Author]

Posts