Results 1 to 3 of 3

Thread: styling css menu with fly out in IE 6 not working

  1. #1
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default styling css menu with fly out in IE 6 not working

    Hello,

    I have been trying to style a CSS based menu specifically for IE6 (about a fourth of our users are on IE6). I can't figure out how to widen the area for the <li>. It is squeezed and causing the text to be split into multiple lines.

    In addition, the "fly-out" part is working? Do I need the csshover.htc file for that to work?

    AND to throw another wrench in the works, I am building the site and menu in Umbraco (open-source dot net CMS). Below is the CSS I'm using in the ie6_styles.css file.

    Code:
    /*	************************************************************
    	Specialty Market Flyout Menu
    	************************************************************
    */
    .menu2{
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    	width:325px; 
    	height:160px; 
    	position:absolute; 
    	font-size:12px; 
    	margin:0 0; 
    	display:block;
    }
    .menu2 ul {
    	padding:0; 
    	margin:0 0 0 -10px; 
    	list-style-type: none; 
    	background:#eee; 
    	width:325px; 
    	height:160px; 
    	border:1px solid #2356B6;
    	display:block;
    }
    .menu2 ul li ul {
    	visibility:hidden; 
    	position:absolute; 
    	height:0; 
    	overflow:hidden; 
    	top:0; 
    	left:200px;
    	display:block;
    }
    .menu2 ul li {
    	display:block;
    	float:left;
    	width:325px;
    	
    }
    .menu2 ul li a, .menu2 ul li a:visited {
    	display:block; 
    	float:left; 
    	text-decoration:none; 
    	color:#999999; 
    	height:auto; 
    	line-height:25px; 
    	width:190px; 
    	background:transparent; 
    	padding-left:10px;
    }
    
    //////* end top level of fly out menu *///////
    
    
    * html .menu2 ul li a, * html .menu2 ul li a:visited {
    	width:100px; 
    	w\idth:90px;}
    
    .menu2 table {
    	border-collapse:collapse; 
    	border:0; 
    	margin:0; 
    	padding:0px; 
    	font-size:0em; 
    	position:absolute; 
    	left:0; 
    	top:0;
    }
    
    /* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
    
    .menu2 ul li:hover a,
    .menu2 ul li a:hover{
    	background:#2356B6; 
    	color:#fff;
    }
    
    .menu2 ul li:hover {position:relative; z-index:100;}
    * html .menu2 ul li a:hover {position:relative; z-index:100;}
    
    .menu2 ul li:hover ul,
    .menu2 ul li a:hover ul {
    	visibility:visible; 
    	position:absolute; 
    	height:auto; 
    	border:1px solid #2356B6; 
    	background:#7a7a7a;
    	padding: 0 15px 0 0; 
    	overflow:visible;
    	width:250px;
    }
    .menu2 ul li:hover ul li a,
    .menu2 ul li a:hover ul li a{
    	display:block; 
    	background:transparent; 
    	color:#fff; 
    	line-height:15px; 
    	padding:5px 0 5px 10px; 
    	height:auto; 
    	text-decoration:underline; 
    	width:250px;
    }
    
    .menu2 ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover {
    	background:#2356B6; 
    	color:#fff; 
    	width:250px;
    }
    .menu2 ul li:hover ul li ul,
    .menu2 ul li a:hover ul li a ul {
    	visibility:hidden; 
    	position:absolute; 
    	height:0; 
    	overflow:hidden; 
    	top:0; 
    	left:105px;
    }
    .menu2 ul li:hover ul li:hover ul,
    .menu2 ul li a:hover ul li a:hover ul {
    	visibility:visible; 
    	position:absolute; 
    	height:auto; 
    	color:#000; 
    	padding:0; 
    	border:1px solid #2356B6; 
    	list-style-type:none; 
    	background:#7a7a7a;
    }
    .menu2 ul li:hover ul li:hover ul li a,
    .menu2 ul li a:hover ul li a:hover ul li a {
    	display:block; 
    	background:transparent; 
    	color:#fff;
    }
    
    .menu2 ul li:hover ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover ul li a:hover {
    	background:#2356B6; 
    	color:#fff;
    }
    
    /*	************************************************************
    	End Specialty Market Flyout Menu
    	************************************************************
    */
    If you want to see the menu you can try this link - http://beta.testamericainc.com/servi...r-testing.aspx

    Thanks for all of your help!!!! I'm tired of banging my head on the desk! ;-)

  2. #2
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

  3. #3
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am also using Umbraco Navigation with dropdown. I am trying to solve the dropdowns with CSS and with no luck. Could you pass out the CSS if possible. That could help me solve the issue I have. Actually, my CSS works great with FF but not with IE.Here is the CSS that I use currently.

    #menu {
    width: 100%;
    background: #eee;
    float: left;
    }

    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /*width: 12em;*/
    float: left;
    }

    #menu a{
    font: bold 12px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 0px;
    border-style: none;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 0px 0px;
    }

    #menu li {position: relative;}

    #menu ul ul {
    position: absolute;
    z-index: 500;
    width:125%;
    margin: 0 px;
    padding: 0px 0px;
    border-color: #ccc #888 #555 #bbb;
    }

    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }

    #menu a:hover {
    color: #a00;
    background: #fff;
    }

    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}

    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul
    {display: block;}

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
  •