Forum Moderators: not2easy
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>
Your form will have a margin, padding and a border though the border might not matter as its blank.
Have you taken account of this by setting the
form {margin: 0px; padding: 0px; }
Also the textbox has a height that is bigger than a line so this could need styling.
Hope that helps
<form style="display:inline;" method="post" action="/cs_Search_Pro/csSearchPro.cgi"> and this sove the problem in IE.
All good learning for me.
Regards,
Robin
