Need quick CSS Fix (Absolute Positioning in Firefox vs IE)

Discussion in 'Programming' started by totoros, May 13, 2007.

  1. #1
    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):
     
    totoros, May 13, 2007 IP
  2. SubJunk

    SubJunk Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    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.
     
    SubJunk, May 13, 2007 IP
  3. totoros

    totoros Peon

    Messages:
    528
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    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.
     
    totoros, May 14, 2007 IP
  4. SubJunk

    SubJunk Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    No problems, and don't wory about money I'm just helping :) I'll continue to help via PM
     
    SubJunk, May 14, 2007 IP