Extra Space in IE on search box

[Xerxes]

Hello,I am having a small issue that only happens in IE.Sports Card ChecklistThe seach box has a few pixels of the background color show up under it.In every other browser it is fine, but not IE (big suprise there)Here is the CSS for the search div:#search { background-color:#b16100; float:right; width:149px; height:auto; padding:0px; margin:0px; }Any ideas?Thank you

[ste]

try adding to cssform {margin: 0; padding: 0;}

[Xerxes]

try adding to cssform {margin: 0; padding: 0;}

no go I tried taking out the search form entirely, and the line still showed up..

[jesh]

When I load this in Firefox, this is the source I see for the search form:

	<div id="search">	 <img src="/images/search_top.gif" /> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

When I load this in IE6, this is the source I see:

	<div id="search">	 <img src="/images/search_top.gif" />	 <label>	 <input name="textfield" type="text" size="15" />	 </label> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

Maybe if the source was the same for both browsers, you'd get that same display glitch.

[Xerxes]

When I load this in Firefox, this is the source I see for the search form:

	<div id="search">	 <img src="/images/search_top.gif" /> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

When I load this in IE6, this is the source I see:

	<div id="search">	 <img src="/images/search_top.gif" />	 <label>	 <input name="textfield" type="text" size="15" />	 </label> 	<img src="/images/search_advanced.gif"/><img src="/images/search_go.gif"/>	</div>

Maybe if the source was the same for both browsers, you'd get that same display glitch.

I think you may have just viewed it while I was uploading the index page. I tried taking the label out and seeing if that fixed any problems.

[jesh]

I think you may have just viewed it while I was uploading the index page. I tried taking the label out and seeing if that fixed any problems.

Heh, that must have been it. I played with your code a bit and this seems to have fixed it (I'll display the relevant parts).CSS:

#search {	background-color:#b16100;	float:right;	width:149px;	height:auto;	padding:0px;	margin:0px;	}#search img { display: block; }

HTML:

<div id="search">  <img src="/images/search_top.gif" />  <input name="textfield" type="text" size="15" />  <img src="/images/search_advanced.gif" style="float:left;" />  <img src="/images/search_go.gif" style="float:left;" /></div>

The images had a bottom margin of about 5px. Don't know why though. Changing the display for the images to "block" got rid of it.

[Xerxes]

jesh,Thank you.. that worked like a charm.Your help is much appreciated!