Nav bar hidden in Opera --?

HTML & CSS
1

Just took this site live (still waiting for the URL to be released by the client’s former host).

It displays okay in FF and IE, but when I open it up in Opera, the blue nav bar appears to be almost entirely hidden behind the content area. A refresh makes it snap into place. Anyone have any thoughts as to why?

(Second question: the colors seem a bit “heavy” to me. Anyone else get that impression?)

This design “sat” for several months while the site owners dealt with illness and other issues. I haven’t looked at it since before Christmas until just the other day, and I see some things I probably would do differently if I were to do it from scratch again. But the concealed nav bar concerns me.

2

That was one of the things I noted as “do differently next time.” :slight_smile: I originally wrote that code quick&dirty, and never went back to do it right.

I tried it locally without the RP fix, and you’re right, apparently that was what was causing Opera to chuff a hairball. Now I get to make sure not to allow that to propagate in some of my other designs…

3

A refresh makes it snap into place. Anyone have any thoughts as to why?

When I run your files locally it loads fine on the initial page load.

I’m not sure if this is having anything to do with it but I see that your <div id=“navcontainer”> is an unstyled div. I would start by getting rid of it and targeting the li items via the <ul id=“navlist”>.

It may not fix the problem but it will eliminate an unnecessary div. It is hard to track down the real cause since it works fine locally and a refresh fixes it on your live page.


/***main nav ***/

[B]#navlist[/B]  {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 8px;
    padding-left: 0;
    margin-top: 22px;
    margin-left: 0;
    background: #48668e url(../images/navgrad2.png);
    color: #fff;
    width: 100%;
    font-family: "Trebuchet MS", Candara, "Bitstream Vera Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 1.5em;
    line-height: 18px; /* fixes Firefox 0.9.3 */
}

[B]#navlist li[/B] {
    display: inline;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px; /* matches link padding except for left and right */
    padding-top: 5px;
}

[B]#navlist li a[/B] {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: none;
}

[B]#navlist li a:hover[/B] {
    background: #8fa8e7 url(../images/navgradhover2.png);
    color: #f0f8ff;
}

#navlist #active {
    border-left: 1px solid #fff; 
}


<div id="header">
    <div id="skip">
        <a href="#maincontent" title="Skip to main content">Skip to Main Content</a>
    </div>
    <h1><b>Paw's Place</b></h1>
    <a class="headerlink" href="index.html" title="Home"><img class="imgposlogo" src="images/pplogo1.png" alt="Paws Place logo"></a>
    <h2 class="slugline">Animal Rescue</h2>
    [B]<ul id="navlist">[/B]
        <li><a href="index.html" title="Home page">Home</a></li>
        <li><a href="aboutus.html" title="About Us">About Us</a></li>
        <li><a href="contactus.html" title="Contact Us">Contact Us</a></li>
        <li><a href="sponsor.html" title="Donate">Donate</a></li>
        <li><a href="volunteers.html" title="Volunteer">Volunteer</a></li>
        <li><a href="adoptable.html" title="Adopt a Pet">Adopt a Pet</a></li>
        <li><a href="causeforpaws.html" title="Newsletter">Newsletter</a></li>
    [B]</ul>[/B]
</div>
4

Just curious, why have you set all your anchors as position:relative?

  • a {
    position:relative;
    }

Remove that and see if it has any effect on Opera

5

Ray, thanks for the recode. It seems to work on an initial test-drive. I’ll try it on a larger basis and see if it does the trick all around. That * a {position:relative;} thing is part of the global reset, which I cribbed wholesale from the YUI Library – I made some changes to it, but never took that out. Good catch!

Edit: I wonder why these fixes worked, but I’ll probably never quite figure that one out… :slight_smile:

6

Hey Max,
I see you got those changes in place now. I cleared my cache in Opera and went to your page again, it loaded fine the first time. :slight_smile:

The navbar is actually depending on the “Paws Place” logo image to position it correctly. There is a slight delay with the navbar positioned to high until the logo image loads.

You might consider setting it as a BG image in a div then nesting the anchor in that div as display:block; width/height:100%. That will hold the height open while the image loads and keep the navbar from jumping down.

Edit: I wonder why these fixes worked, but I’ll probably never quite figure that one out… :slight_smile:
To figure out the “why” you could run some tests with anchors at their default of display:inline; along with RP.

I am guessing that the RP on the anchor was the cause of it and not that unstyled #navcontainer div.