IE7 CSS rendering issue

Question

I am using Kartris for an ecommerce site. Looks great in all browsers except for IE7. The page in question is: http://mellcrest.thecalicotree.co.uk/kartris/Default.aspx?

The following elements are both displaying strangely, the searchbox is not displaying at all.

 <user:NavigationMenu ID="UC_NavigationMenu" runat="server" EnableViewState="False" />
 <user:SearchBox runat="server" ID="UC_SearchBox" />

CSS for navigation menu is:

#section_searchbox 
{
    background-color:#5e99d2;
    height: 23px;
    background-image: url(images/menu_back.jpg);
    background-repeat: repeat-x;
    border-bottom: solid 1px #01366A;
    border-top: solid 1px #01366A;
    position:relative; 
    z-index:1;

}

#section_searchbox #searchprogress
{

    padding: 0 0 0 0;
    background-color:#5e99d2;
}

#section_searchbox #searchboxes
{
    position: relative;
    padding: 2px 7px 1px 7px;
    float: left;
    background-color:#5e99d2;
    background-image: url(images/menu_back.jpg);
    background-repeat: repeat-x;
}

#section_searchbox #searchboxes input
{
    width: 200px;
}

#section_searchbox #searchboxes input.button
{
    width: 50px;
}

#section_searchbox #searchboxes input.button:focus
{
    border: 0px;
}

Answer 1

Add this script just before the closing of the </head> tag:

<!--[if IE 7]>
    <style type="text/css">

        /* Fixes the display of the menu */
        #header {
            height:113px;
        }

        /* Fixes the search box display */
        #menubar {
            width: 640px;
        }

        /* Fixes the display of boxes in rows
           (IE7 doesn't understand display: inline-block)
        */
        .slideshow, .slideshow2, .slideshow3, .slideshow4, .slideshow5, .slideshow6 {
            float: left;
        }

        /* Fixes the animation transition */
        .slideshow a, .slideshow2 a, .slideshow3 a, .slideshow4 a, .slideshow5 a, .slideshow6 a {
            height: 233px;
            width: 233px;
        }

        /* Fixes the focus of the searchbox. */
        #searchboxes {
            position: relative;
            z-index: 100;
        }
    </style>
<![endif]-->

It fixes most of your display problems.

For me, the menu and header are displayed the same way (in my IETester) as on recent browsers (I compared with chrome).