Why is MVC 4 basic CSS jacking up jquery-ui's dialog box?

Any css ninjas might be able to guess why when I include MVC 4's basic css file in my project it causes Jquery UI's dialog box to have issues? The title bar appears next to the content and of course everything is all jammed up - needless to say, it doesn't look good.

I am no HTML ninja but it seems like something is causing a "float: left" or something like that although I can see right in the HTML (using firebug) that "display: block;"

Uhm - here is the HTML that and JS that I am using however I don't know that it really helps.

            title: "Add New Company",
            autoOpen: false

        $("#addCompanyLink").click(function (evt) {

<div id="addCompanyDialog" style="display:none; background-color: yellow; ">
    <input type="text" id="companyName"/>
    <input type="submit" id="addCompany" value="Add Company"/>

if I comment out this line


The dialog box is back to normal i.e. the title bar above the textbox and button.



I found it - They override some jquery-ui stuff in there. Here is the offending bit of CSS

.ui-dialog-titlebar {
    color: inherit;
    font-weight: inherit;
    border: 0 none;
    background: none;
   /* float: right;*/    

I kept searching for div and actually searched for "float" but missed this last night, I thought it was worth looking for because it is a pretty good CSS template to start with so maybe this will help someone else.


Need Your Help

does jquery .post or ui dialog have a "please wait . ." icon option?

jquery asp.net-mvc post dialog

when i click on a link, i have a jquery .post call in a javascript function. This calls a controller action which returns a partialresult into a jquery ui dialog.

How to use DbContext for EntityDatasource in EF 6.1.1

c# asp.net entity-framework dbcontext entitydatasource

I have an ASP.NET Web Forms application which uses .NET framework v4.5 and EF v6.1.1.