homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Add 'Form' and IE layout go wrong
IE add extra height to search box form

10+ Year Member

Msg#: 5928 posted 11:40 am on Mar 10, 2005 (gmt 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>




10+ Year Member

Msg#: 5928 posted 11:47 am on Mar 10, 2005 (gmt 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


10+ Year Member

Msg#: 5928 posted 6:50 pm on Mar 11, 2005 (gmt 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.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved