homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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
robinantill

5+ Year Member



 
Msg#: 5928 posted 11:40 am on Mar 10, 2005 (gmt 0)

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;">&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..." />
</form>
</div>

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

</div>

 

Mr_Brutal

10+ Year Member



 
Msg#: 5928 posted 11:47 am on Mar 10, 2005 (gmt 0)

Hi,

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

robinantill

5+ Year Member



 
Msg#: 5928 posted 6:50 pm on Mar 11, 2005 (gmt 0)

Hi,
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.

Regards,
Robin

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