SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    nav bar hidden in Opera -- ?

    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    /***main nav ***/
    
    #navlist  {
        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 */
    }
    
    #navlist li {
        display: inline;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 5px; /* matches link padding except for left and right */
        padding-top: 5px;
    }
    
    #navlist li a {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-top: 8px;
        color: #fff;
        text-decoration: none;
        border-bottom: none;
    }
    
    #navlist li a:hover {
        background: #8fa8e7 url(../images/navgradhover2.png);
        color: #f0f8ff;
    }
    
    #navlist #active {
        border-left: 1px solid #fff; 
    }
    Code:
    <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>
        <ul id="navlist">
            <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>
        </ul>
    </div>

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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....

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

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

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.
    That was one of the things I noted as "do differently next time." 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....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •