Jquery Rounded Corner & Div - Remove Gap?

StackOverflow https://stackoverflow.com/questions/686295

  •  22-08-2019
  •  | 
  •  

Question

Can anyone tell me how to remove the gap that is generated in the middle of the div, from the following code: (paste and name test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <script src="http://www.google.com/jsapi"></script>
   <script>google.load("jquery", "1.2.6")</script>
   <script src="jquery.corners.js"></script>
 </head>
<body>

<div id="divOuterOuter" style="width: 448px; height: 157px; padding-right:
0px;padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;">

  <div style="width: 448px; height: 120px; background-color:#d1ddf1; padding-right: 
  0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 25px; padding-top: 
  0px;" 
  id="divOuter" class="rounded {20px}"> 
  </div>
</div>

 <script>$(document).ready( function(){
        $('.rounded').corners();
        });</script>
</body>
</html>

Thanks in advance!

Example Of Problem Example Problem http://image2.humyo.com/I/9176883-444407271/M2QyZmIxYThiMDVhM2NlODYwMjM4MDI2MDA0MmI5Y2I=/450/450/0/1238082866.jpg

Was it helpful?

Solution

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.

OTHER TIPS

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top