ColdFusion datefield interfering other CSS

Question

When I add a cfinput type="datefield", the ColdFusion CFIDE/scripts are interfering another div on the page.

Good:

Bad:

The code:

<aside id="sideLeft">
<--- CMS generated --->
<div  class="ktcssmenu thenav_ff_green"><div class="ktvertical ktopts_showtimeout_100 ktopts_hidetimeout_100 ktopts_imgreplace_no ktopts_imgreplacestyle_img ktopts_imgdir_ ktopts_imgnames_">
<ul class='lev1 clearfix'><li class="lev1 pos1 lev1_pos1 first lev1_first"><a href="/hr/index.cfm" class="lev1 pos1 lev1_pos1 first lev1_first" target="_self">Human Resources Home</a></li>
<li class="lev1 pos2 lev1_pos2 last lev1_last"><a href="http://www.blah.com/hr" class="lev1 pos2 lev1_pos2 last lev1_last" target="_new">Public Site</a></li>
</ul></div></div>
<--- regular non-CMS code --->
        <div class="gspecial">
            Restricted Access
            <a href="url.cfm">New Hire Forms</a>
            <a href="url.cfm">Jobs / Employment Admin</a>
            <a href="url.cfm">Eligibility Lists Admin</a>
        </div>  
...     

The CSS:

#sideLeft {
    float: left;
    width: 230px;
    margin-left: -100%;
    position: relative;
    padding: 10px 10px 10px 10px;
    background-color: #f5f5f5;
    border: 1px solid #d5d5d5;
    }
/* test */
.thenav_ff_green {
    border: dashed 5px #990000;
    } 
.gspecial {
    border: dotted 5px #003333;
    }

---

The website is using a CMS, and I cannot edit much within the "green" pre-packaged Navigation.

The ColdFusion CFIDE/script causing my headache is /CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js

I have tried various CSS clearing and floating.

I am willing to try anything again. Thanks.

Answer 1

I feel the best solution would be to not use cfinput, and instead try something like this: http://jqueryui.com/datepicker/#icon-trigger

Then you'll have much more control over the styling, and functionality as it's something you can actually edit, rather than just receiving whatever rolled in js/css cfinput gives you.

otherwise you might just have to use firebug to find what exactly is causing the issue to add in some extra css to fix it.

CSS bugs like this are tricky to debug without having an example page to play with. Any way you can simmer this down to a page you can share with us?