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, 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;
}