Why does this css + html work in Firefox but not IE?

  • Thread starter Thread starter Will
  • Start date Start date
W

Will

Guest
I want a (25x24px) image to line up on the right hand side of an input field.

So within a div i can do,

//html
<div id="apDiv3">
<input type = "text" size = "26"/><img src = "images/search.gif" />
</div>

//css
#apDiv3 input{float:left;height:16px;padding:2px;}

I don't really understand the css but it works well in FF, whereas in IE the text field is firstly, shorter than in FF and secondly also there is small gap betwen the right hand side of the text field and the starting left hand side of the image, very small gap but definately noticable?? why is this..
That is all the css all that was removed was the closing } and semi colon.....
not even semi colon actually just }
 
IE6 renders padding and margin differently than firefox/chrome/safari/opera. Check out the box model for more information on spacing.

http://en.wikipedia.org/wiki/File:W3C_and_Internet_Explorer_box_models.png
 
Back
Top