Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
floating nav issue ie7
Old 08-09-2010, 10:18 AM floating nav issue ie7
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
I've done this same nav 50 times, but for some reason, I'm having some trouble here with ie7.

http://cfb.cassisdevelopment.com/

Code:
<ul id="main-nav">
                <li><a href="">Online Banking</a>
                    <ul class="sub-nav">
                        <li><a href="">Features</li>
                        <li><a href="">FAQ</li>
                        <li><a href="">Security</li>
                        <li><a href="">Enroll Now!</li>
                    </ul>
                </li>
                <li><a href="">Personal Banking Services</a>
                    <ul class="sub-nav">
                        <li><a href="">Checking Accounts</li>
                        <li><a href="">Savings, CD's, Money Markets</li>
                        <li><a href="">Deposit Rates</li>
                        <li><a href="">Consumer Loans</li>
                        <li><a href="">Real Estate Loans</li>
                        <li><a href="">Additional Services</li>
                        <li><a href="">Private Banking</li>                        
                    </ul>
                </li>
                <li><a href="">Commercial Banking Services</a>
                    <ul class="sub-nav">
                        <li><a href="">Checking Accounts</li>
                        <li><a href="">Non Profit Checking Accounts</li>
                        <li><a href="">Business Loans</li>
                        <li><a href="">Construction Loans</li>
                        <li><a href="">Deposit Rates</li>
                        <li><a href="">Additional Services</li>
                        <li><a href="">Private Banking</li>
                    </ul>
                </li>
                <li><a href="">Contact Us</a>
                    <ul class="sub-nav">
                        <li><a href="">Contact Information</a></li>
                        <li><a href="">Comments &amp; Suggestions</a></li>
                    </ul>
                </li>
                <li class="last"><a href="">About Us</a>
                    <ul class="sub-nav">
                        <li><a href="">Locations and Hours</a></li>
                        <li><a href="">Community Involvement</a></li>
                        <li><a href="">Officers and Staff</a></li>
                        <li><a href="">Staff Directory</a></li>
                        <li><a href="">Board Of Directors</a></li>
                        <li><a href="">Mission Statement</a></li>
                    </ul>
                </li>
            </ul>
Code:
#header #main-nav {
    border-top:#184077 11px solid;
    padding-top: 1px;
    margin-bottom: 4px;
    float: left;
    z-index: 0;
    background: #c3d1df;
    width: 100%;
}
#header #main-nav li{
    float: left;
    display: inline;
    position: relative;
    font-size: 10.5px;
    text-transform: uppercase;
    border-right: 1px solid white;
    height: 23px;
}
#header #main-nav li.last {
    border-right: none;
}    

#header #main-nav li a{
    color: #184077;
    padding: 4px 15px;
    display: block;
    text-decoration: none;
}
#header #main-nav li .sub-nav {
    position: absolute;
    display: none;
    left: 0;
    z-index: 999 !important;
}
#header #main-nav li:hover .sub-nav{ 
    display: block; 
    z-index: 999 !important;
    width: 180px;
    border-bottom: 1px solid #cdcdcd;
}
#header #main-nav li:hover .sub-nav li{
    background: white;
    border: 1px solid #cdcdcd;
    border-bottom: none;
    font-size: .75em;
    height: 17px;
} 

#header #main-nav li .sub-nav li a{
    cursor: pointer;
    display: block;
    letter-spacing: 1px;
    color: #333;
    text-transform: none;
    padding: 3px;
    width: 174px;
}
#header #main-nav li .sub-nav li a:hover{
    background: #cdcdcd;    
}
Thoughts? I can't find the issue to save my life. Thanks in advance.

Last edited by indyryan; 08-09-2010 at 10:26 AM..
indyryan is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-09-2010, 10:59 AM Re: floating nav issue ie7
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Wow, the text on your dropdowns is very tiny and the color is barely readable. That's really bad for accessibility.

Looks like you've run afoul of IE's positioning z-index stacking order bug.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 08-09-2010, 11:07 AM Re: floating nav issue ie7
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
Unfortunately, I wasn't graced with redesigning. They just hired me to take the site out of tables and into tableless code. I had to stay with in the same parameters of their 10 year old site .

That said, i'm confused as to why the first and last LI are showing, but everything in the middle do not, unless the final LI has been hovered on .
indyryan is offline
Reply With Quote
View Public Profile
 
Old 08-10-2010, 05:21 AM Re: floating nav issue ie7
Junior Talker

Posts: 1
Name: Karthik
Trades: 0
Hi


Please Remove Position:absolute in this class

#header #main-nav li .sub-nav {}

Your Prob Will be solved.
gowsiga1021 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to floating nav issue ie7
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.29815 seconds with 12 queries