Edit Question - KnowledgeHub

Title Body

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in firefox: firefox example http://grab.by/65Bn and here's one in chrome chrome: chrome example http://grab.by/65BB fieldset has a relative position and the image has an absolute position. here's the basic structure: <fieldset class="passenger-info"> <legend>Passenger 1</legend> <div class="remove-me"> <img src="/images/delete-icon-sm.png" /> </div> </fieldset> basically the image is declared right after the legend. here's the css for fieldset: .passenger-info { background:none repeat scroll 0 0 #F2F2F2; border:1px solid #9D240F; display:inline; float:left; margin-bottom:10px; margin-right:10px; padding:3px 10px; position:relative; width:350px; } and for the remove-me image: .remove-me { border:1px solid red; position:absolute; right:0; top:0; } it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner. This post shows that FF does indeed have problems with rendering fieldsets. http://www.codingforums.com/showthread.php?t=132624 Is there a better way of doing a fix without using a browser specific hack?

Tags (comma-separated) Cancel