1

I have a very odd glitch that only happens in firefox. The header div of my site will disappear from view only after the user has scrolled down the page and then moved the mouse on to the header nav. I have been searching for a couple of hours now on what piece of code I may be missing.

The site is not super dynamic as it does need to be so I don't think there is any Jquery/javascript with improperly formatted event listeners or anything. What I suspect the problem to be is something in the CSS code. I have done 3 different things for this site that I normally do not do. I used an absolutely positioned div, I used z-index and I constructed a CSS only nested menu structure in the nav.

While none of these things by themselves (except the ap div) is truly offensive in nature, I wonder if the combination of these 3 items is causing me a problem?

Here is the page structure for the header div and the governing CSS

   <div id="header">

        <div id="headwrap">

            <div id="logo">
                <img src="images/logo.png" height="35px" width="35px"/>                    
            </div>  <!-- end logo -->

            <div id="logotitle" class="ie">
                Cambridge Companies
            </div>  <!-- end logotitle -->

            <div class="headnav">

            <ul id="top-menu">
                <li><a href="?page=home"><span>Home</span></a></li>
                <li> <a href="#"><span>Company</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=company">Overview</a></li>
                        <li><a href="?page=mission">Our Mission</a></li>
                        <li><a href="?page=team">Meet the Team</a></li>
                    </ul>
                </li>
                <li> <a href="#"><span>Investments</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=completed">Completed</a></li>
                        <li><a href="http://www.cambridgecompanies.us/wordpress/">Opportunities</a></li>
                    </ul>
                </li>
                <li><a href="?page=investments"><span>Services</span></a></li>
                <li><a href="#"><span>Careers</span></a>
                    <ul class="sub-menu">
                        <li><a href="?page=vp">VP of Business Development</a></li>
                        <li><a href="?page=assistant">Assistant</a></li>
                        <li><a href="?page=intern">Intern</a></li>                          
                    </ul>
                </li>
                <li><a href="?page=contact"><span>Contact</span></a></li>
            </ul>

            </div>  <!-- end headnav -->

            <div id="address" align="right">
                <strong>1.888.615.6166</strong><br/>9075 W. Diablo Dr., Las Vegas, NV 89148
            </div>  <!-- end address -->

        </div>  <!-- end headwrap -->

    </div>  <!-- end header -->

#header{
position:absolute;
/*background-color:#F90;*/      /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}

#logo{
display:inline-block;
padding-top:6px;
margin-left:80px;   
}

#logotitle{
position:absolute;
/*background-color:#CC9900;*/   /* position testing */
display:inline-block;
color:#FFFFFF;
height:26px;
width:auto;
font-size:26px;
font-family:Arial, Helvetica, sans-serif;
margin-left:4px;
margin-top:10px;
}

.headnav{
/*background-color:#0099FF;*/   /* position testing */
display:inline-block;
/*margin-left:12px;*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1pt;
height:10px;
padding-bottom:24px;
margin-left:280px;
}

.navitem{
display:inline-block;
color:#ccb38b;
}

.navitem a:link{color:#ccb38b;}
.navitem a:visited{color:#ccb38b;}
.navitem a:hover{color:#FFF;}
.navitem a:active{color:#ccb38b;}




#address{
/*background-color:#99FF33;*/   /* position testing */
display:inline-block;
float:right;
margin-right:80px;
margin-top:9px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#ccb38b;

}

#top-menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
}

#top-menu > li {
float:left;
display:block;
height:52px;
}

#top-menu > li > a {
color:#ccb38b;
font-size:12px;
text-decoration:none;
display:block;
}

#top-menu  > li > a > span {
border-left:1px solid #ccb38b;
display:inline-block;
padding:0 12px;
height:12px;
margin:12px 0;
}

#top-menu > li:first-child > a > span {
border-left:0;
}

#top-menu > li:hover > a > span {
color:#fff;
text-decoration:none;
}

#top-menu li:hover .sub-menu {
display:block;
}

#top-menu .sub-menu {
position:absolute;
width:210px;
background:transparent url(../images/navigation-background.png) repeat;
list-style:none;
padding:0;
display:none;
margin:0;
margin-top:7px;
}

#top-menu .sub-menu a {
display:block;
padding:10px;
color:#ccb38b;
font-size:12px;
text-decoration:none;
}

#top-menu .sub-menu a:hover {
text-decoration:none;
color:#fff;
}

Any help, suggestions, comments on cleaning up my code or general thoughts are appreciated.

4

1 回答 1

1

！更新！——我已经解决了这个问题。起初我认为它是 z-index，然而，改变它只会让事情变得更糟。问题是#header 元素上的定位。由于我将其定位为“绝对”，因此它被渲染为错误的。解决方法是将其更改为以下内容：

#header{
    position:fixed; /* note that this changed to fixed instead of absolute */
    /*background-color:#F90;*/      /* position testing */
    background:url(../images/navigation-background.png) repeat;
    width:100%;
    height:50px;
    z-index:2;
 }

一旦我改变了定位，标题按设计运行。无论滚动如何，它都很好地粘在窗口顶部，并且不会像以前报道的那样在 Firefox 中消失。

我觉得我很愚蠢，我没有早点想到这个，但是嘿，你就是这样学习的对吧？

我希望这可以帮助其他有同样问题的人。

于 2013-04-10T04:37:17.483 回答