WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Theme nav. looking strange when not logged in (13 posts)

  1. Oscar
    Member
    Posted 6 years ago #

    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.

  2. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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?

  3. Oscar
    Member
    Posted 6 years ago #

    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!

  4. Oscar
    Member
    Posted 6 years ago #

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

  5. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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? :)

  6. Oscar
    Member
    Posted 6 years ago #

    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!

  7. Oscar
    Member
    Posted 6 years ago #

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

  8. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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

  9. tags most likely.

    Try fixing the rest and you'll be on your way . . .

  • Oscar
    Member
    Posted 6 years ago #

    Thanks again mate. I've actually managed to remove all validation errors. Mainly because I moved the actual CSE above the grey area and fixed other small errors with scrappy code and unclosed tags etc.

    However, one small thing is still bugging me. If you check the site in FF vs. IE, there are some things that differ. If I could have the best of two worlds it would be perfect.

    Therefore, could you have a last look if something could be done;

    1) In FF, the site looks pretty much what I would like it to look like except for the comparison to IE with the extra space between the CSE and the actual category listing (featured, insight etc). Why does this look different.
    2) and referring to 1, what is causing the extra space in other places (logo wise, before the content starts, even with the CSE etc).

    Erm, basically the one and two are the same I guess :)

    Thanks.

  • Oscar
    Member
    Posted 6 years ago #

    Cache problem again. The extra space occurs in FF as well. I want to move the actual content one or two rows up so it's just below the category listing.

  • Oscar
    Member
    Posted 6 years ago #

    ... again, it moves up when you're logged in, so I assume it's some kind of conflict again.

  • Oscar
    Member
    Posted 6 years ago #

    Was actually the

    margin:20px 0;

    that was added, just removed it and now it seems to look good in all browsers!

    Thank you very much for all your help sewmyheadon!

  • Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    No problem. Glad you got it working. :)

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags