Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

z-index issue with IE only 1

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
0
0
FR
Hello :)

In the html/css below, "area-flags" keeps showing above "tip-container" on IE.
There is no problem on Firefox, Safari, Opera, Chrome.

Would someone know what causes the problem?

Thanks :)

Code: 
<html>

<head>
<style type="text/css">

#temp-clear {

clear: both;

}

#area-top-nav {

}

    #area-top-nav-left {
    
    float: left;
    margin: 0px;
    font-size: 14px;
    
    }
    
        #area-top-nav-left a {
        
        float: left;
        display: block;
        padding: 11px 22px 11px 22px;
        text-decoration: none;
        background-color: #FFFFFF;
        color: #6B9DFF;
        letter-spacing: 4px;
        border-right: 1px solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
        position: relative;
        
        }    
    
            #area-top-nav-left a:hover {
            
            background-color: #FFA518;
            color: #FFFFFF;
            border-top: 1px solid #FFFFFF;
            
            }  
    
            #area-top-nav-left a .tip-container {
            
            display: none;
            position: absolute;
            
            }
            
                #area-top-nav-left a:hover .tip-container {
                
                display: block;
                position: absolute;
                z-index: 99;
                left: 0px;
                top: 28px;
                border-bottom: 4px dashed #6B9DFF;
                                   
                }        
    
                    #area-top-nav-left a:hover .tip {
    
                    display: block;
                    height: 120px; 
                    background-color: #6B9DFF;
                    font-weight: normal;
                    font-size: 11px;
                    letter-spacing: 0px;
                    color: #ffffff;
                    width: 400px;
                    margin-top: 11px;
                    text-align: left;
                    font-family: verdana;
                    line-height: 16px;
                    
                    } 
    
                        #area-top-nav-left a:hover .tip-text {
    
                        display: block;
                        padding: 11px 22px 11px 22px; 
    
                        }
    
            #area-top-nav-left .ispage {
    
            background-color: #FFA518;
            color: #FFFFFF;
            border-top: 1px solid #FFFFFF;
            
            }  

#area-flags {

display: block;
position: absolute;
z-index: 2;
top: 60px;
left: 22px;
font-weight: bold;
color: #C1D5E0;
font-size: 12px;

}

    #area-flags .text {

    margin-right: 11px;
    
    }
    
    #area-flags .islang .text {
    
    color: #6B9DFF;
    
    }    
    

    #area-flags a {
    
    display: inline-block;
    text-decoration: none;
    color: #C1D5E0;
    margin-right: 11px;
    
    }

        #area-flags a:hover {

        color: #FFA518;
        
        }


</style>

</head>

<body>

<center>

    <div id="area-top-nav">
    
        <h1 id="area-top-nav-left">
        
            <a href="#">
                <span class="text">Title 1</span>
                <span class="tip-container">
                    <span class="tip">
                        <span class="tip-text">
                        Description 1 Description 1 Description 1 Description 1 Description 1 Description 1 
                        </span>
                    </span>
                </span>
            </a>
    
            <a href="#">
                <span class="text">Title 2</span>
                <span class="tip-container">
                    <span class="tip">
                        <span class="tip-text">
                        Description 2 Description 2 Description 2 Description 2 Description 2 Description 2 
                        </span>
                    </span>
                </span>
            </a>
    
            <a href="#">
                <span class="text">Title 3</span>
                <span class="tip-container">
                    <span class="tip">
                        <span class="tip-text">
                        Description 3 Description 3 Description 3 Description 3 Description 3 Description 3 
                        </span>
                    </span>
                </span>
            </a>
    
            <div id="temp-clear"></div>
        
        </h1>
    
    </div>
    
    <div id="area-flags">
    
        <span class="islang">
            <span class="text">Français</span> 
        </span>
        
        <a href="en/">
            <span class="text">English</span> 
        </a>
                    		
    </div>

</center>

</html>
 
Sort by date Sort by votes
z-indexes are relative to sibling elements, so you'll need to give #area-top-nav a higher z-index than #area-flags:

Code: 
#area-top-nav {
   position: relative;
   z-index: 3;
}

You then need to get rid of the unnecessary float:left #area-top-nav-left.

Some other points of note:

- You have no closing </body> tag.
- You are using the H1 element for completely the wrong purpose - change it for a DIV instead.
- You have no DOCTYPE.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi Dan :)

As usual, your solution worked!
I can't thank you enough for that :)

May I also ask what's the problem with the use of the H1 tags?
I read that the H1 tag is for the most important content in the page.
 
Upvote 0 Downvote
H1 is a heading element, so would normally be used for the page heading (which there's usually only one of).

For example, on this page, the H1 contains the thread title: "z-index issue with IE only". In fact, the content of the H1 will often be the same as the content of the <title> element.

You have your H1 containing all of the navigation - which certainly isn't a single heading. Obviously there's nothing to stop you doing it, but so many alarm bells should be ringing to say "I'm not a heading... don't put me in an H1".

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
I should go on to say that navigation is often delivered using an unordered list, as navigation is normally just that - a list of links, e.g:

Code: 
<ul>
   <li><a href="...">Home</a></li>
   <li><a href="...">About us</a></li>
   <li><a href="...">Contact</a></li>
</ul>

Using a list even works for multiple levels of navigation, as it's very obvious which child belongs to which parent, e.g:

Code: 
<ul>
   <li><a href="...">Home</a></li>
   <li>
      <a href="...">About us</a>
      <ul>
         <li><a href="...">About London</a></li>
         <li><a href="...">About Paris</a></li>
         <li><a href="...">About Tokyo</a></li>
      </ul>
   </li>
   <li><a href="...">Contact</a></li>
</ul>



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

Additionally, think to accessibility. Blind users can not just take a look at a document to find out if that is what they are searching for or not. But they can ask their reader software to read the titles/subtitles. And that will help them only if the heading elements contain titles/subtitles, related to the page content.

Feherke.
 
Upvote 0 Downvote
Dan, I see your point but you wrongly assumed that the H1 contains ALL the navigation on my website.

It only contains the 3 main topics of the website.
The full navigation bar is elsewhere and doesn't contain H1 tags.

But I understand that the H1 content should be different for every page, which isn't the case on my website.

Anyway, your comments are always appreciated, really.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
331
spamjim
spamjim
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
59
pendle666
pendle666
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
42
CoolBreeze007
CoolBreeze007
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
57
spamjim
spamjim
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
69
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top