Xerxes Posted December 15, 2006 Share Posted December 15, 2006 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 More sharing options...
ste Posted December 15, 2006 Share Posted December 15, 2006 try adding to cssform {margin: 0; padding: 0;} Link to comment Share on other sites More sharing options...
Xerxes Posted December 15, 2006 Author Share Posted December 15, 2006 try adding to cssform {margin: 0; padding: 0;}no go I tried taking out the search form entirely, and the line still showed up.. Link to comment Share on other sites More sharing options...
jesh Posted December 15, 2006 Share Posted December 15, 2006 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 More sharing options...
Xerxes Posted December 15, 2006 Author Share Posted December 15, 2006 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 More sharing options...
jesh Posted December 15, 2006 Share Posted December 15, 2006 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 More sharing options...
Xerxes Posted December 18, 2006 Author Share Posted December 18, 2006 jesh,Thank you.. that worked like a charm.Your help is much appreciated! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now