WordPress.org

Hey everyone.

I have a really strange problem at http://www.hattricknews.org/. The navigation (category listing at the top with the gray background that is) looks perfectly stretched out when logged in, but is cramping up when not logged in. If you just look at it you'll get what I mean with cramped up. It's simply just on the left while it's being stretched all the way out to the right (in one line instead of being double) when you're logged in.

The code for the listing looks like this (with the Custom Search Engine also in there)

<div id="nav" class="clearfix">
		<ul class="clearfix">
			<?php wp_list_categories('hierarchical=1&title_li='); ?> <div align="right"><form action="http://www.hattricknews.org/search-results/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-6347566284148905:os8kvo-4z1j" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="20" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script></div>
		</ul>
	</div>

I don't know what you can do without the CSS specific, but I'm getting tired of this problem, any help is appreciated.

Thanks.

You've got a strange one there, but I think I've spotted the issue:

Your little nav bar is in a div with an ID of nav. In your style.css file, you've got this definition:

#nav {
	height:30px;
	line-height:30px;
	margin: 0 auto;
	padding:1px;
	border:1px solid #ddd;
	}

So, you'd think that would cover it, but if you use Firebug to help troubleshoot, you can see that this div is actually given a fixed width of 380px. From where you ask?

Check out the bm-custom-login-2.css file and you'll find this:

/* Even though this is the navigation div for the links at the bottom of the
login form, it also controls the bottom image that gives the login form a
nice curved corner feel.
*/

#nav {
	background:url( images/login-bkg-bottom.gif ) center bottom no-repeat;
	width:380px;
	height:45px;
	text-indent: 26px;
	margin:0px; padding: 0px;
}

So, you've got a few competing styles and it seems that when you're not logged in the bm-custom-login-2.css file is called after the style.css file, so the latter definitions rule the roost.

So, it seems that one of your plugins and also your stylesheet have dueling styles. Without using your plugins, I'm not sure if you intended that, or if it's an unhappy accident.

You may be able to edit the appropriate style in the bm-custom-login-2.css file like so:

#nav {
	background:url( images/login-bkg-bottom.gif ) center bottom no-repeat;
	width:100%;
	height:30px;
	text-indent: 26px;
	margin:0;
	padding: 0;
}

But, you'll want to make sure that doesn't goof up other styles.

Make sense?

Makes perfect sense! Thanks a lot sewmyheadon. I'll be sure to check it today and will post the results later. Hopefully you'll be able to go back to this thread if it's still a problem :)

Thanks again!

Didn't seem to change anything I'm afraid. Any other ideas? :)

When I first checked it, I didn't see the change, but refreshed my browser (Firefox 3) and it looks like I imagine you want it, with the grey nav/search bar stretching across the top of the screen.

# Featured
# Hattrick Insight
# Hattrick News
# Interviews

You might want to refresh your browser, or clear you cache.

Also, upon looking at it, I'd recommend adding to your #nav div in the bm-custom-login-2.css file some vertical margin on the div like so:

#nav {
	background:url( images/login-bkg-bottom.gif ) center bottom no-repeat;
	width:100%;
	height:30px;
	text-indent: 26px;
	margin:20px 0;
	padding: 0;
}

Again, unless you intended these to be duplicate rules in the stylesheets, you might consider consolidating them all into your main style.css sheet to avoid confusion.

One other thing that may help is to try to fix all of the validation issues that you can.

These errors may have an effect on how your site renders across browsers and platforms. And, who would want a totally valid site if given the chance? :)

Thanks!

It's solved with FF it seems (tested most versions), but the problem still "kind of" remains with IE. As the site is 50/50 with IE, could you please give me some additional comments on how to solve it? (without validating everything of course :)).

I know I should probably integrate the two CSS'es into one, unfortunately my skills in that department stretch no further than editing what people tell me is a solution :)

Thanks for all the help so far!

I added the other changes (vertical margin) you told me as well..

Hey Spinsis,

You'll probably want to start by fixing your validation errors (see validation issues link above).

There's at least one validation issue in your main nav that's contributing to the difference in display in IE and FF. Line 153/Col 9 has <div align="right"><form action="http://www.hattricknews.org/search-results/" id="cse-search-box">

and it's out of place. Should be wrapped in a