Member Avatar for jonsan32

I'm trying to add a floating menu that spans 100% and sticks to the top of the page, but the content that's meant to flow behind the menu keeps going to the front in older versions of IE. I notice Forbes.com fixes this issue by having their "sticky" menu just disappear and scroll up in IE http://www.forbes.com/home_usa/ I wouldn't mind that fix, but I can't seem to do either. My website is http://www.thekidwhofoundabasketball.blogspot.com/p/book-summary.html and I'm thinking the trouble might be the z-index of the page's text because the content background is not transparent and it flows behind the navmenu very nicely. Can you give z-index to text?

I found these lines of code @ http://css-tricks.com/snippets/jquery/fixing-ie-z-index/ but I might be implementing thier solution incorrectly. I tried with .nav32 and #nav32, but I don't know.

<script type="text/javascript">
$(function() {
       var zIndexNumber = 5000;
       // Put your target element(s) in the selector below!
       $("#nav32 li a").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});
</script>

And here's the code from my page, so you don't have to go sifting.

<style type="text/css">
#nav32 {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #000000;
    border-bottom: 1px solid #ccc; position:fixed;
top:0; left:0; z-index:1000}
#nav32 ul {
    list-style: none;
    height:90px;
    margin: 0 auto;
    padding-top: 0; }
#nav32 li {
    float: left;}
#nav32 li a {
    display: block;
    padding: 30px 35px 30px 35px;
    text-decoration: none;
    border-right: 1px solid #aaaaaa;
    border-left: 1px solid #333333;}
#nav32 li:first-child a {
    border-left: 1px solid #888888; }
#nav32 li a:hover {
    background-color: #000066; 
}

.head1{ 
  font-weight: bold;
  font-size: 21px;
    color: #ffffff;
text-transform:uppercase;
}

.head2{ 
  font-size: 13px; 
    color: #bbbbbb;
font-weight: 100;
}
.head2:hover{ 
  font-size: 13px; 
    color: #ffffff;
}

</style>
<script type="text/javascript">
$(function() {
       var zIndexNumber = 5000;
       // Put your target element(s) in the selector below!
       $("#nav32 li a").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});
</script>



<div id="nav32">
    <ul>


<li><img src="" /></li>
        <li><a href="http://www.thekidwhofoundabasketball.blogspot.com/p/buy-book.html"><span class="head1">Buy the Book</span><br /><span class="head2">on Amazon.com</span></a></li>
        <li><a href="http://www.thekidwhofoundabasketball.blogspot.com/p/book-summary.html"><span class="head1">The Matrix</span><br /><span class="head2">A summary of the book</span></a></li>
        <li><a href="http://www.thekidwhofoundabasketball.blogspot.com/p/construct-your-own-air-pump.html"><span class="head1">D.I.Y. Air-Pump</span><br /><span class="head2">Learn How to Make Your Own</span></a></li>
        <li><a href="http://www.thekidwhofoundabasketball.blogspot.com"><span class="head1">Reviews</span><br /><span class="head2">Read or Leave Your Own</span></a></li>
    </ul>
</div>

ANY HELP IS GREATLY APPRECIATED. Thanks!

Edited by jonsan32
  • 1 Contributor
  • 2 Replies
  • 207 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jonsan32

Dani AI

Generated

— short answer first: you can’t give a bare piece of text a z‑index. z‑index applies to elements that create a stacking context (i.e., elements with position other than static). Wrap text in an element (span/div), make that element positioned (usually position: relative) and then set z‑index on it if you truly need the text itself to layer.

Why IE was biting you: older IE’s stacking rules and the so‑called “hasLayout” behavior mean elements can unexpectedly form stacking contexts or ignore z‑index. Also IE6 doesn’t support position: fixed (it treats it like absolute), so a “sticky” bar will behave differently there. Two practical approaches that work reliably across old IE:

  • Keep the sticky behavior for modern browsers and let old IE gracefully fall back. Put your sticky nav outside any other positioned wrapper (direct child of body) so it isn’t trapped in another stacking context, and avoid giving page content positioned ancestors that create competing stacking contexts.

  • Target old IE with a small override (conditional comment or IE‑only stylesheet) that disables the fixed behavior so the menu scrolls normally there. Example override for IE6:

    <!--[if lte IE 6]>
<style>
/* turn off the sticky behavior in IE6 so content won't overlap */
#nav32 { position: static !important; zoom: 1; }
</style>
<![endif]-->

A couple of extra tips: if an element still overlaps incorrectly in IE6/7, try forcing hasLayout on the element (e.g., zoom:1 in an IE‑only rule) or move the nav markup so it isn’t inside a positioned container. If you need the fixed effect in very old IE, use a small scroll handler to set the nav’s top on scroll — but progressive degradation (disable sticky for old IE) is simpler and more robust.

Member Avatar for jonsan32

OK, some more research has proven to me that the more pertinent question might be HOW CAN I MAKE MY NAVMENU DIV SCROLL INSTEAD OF STAY WHEN VISITORS USE IE.

http://www.usatoday.com/tech/ does this, as well as the Forbes site I mentioned earlier. I presume there is no answer for making the z-index higher, but how can I implement their scrolling work-a-round?

Member Avatar for jonsan32

OK, so I gave up and changed the entire layout. But I did find a possible solution for anyone stumbling across this post. It's IE6 Bug #13: overlap of a div with absolute positioning --

Good luck!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.