I have a dropdown appearing in Firefox correctly via CSS but it is in the wrong position in Internet Explorer 6.0 and 7.0. It is using Absolute positioning. If you think you can fix it, I will paypal you $8. <div id="top"> <div id="topright"> <form id="form1" name="form1" method="post" action="/"> <input name="txtSearch" type="text" class="formtext" id="txtSearch" maxlength="30" onkeyup="searchSuggest();" autocomplete="off"/> <input name="search" type="submit" class="formbutton" value="Search"/> </form> <div id="search_suggest"></div> </div> Code (markup): The element in question is "search_suggest". This is what I currently have for it that works in Firefox: #top { width: 800px; margin: 0 auto; } #topleft { width: 310px; } #topright { width: 478px; float: right; text-align: right; margin-top: 5px; } #search_suggest { width: 288px; left: 558px; float: right; background-color: #FFFFFF; text-align: left; position:absolute; border: 0px; } Code (markup):
You might want to try adding this to the CSS: form { padding:0px;margin:0px; } input { padding:0px;margin:0px; } Code (markup): I think what is causing your problem is that IE and Firefox pad form elements differently by default, so the above CSS can force both browsers to render the elements the same.
Thanks SubJunk. I tried it on Firefox and IE 7.0 and although the drop down is still a little different, it is much better than before. I'm going to try it on IE 6.0 later today and if it's fixed there then I will paypal you the money.