Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Add 'Form' and IE layout go wrong

IE add extra height to search box form



11:40 am on Mar 10, 2005 (gmt 0)

10+ Year Member

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;

#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;}


<div id="bgcontain">

<div id="container">
<div class="brown" style="width:100px; height:26px; float:left;">&nbsp;</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..." />

<div class="cream" style="width:120px; height:26px; float:left; margin-right: -3px">Right Section</div>



11:47 am on Mar 10, 2005 (gmt 0)

10+ Year Member


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


6:50 pm on Mar 11, 2005 (gmt 0)

10+ Year Member

Thanks for your suggestion. I did add margin and border = "0" but did not help. However this put me on the right track and all I had to do in the end was add display:inline as follows.

<form style="display:inline;" method="post" action="/cs_Search_Pro/csSearchPro.cgi"> and this sove the problem in IE.

All good learning for me.



Featured Threads

Hot Threads This Week

Hot Threads This Month