Jump to content

Extra Space in IE on search box


Xerxes
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...