Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Suckerfish positioning problem IE6

    Hi everyone,

    I really need your precious help,

    I'm using a css:hover fix based on including a csshover htc file to my css as suckerfish solution in ie6.

    The problem is when I hover the buttons in any browser, the menus appear directly under the button (which I want to have) however in ie6, the menus appear at the right end of the menu.

    Any help will be appreciated.

    Thanks!!

    problem:


    [HTML]<div id="tabs">
    <ul id="menu">
    <li></li>
    <li><a href="#"><span>Home</span></a>
    <ul>
    <li><a href="#">Submenu 3.1</a></li>
    <li><a href="#">Submenu 3.2</a></li>
    <li><a href="#">Submenu 3.3</a></li>
    </ul>
    </li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Research</span></a>
    <ul>
    <li><a href="#">Submenu 3.1</a></li>
    <li><a href="#">Submenu 3.2</a></li>
    <li><a href="#">Submenu 3.3</a></li>
    </ul>
    </li>
    <li><a href="#"><span>Facilities</span></a></li>
    <li><a href="#"><span>Projects</span></a></li>
    <li><a href="#"><span>People</span></a></li>
    <li><a href="#"><span>Publications</span></a></li>
    <li><a href="#"><span>Events</span></a></li>
    <li><img id="tabRightFooter" src="images/footer_right.gif"></li>
    </ul>
    </div>
    [/HTML]

    Code:
    
    
    #menu {
    	font-size:9pt;
    	font-weight:bold;
    	line-height:39px;
    margin:131px 0 0 223px;
    	margin-bottom:0px; /*margin between menu and rest of page*/
    	
    	}
    
    #menu ul {
    	margin:0;
    	padding:0px 0px 0px 0px;
    	list-style:none;
    	}
    
    #menu li {
    	display:inline;
    	margin:0;
    	}
    
    #menu li.active {
    	margin:0;
    	float:left;
    	padding:1px 15px 8px 15px;
    	background:url("../images/footer.gif") repeat left top;
    	color:#FFF;
    	background-position:0% -48px;
    	}
    #menu a {
    	float:left;
    	background:url("../images/footer.gif") no-repeat left top;
    	margin:0;
    	padding:0 0 0 0px;
    	text-decoration:none;
    	}
    
            	
    
    #menu a span {
    	float:left;
    	display:block;
    	background:url("../images/footer.gif") repeat right top;
    	padding:1px 15px 8px 15px;
    	margin-right:0px;
    	color:#FFF;
    	}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #menu a span {float:none;}
    
    /* End IE5-Mac hack */
    #menu a:hover span {
    	}
    
    #menu a:hover {
    	background-position:0% -48px;
    	}
    
    #menu a:hover span {
    	background-position:100% -48px;
    	}
    	* html .nav a { height: 1%; }
    
    	#menu li ul {
    		position: absolute;
                    width: 100px;
    		z-index: 50; /* show the dropdowns above the images */
    		top: 170px; /* position the dropdowns a set distance from the top of the image */
    		left: -999em;
    		list-style: none;
       
    		
    	}
    
    	#menu li:hover ul { left:auto }
    
    	#menu li li {
    		height: auto; /* reset the height and padding set on the IR list items */
                    width:auto;
    		padding-bottom: 0;
    		font-size: 110%;
    		border-bottom: 1px solid #FFCC00;
    	}
    
    	#menu li ul a {
    		padding: 0.25em;
    		color: #FF6600;
    		background: #FFFFCC;
    	}
    	#menu li ul a:hover {
    		color: #FFFFFF;
    		background: #448EB7;
    	}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Any help will be appreciated.
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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