CODEWITHSUNDEEP
jqueryhtmlrounded-corners
JamesM
JamesM

Reputation: 1038

Jquery Rounded Corner & Div - Remove Gap?

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

Upvotes: 1

Views: 2444

Answers (4)

user100282
user100282

Reputation: 81

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.

Upvotes: 0

nickf
nickf

Reputation: 546503

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.

Upvotes: 0

Tyler Rash
Tyler Rash

Reputation: 1173

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

Upvotes: 1

Seb
Seb

Reputation: 25157

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.

Upvotes: 1

Related Questions