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="http://dl.dropbox.com/u/5739741/Images/TKWFAB%20title.png" /></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
  • 187 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jonsan32
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?

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.