Jquery Rounded Corner & Div - Remove Gap?

Answer 1

The corners plugin (at least the one I found in http://www.malsup.com/jquery/corner/) is invoked with "corner", not "corners".

Try using this instead:

<script type="text/javascript">
  $(document).ready( function(){
    $('.rounded').corner();
  });
</script>

That's working fine for me in IE 7 and Opera 10.

Answer 2

Remove the 25px bottom margin on the div#divOuter.

Answer 3

Controversial and possibly not helpful answer coming up:

Use:

-moz-border-radius      /* for firefox */
-webkit-border-radius   /* for webkit browsers */

And ignore Internet Explorer. Rounded corners are a visually nicety and usually not functional elements, so weigh up how much effort you want to put into getting it working for IE users when other, decent browsers make it so easy and reliable.

Answer 4

I believe that Tyler has the right answer. I would just like to add that I develop in FireFox for reasons like this. Using the Firebug add-on makes it much easier to trace down CSS problems like this. You can use "inspect" and select the offending objects and edit the CSS on the fly in FireBug to determine what is causing the gap.