SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flyout Menu Issue with I/E

    Hi,

    I am finishing up a new design for an old client and having trouble finding 2 problems that are caused by the css code for the flyout menu in I/E.

    The web site: Chicago Psychotherapist Counselor Grief and Loss Counseling and Consulting - Chicago, IL

    The problems: The flyout menu simply does not work in I/E.b The css code for the flyout menu is also causing each link on the page to be placed on a separate line. You can see this problem clearly in the breadcrumb trail links and the footer links.

    The css code:

    /* Start of Fly-Out Menu \*/

    #leftcolumn { width:180px; height:400px; float:left; background-color:#2c4486; }

    #leftcolumn #nav {font-size: 11pt; margin: 0px; font-family: arial; color: #FCC900;}

    ul, li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0px none;
    }

    ul {
    width: 176px;
    background: #2c4486;
    list-style-type: none;
    }

    li {
    position: relative;
    padding: 0px;
    z-index: 9;
    }

    li.folder {
    font: normal 11pt Arial, Tahoma, Sans-Serif, Helvetica;
    color: #EBDE78;
    padding: 2px 0 4px 5px;
    background-color: #2c4486;
    border : 0px;
    }

    li.folder:hover {
    z-index: 10;
    background-color: #FCC900;
    font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
    color: #2c4486;
    }

    li.folder ul {
    position: absolute;
    display: none;
    left: 160px; /* IE */
    top: 5px;
    }

    li.folder>ul {
    left: 160px;
    }

    ul.level1 li.folder:hover ul.level2 {
    display: block;
    width: 200px;
    }

    a {
    padding: 2px;
    text-decoration: none;
    width: 100%; /* IE */
    }

    li>a {
    width: auto;
    }

    li a.topmenu {
    padding-left: 1px;
    font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
    color: #FCC900;
    display: block;

    }

    li a.submenu {
    background-color: #2c4486;
    padding-left: 5px;
    font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
    color: #FCC900;
    display: block;
    border : 0px;
    padding-top: 3px;
    padding-bottom: 4px;
    }

    li.submenu:hover {
    z-index: 10;
    background-color: #FCC900;
    font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
    color: #2c4486;
    }

    li.explain {
    font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
    background-color: #2c4486;
    border : 0px;
    color: #FCC900;
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 190px;
    }

    a.topmenu:visited {
    color: #FCC900;
    }

    a.topmenu:hover {
    color: #FCC900;
    background-color: #2c4486;
    }

    #menu {
    border: 0px;
    margin: 0;
    padding: 0;
    width: 160px;
    }

    /* Hide from IE5-mac. Only IE-win sees this. \*/
    * html li.explain {
    width: 180px;
    }
    /* End hide from IE5/mac */

    a.topmenu:hover {
    color: #2c4486;
    }

    #menu {
    border: 0px solid #000000;
    margin: 0;
    padding: 0;
    width: 160px;
    }

    #link {
    font: 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
    padding: 0px 0px 0px 0px;
    margin-top: 0px;
    }

    /* End of Flyout Menu */

    -->

    Any help you can give me would be very much appreciated.

    Thanks

    (I posted this request on another CSS forum and the only response I received was a snarky "validate your code." If that is the only reponse I receive from anyone here, please include a link for me to go to to validate the CSS code. Yep, I never validate code but then neither does Google.)

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi, Welcome to SitePoint

    You have all versions of IE in quirks mode due to an incomplete doctype.
    Add the referring url to the end of it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    After doing that your flyout starts working but you have some other issues that need to be addressed. The menu text is centered in IE.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!

    You did find the problem and the solution. I was going around in circles with the CSS code. The other issues such as alignment I can work out myself.

    Now I just need to look up the meaning of "quirk mode."


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
  •