Support » Themes and Templates » Theme nav. looking strange when not logged in

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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?

    Thread Starter Oscar

    (@spinsis)

    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!

    Thread Starter Oscar

    (@spinsis)

    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? 🙂

    Thread Starter Oscar

    (@spinsis)

    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!

    Thread Starter Oscar

    (@spinsis)

    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

    • tags most likely.
    • Try fixing the rest and you’ll be on your way . . .

    Thread Starter Oscar

    (@spinsis)

    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.

    Thread Starter Oscar

    (@spinsis)

    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.

    Thread Starter Oscar

    (@spinsis)

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

    Thread Starter Oscar

    (@spinsis)

    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!

    No problem. Glad you got it working. 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Theme nav. looking strange when not logged in’ is closed to new replies.