SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Problem: Sliding Doors Navigation Menu

    Hello again,

    I have been working on a new site design and would like to use a sliding doors approach for the navigation (much like Apple.com's top navigation bar)

    I have it working in FF but once again something has gone wrong when I pop it into IE. In IE the menu forms a sort of stair case with each button as a new step. It also displays the text for the link underneath the background image even though each list element has a height of 0. I have noticed when I turn off the background color for the second tier navigation menu the list elements from the top tier navigation are visible.

    I'm new to using the sliding door technique so any help would be greatly appreciated.

    I have attached my sliding door background image - it is linked in the css to run from the same folder as the html file. I removed the text from the images, but FYI the images will have the text embedded in them. Thanks in advance.

    HTML with the CSS at the top.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Mock Up Front Page</title>
    
    <style type="text/css">
    a:link, body_alink {
    	color:#161616;
    }
    a:hover, a:active, body_ahover {
    	color:#FF4400;
    }
    body
    {
    	background-color:FFF;
    }
    *
    {
    	margin:0;
    	padding:0;
    }
    div#container {
    	margin : 0 auto;
    	width : 1000px;
    	font-size:10pt
    }
    div#navigation_tier1 {
    	width : 1000px;
    	height : 28px;
    	float : left;
    }
    div#navigation_tier2 {
    	width : 1000px;
    	height : 22px;
    	background-color : #00ff66;
    	float : left;	
    }
    /*Navigation Menu*/
    ul.tier1_nav
    {
    	height:28px;
    	list-style:none;
    }
    li.tier1_nav a
    {
    	float:left;
    	display:inline;
    	height:0;
    	width:95px;
    	padding-top:28px;
    	background-image: url(SitePointTest.gif);
    	background-repeat:no-repeat;
    }
    li#navt1_endcap
    {
    	background-image: url(SitePointTest.gif);
    	background-repeat:no-repeat;	
    	width:240px;
    	height:0px;
    	padding-top:28px;
    	background-position:-760px 0;
    	
    }
    li#navt1_home a
    {
    	background-position:0 0;
    }
    li#navt1_home a:hover
    {
    	background-position:0 -28px;
    }
    li#navt1_home_active a
    {
    	cursor:default;
    	background-position:0 -56px;
    }
    li#navt1_stest a
    {
    	background-position:-95px 0;
    }
    li#navt1_stest a:hover
    {
    	background-position:-95px -28px;
    }
    li#navt1_rtest a
    {
    	background-position:-190px 0;
    }
    li#navt1_rtest a:hover
    {
    	background-position:-190px -28px;
    }
    li#navt1_ttest a
    {
    	background-position:-285px 0;
    }
    li#navt1_ttest a:hover
    {
    	background-position:-285px -28px;
    }
    li#navt1_mtest a
    {
    	background-position:-380px 0;
    }
    li#navt1_mtest a:hover
    {
    	background-position:-380px -28px;
    }
    li#navt1_vids a
    {
    	background-position:-475px 0;
    }
    li#navt1_vids a:hover
    {
    	background-position:-475px -28px;
    }
    li#navt1_tools a
    {
    	background-position:-570px 0;
    }
    li#navt1_tools a:hover
    {
    	background-position:-570px -28px;
    }
    li#navt1_forums a
    {
    	background-position:-665px 0;
    }
    li#navt1_forums a:hover
    {
    	background-position:-665px -28px;
    }
    ul.tier2_nav
    {
    	height:22px;
    	width:1000px;
    	list-style:none;
    }
    li.tier2_nav
    {
    	float:left;
    	display:block;
    	height:0;
    	width:75px;
    	padding-top:22px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    
        <div id="navigation_tier1">
            <ul class="tier1_nav">
                <li class="tier1_nav" id="navt1_home_active"><a href="#home">Home</a></li>
                <li class="tier1_nav" id="navt1_stest"><a href="#strat">STest</a></li>
                <li class="tier1_nav" id="navt1_rtest"><a href="#rankings">RTest</a></li>
                <li class="tier1_nav" id="navt1_ttest"><a href="#talents">TTest</a></li>
                <li class="tier1_nav" id="navt1_mtest"><a href="#macros">MTest</a></li>
                <li class="tier1_nav" id="navt1_vids"><a href="#videos">VTest</a></li>
                <li class="tier1_nav" id="navt1_tools"><a href="#tools">Test</a></li>
                <li class="tier1_nav" id="navt1_forums"><a href="#forums">Forums</a></li>
                <li class="tier1_nav" id="navt1_endcap">&nbsp;</li>
            </ul>
        </div>
        
        <div id="navigation_tier2">
     		   	<ul class="tier2_nav">
            	<!--Class Icons Before Each-->
            	<li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
                <li class="tier2_nav">TEST</li>
            </ul>
        </div>
    </div>
        </body>
        </html>
    Attached Images Attached Images
    Last edited by json2001; Feb 7, 2008 at 17:07.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll need to float the list as well for IE and overflow:hidden to elements with small heights.


    Code:
    ul.tier1_nav li{float:left}
    
    li.tier1_nav a
    {
        float:left;
        display:inline;
        height:0;
        width:95px;
        padding-top:28px;
        background-image: url(images2/SitePointTest.gif);
        background-repeat:no-repeat;
     overflow:hidden;
    }
    li#navt1_endcap
    {
        background-image: url(images2/SitePointTest.gif);
        background-repeat:no-repeat;    
        width:240px;
        height:0px;
        padding-top:28px;
        background-position:-760px 0;
        overflow:hidden
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul!

    Works like a charm. I am now a SitePoint believer!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •