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)

New User

10+ Year Member

joined:Feb 19, 2005
votes: 0

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)

Junior Member

10+ Year Member

joined:July 14, 2003
votes: 0


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)

New User

10+ Year Member

joined:Feb 19, 2005
votes: 0

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.



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members