html - CSS working in Firefox but not Chrome

Question

I have added a search menu to header.php in WordPress HTML:

 <!-- Collect the nav links, forms, and other content for toggling -->
                  <?php
                  // Main menu
                  echo $primary_menu;
                  ?>
                  <div id="search"><?php get_search_form();?></div>
                            </div><!--end container-->

I added <div id="search"><?php get_search_form();?></div> to the existing template.

I have made some style changes to the search menu: .input-group .form-control {height:36px !important;}

These changes are implemented in Firefox but are not visible in Chrome. When I inspect the element with Firebug you can see the code is visible. When I inspect the element in Chrome it doesn't (as far as I can see) appear at all.

I have not applied any cross browser CSS should I? What cardinal sin have I commited?

The website URL is: Homepage

Thanks.

Answer 1

You are using too many "!important" statements. Your CSS shows:

.input-group {
    margin-top: 10px !important;
    width: 380px !important;
    background-color: #f4f4f4 !important;
    height: 30px !important;
    margin-left: 450px !important;
}

and then:

.input-group .form-control {
    height:36px !important;
}

So you are applying !important twice and it is causing the problem. Please remove the statements and it should work:

.input-group {
    margin-top: 10px !important;
    width: 380px !important;
    background-color: #f4f4f4 !important;
    height: 30px;
    margin-left: 450px !important;
}

.input-group .form-control {
    height:36px;
}