Solved

JQuery Plugin Rounded corners

Posted on 2010-11-15
3
429 Views
Last Modified: 2012-05-10
I'm trying to get borders to display properly with this plugin:

http://jquery.malsup.com/corner/

On the page it says to use the keep option, but it does not give an option to specify what colour the border should be , if I specify the type of border in a stylesheet: like (border:1px solid #d4d4d4;) it shows the border great in firefox, but in ie6 and 8 it shows the border but not to the contours of the rounded box (ie square)

Has anyone had any experiences with this and can offer a solution?

Code Below

Darren
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<style>

#headerticket{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#c8d0d6');
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#c8d0d6');
background: -moz-linear-gradient(top,#fdfdfd,#c8d0d6);
background:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#c8d0d6));
height:100px;
width:100px;
border:1px solid #d4d4d4;
}
</style>
<script type="text/javascript">
$(function(){
$('#headerticket').corner("keep");
});

</script>
</head>

<body>
<div id='headerticket'></div>
</body>

Open in new window

0
Comment
Question by:darren-w-
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34135633
I'm not sure of how this plugin works, but you should now that CSS3 properties for rounding object's corners (in wich standard jquery rounding is based) doesn't work on current IE versions because they're not implemented yet.

You can take a look at this msdn article where IE rounding corners is explained.

http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx
0
 
LVL 13

Accepted Solution

by:
darren-w- earned 0 total points
ID: 34136605
Hi,

The plugin works fine generally with rounding div's it just does not handle the borders very well, have know used curvycorners to tackle this problem.

Darren
0
 
LVL 13

Author Closing Comment

by:darren-w-
ID: 34178996
found alternative solution
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question