WordPress.org

Support

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

[Resolved] Theme nav. looking strange when not logged in

Viewing 12 replies - 1 through 12 (of 12 total)
  • Eric Amundson
    Volunteer Moderator

    @sewmyheadon

    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?

    Oscar
    Member

    @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!

    Oscar
    Member

    @spinsis

    Didn’t seem to change anything I’m afraid. Any other ideas? 🙂

    Eric Amundson
    Volunteer Moderator

    @sewmyheadon

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

    Oscar
    Member

    @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!

    Oscar
    Member

    @spinsis

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

    Eric Amundson
    Volunteer Moderator

    @sewmyheadon

    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 . . .

Oscar
Member

@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.

Oscar
Member

@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.

Oscar
Member

@spinsis

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

Oscar
Member

@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!

Eric Amundson
Volunteer Moderator

@sewmyheadon

No problem. Glad you got it working. 🙂

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