CFMENU in IE6 shifts to the left and is wider than containing DIV_问答_开发者

CFMENU in IE6 shifts to the left and is wider than containing DIV

开发者 https://www.devze.com 2023-01-08 05:12 出处：网络

相关专题：coldfusion css

I have a horizontal CFMENU inside of a DIV, and in IE7/IE7/FF/Chrome, the menu is floated to the right, as specified in my CSS, but in IE6, the menu shifts to the left of the DIV that contains it, and it's width expands beyond the boundaries of the containing DIV. I've included all the applicable HTML and CSS below:

HTML:

<body>
     <div align="center">
         <div id="bodyContainer">
             <div class="contentContainer">
                 <div id="middlenav">
                     <div class="linksContainer">
                         <cfmenu name="ajaxMenu"  type="horizontal">

                        ...

                         </cfmenu>

                    </div>
                 </div>
             </div>
         </div>
     </div>
 </body>

CSS:

body, img, div, p, a, form, fieldset, ol, 开发者_JAVA百科ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
}



body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
}



div {
    overflow: hidden;
}



p, form, table, ol, ul {
    padding-top: 10px;
}



ol ul {
    padding-top: 5px;
    list-style-type: disc;
}



ol, ul {
    margin-left: 30px;
}



li {
    padding-bottom: 5px;
}



a {
    text-decoration: none;
}



a:hover {
    text-decoration: underline;
}



.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
}



.linksContainer a {
    font-size: 13px;
}



.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
}



#ajaxMenu {
    width: 960px;
}



#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
}



#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
}



#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
}



#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
}



/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
}



#ajaxMenu li {
    height: auto;
    width: auto;
}



#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
}



#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
}



#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;
}

I believe your main issues are that IE6 does not acknowledge the existence of the cfmenu as a valid tag for css targeting (it is not valid HTML), and further, even if that is changed to a valid tag like div it needs to have the id set, not the name, for css to style it.

IE6 usually gets thrown off by the "padding". Google "box model IE6". You can try zero-ing out the left and right padding and using margin's instead (if necessary) to fix the issue.