SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Submenu not working in IE 7,8 & 9

    I created sub menus on a website but when I mouse over the parent link, the sub menus are displayed horizontally instead of vertically. They work fine in Chrome and Firefox.

    Here's the HTML code for the menu

    Code:
    <div class="suckertreemenu">
                    <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About Us</a>
                        <ul>
                          <li><a href="#"> Overview</a></li>
                          <li><a href="#"> What do we deliver? </a></li>
                          <li><a href="#"> Our People</a>
                            <ul>
                              <li><a href="#"> Management</a></li>
                              <li><a href="#"> Consultants</a></li>
                            </ul>
                          </li>
                          <li><a href="#">What is it like working with us?</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Solutions</a>
                        <ul>
                          <li><a href="#">Business Model</a>
                            <ul>
                              <li><a href="#">Business Consulting</a></li>
                              <li><a href="#">Technology Consulting</a></li>
                              <li><a href="#"> Managed Services Consulting</a></li>
                            </ul>
                          </li>
                          <li><a href="#">Modus Operandi</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Industries</a></li>
                      <li><a href="#">Alliances</a></li>
                      <li><a href="#">News</a></li>
                      <li><a href="#">Contact Us</a></li>
                    </ul>
                  </div>
    Here's my CSS code below

    Code:
    @charset "utf-8";
    /* CSS Document */
    Body{
    	margin:0;
    	padding:0;
    	background-color:#DCDCDC;
    	color:#000;
    	font-family: Arial, Helvetica, sans-serif;
    	/*font-size:12px;*/
    	
    }
    .bodytext{
        font-size:12px;
    }
    H1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    background-image:url(../images/welc_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    P{
     font-size:12px;
    }
    h3{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#000000;
    border-bottom:#FF0000 solid 1px;
    padding:5px 5px 5px 5px;
    }
    .btext{
     font-size:12px;
    }
    H2 a:link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#666666;
    background-image:url(../images/news_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    H2 a:visited{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#666666;
    background-image:url(../images/news_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    H2 a:active{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#666666;
    background-image:url(../images/news_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    H2 a:hover{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color: #FF0000;
    background-image:url(../images/news_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    H2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#666666;
    background-image:url(../images/news_image.jpg);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:12px;
    }
    .ik img {
    	background: #ebebeb;
    	border: solid 1px #d1d1d1;
    	padding: 5px;
    }
    #nav{
    	
    	background-image: url(../images_v2/bg_grad_02.gif);
    }
    li{
    list-style-image: url(../images/bullet2.gif);
    font-size:12px;
    list-height:30px;
    }
    .ContactUS
    {
    	
    	color: #FFF;
    }
    .footer
    {
    	font-size:11px;
    	color: #000;
    }
    .businessText {
    	font-size: 12px;font-size:12px;
    	color: #FFF;
    	font-weight:bold
    }
    
    .searchText {
    	font-size: 12px;
    	color: grey;
    }
    .partners {
    	text-align: center;
    	color:#000;
    	font-size: 12px;
    }
    
    .Block_Headers {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #D9D9D9;
    }
    
    
    .searchBox{
    background:url(../images_v2/tboxfill.gif)
    }
    
    .suckertreemenu ul{
    margin: 0;
    padding: 2px 0 0 0;
    float: left;
    font: 14px Arial;
    text-align:left;
    height:29px;
    z-index:100;
    }
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    
    /*background-color: #F3F3F3;*/ /*overall menu background color*/
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    float: left;
    color: white;
    padding: 5px 11px;
    text-decoration: none;
    background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/
    font: 14px Arial;
    }
    .suckertreemenu ul li a:link{
    float: left;
    color: white;
    padding: 5px 11px;
    text-decoration: none;
    
    }
    .suckertreemenu ul li a:visited{
    float: left;
    color: white;
    padding: 5px 11px;
    text-decoration: none;
    
    }
    .suckertreemenu ul li a:active{
    float: left;
    color: white;
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    background-color: #BD0021;
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    	left: 0;
    	position: absolute;
    	top: 1em; /* no need to change, as true value set by script */
    	display: block;
    	visibility: hidden;
    	font: normal 13px Arial;
    	
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    	display: list-item;
    	list-style:none;
    	float: left;
    top: 14px;
    
    }
    
    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{ 
    	left: 159px; /* no need to change, as true value set by script */
    	top: -16px;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    	display: block;
    	width: 160px; /*width of sub menu levels*/
    	text-decoration: none;
    	background-color: #31458C;
    	color: white;
    	/*font-weight:normal;*/
    	padding: 10px 11px;
    	border-top: 1px solid white;
    	border-right: 1px solid ;
    	border-left: 1px solid ;
    	background:none;
    	
    }
    .suckertreemenu ul li ul li a:link{
    	display: block;
    	width: 160px; /*width of sub menu levels*/
    	text-decoration: none;
    	background-color: #31458C;
    	color: white;
    	/*font-weight:normal;*/
    	padding: 5px 11px;
    	border-top: 1px solid white;
    	border-right: 1px solid ;
    }
    .suckertreemenu ul li ul li a:visited{
    	display: block;
    	width: 160px; /*width of sub menu levels*/
    	text-decoration: none;
    	background-color: #31458C;
    	color: white;
    	/*font-weight:normal;*/
    	padding: 5px 11px;
    	border-top: 1px solid white;
    	border-right: 1px solid ;
    }
    .suckertreemenu ul li ul li a:active{
    	display: block;
    	width: 160px; /*width of sub menu levels*/
    	text-decoration: none;
    	background-color: #31458C;
    	color: white;
    	/*font-weight:normal;*/
    	padding: 5px 11px;
    	border-top: 1px solid white;
    	border-right: 1px solid ;
    }
    .suckertreemenu ul li ul li a:hover{
    	background-color: #BD0021;
    	color: white;
    	border-bottom: none;
    	/*font-weight:normal;*/
    
    }
    
    #current{
    	border-bottom:#AA0B34 solid 3px;
    	color: white;
    	
    }
    
    
    .suckertreemenu ul li a:hover{
    	
    	color: red;
    }
    
    .suckertreemenu ul li a:active{
    border-bottom:#BD0021 solid 3px;
    color: white;
    /*font-weight:normal;*/
    
    }
    
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
     /* Holly Hack for IE \*/
    * html .suckertreemenu ul li ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li ul li a { height: 1%; }
    /* End */
    /* End */
    See image below

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

    That code doesn't seem to display the result you are showing (besides the fact that there is no support for it to work with css anyway).

    I would guess that the nested floated lists need clearing so that they stack vertically.
    e.g.
    Code:
    .suckertreemenu ul li ul li{clear:left}
    I also assume you have a full doctype etc.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    This mess here:
    Code:
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
     /* Holly Hack for IE \*/
    * html .suckertreemenu ul li ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li ul li a { height: 1%; }
    Is a pretty good indication that something is HORRIBLY wrong with how that's built, but without seeing it live in an actual page it's hard for me to say what... I don't see a state-change on the hover effects... so IE could be sticking open or closed depending on the screen positioning -- and in general I suspect your menu code is WAY too complex for it's own good... Though that goes hand in hand with the 'suckertreemenu' "div for no reason", incomplete font declarations, z-index that should be unnecessary (though without seeing the rest of the page content that's a guess) and redundant being assigned over and over and over again for NOTHING. (see every one of your suedo's on those anchors)

    Of course I see NOTHING to make this actually work as a flyout menu in the first place so I'm assuming that you are using javascript to do CSS' Job?

    The px assignment commented out on BODY and the class after also raises warning flags -- since you should NEVER declare content areas in px, and setting it that early neuters ANY chance of building an accessible page...

  4. #4
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    Hi,

    That code doesn't seem to display the result you are showing (besides the fact that there is no support for it to work with css anyway).

    I would guess that the nested floated lists need clearing so that they stack vertically.
    e.g.
    Code:
    .suckertreemenu ul li ul li{clear:left}
    I also assume you have a full doctype etc.
    Thank you very much Paul O'B. This solved the issue


Tags for this Thread

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
  •