Hi,
I am trying to create a menu section on my website and have a problem in IE which makes the search box larger than the height of the search box and the rest of this line of Div's. It works fine in Netscape, Firefox and Opera. I have tried so many different combinations to try to get rid of this extra height that my head is spinning. I thought it might be to do with IE adding 3px to the width and I added margin-right: -3px but no different.
Can anyone guide me in the right direction?
Web page and code follows:-
<style type="text/css">
<!--
body {margin: 0; padding: 0; height: 100%;
min-width: 775px;
background-color: #efefef;
}
body, table, tr, td, p {
font-family:Arial, Verdana, Helvetica, serif;
font-size: 9pt;
color: #000000;
font-weight:normal;
}
#bgcontain {width: 775px; margin: 0 auto; border: solid #87cefa 0px; color: #000000; background-color:#ffffff; position: relative; top: 20px;}
#container {padding: 0;float: left; width: 100%; clear: both; min-height: 0px; border: dotted red 0px; color: #000000;}
/*\ IE/Win min height hack */
* html div.container {height: 0px;}
/* */
#leftwrap {float: left; width: 655px; border: solid blue 0px;}
#rightbar {float: right; width: 120px; background: #ffffcc; vertical-align: top;}
.leftbar {float: left; width: 100px; background: #993333; vertical-align: bottom; }
#content {float: right; width: 555px; min-height: 100%; background: #ffffff;}
#footer, #header {width: 775px; margin: 0 auto; background: #efefef; clear: both;}
a{color:#993333; text-decoration:none; font-weight:bold;}
a:hover{color:#ff0000; text-decoration:underline; font-weight:bold;}
/* general */
p {margin: 0; padding: 0px;}
.searchinput {background-color: #ffffff; border: 1px solid #666666; height:20px; display:inline;}
.menu-tab{background-color:#ffffff;background-image: url(/images/menu/bigtab.gif);background-repeat:no-repeat;text-align:center; vertical-align:middle; display:inline;}
.tr{background: none #ffffcc; border: solid #000000 0px; color: #000000; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; padding: 0; text-align: center; width: 100%; background-color:green;}
.td{border: none; float: left; margin: 0; padding: 0; background-color:#87cefa;}
.brown{background-color:#993333; color:#000000; font-size:10pt;}
.white{background-color:#ffffff; color:#000000; font-size:10pt;}
.cream{background-color:#ffcc99; color:#000000; font-size:10pt;}
-->
</style>
</head>
<body>
<div id="bgcontain">
<div id="container">
<div class="brown" style="width:100px; height:26px; float:left;"> </div>
<div class="cream" style="width:375px; height:26px; float:left;">Main Menu Section</div>
<div class="brown" style="width:180px; height:26px; float:left;">
<form method="post" action="/cs_Search_Pro/csSearchPro.cgi">
<input type="hidden" name="command" value="query" />
<input type="hidden" name="mbool" value="AND" />
<input type="hidden" name="mcase" value="Insensitive" />
<input class="searchinput" onFocus="this.value='';" onBlur="if(this.value=='') {this.value='Search this site for...';}" type="text" name="terms" value="Search this site for..." />
</form>
</div>
<div class="cream" style="width:120px; height:26px; float:left; margin-right: -3px">Right Section</div>
</div>
</div>
