Solved

jQuery Rounded Corners Anomaly in IE

Posted on 2011-02-26
5
829 Views
Last Modified: 2012-05-11
Hello Experts -
I have run across what appears to be an IE anomaly (surprise, surprise) in a widely used jQuery plug-in and am wondering if there might be a workaround.  It's a rounded corners plug-in (http://jquery.malsup.com/corner/) and I'm attempting to integrate it into a Visual Web Developer '08 site that I'm building which uses master pages.

The anomaly appears in IE when a background image is used in the body CSS implemented for the master page.  It doesn't occur when a fixed RGB value is used as the background-color in the master page.

--------------------------

Sample code - Master page (test.master):

<%@ Master Language="VB" CodeFile="test.master.vb" Inherits="test" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        body { background: url('bg_gray.png') repeat left top #EEEEEE; }
        /* body { background-color: #8C8C8C; } */
        #box1 { height: 200px; width: 300px; background-color: #87CEEB; }
    </style>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script src="jquery.corner.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#box1').corner('30px');
        });
    </script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="box1">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

The background image file (1px by 1px) is attached and I know that I could accomplish the same thing in this example with a background-color - I use this image for simplicity and illustration of the issue.

--------------------------

Sample code - base page (corners_master.aspx):

<%@ Page Title="" Language="VB" MasterPageFile="~/test.master" AutoEventWireup="false" CodeFile="corners_master.aspx.vb" Inherits="corners_master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">/asp:Content>

--------------------------

The anomaly can be switched on and off (via running corners_master.aspx) in the sample code with the two different lines of body CSS.

My question..  Is there a way around this?  I do have a need to use a background image in my master page and would very much like to use the plug-in as long as it can render properly in IE.  Any suggestions?

Thanks all.

- Rick
bg-gray.png
0
Comment
Question by:MinnRick
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:Steve Krile
Comment Utility
I've tested your sample code in IE8 and FireFox and they both behave more or less the same.  In your question you suggest there is an "anomaly" but you don't specify what you are seeing that's "wrong".  

I did notice that (in my example code below) when I viewed the content section (id="box1") in FireFox with your code, I could see my words Hi There, and in IE8, those words were obscured by the top left corner.  However, with a little extra css added to the definition of the box (#box1 { height: 200px; width: 300px; background-color: #87CEEB; padding:10px;}), everything looks good in both browsers.
<!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>
    <title></title>
    <style type="text/css">
        body { background: url('bg_gray.png') repeat left top #EEEEEE; }
        /* body { background-color: #8C8C8C; } */
        #box1 { height: 200px; width: 300px; background-color: #87CEEB; padding:10px;}
    </style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#box1').corner('30px');
        });
    </script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="box1">
        <div>Hi there</div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 

Author Comment

by:MinnRick
Comment Utility
Thank you for the reply but you aren't using a master page in your example, which is where I'm running into the problem.

The issue (apologies for not clarifying this) is that in IE (Firefox is fine) the master page-styled div renders (in the non-master page) with two visible sets of corners for the #box1 div - one set of rounded blue corners and another set of white non-rounded corners behind them.
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 500 total points
Comment Utility
Right you are...this is not a Master Page, but the HTML that is rendered is identical. However, i will concede that this isn't always the case!  So, I fired up a new project and configured this example.  I cannot make the behavior you describe happen.  

Here is my Master Page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="WebApplication1.Site" %>

<!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 id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body { background: url('bg_gray.png') repeat left top #EEEEEE; }
        /* body { background-color: #8C8C8C; } */
        #box1 { height: 200px; width: 300px; background-color: #87CEEB; padding:10px;}
    </style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#box1').corner('30px');
        });
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="box1">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window



And here is the content page:
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="Head">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
Hi there
</asp:Content>

Open in new window



Other than including the bg-gray.png file I have done nothing else to this project (no other styles applied).  I've tested this page (default.aspx) in FF, IE 8, IE 8-64bit, IE 7, and can't seem to get the behavior you mention.

So, could it be another piece of style you are applying?  Do you have the most recent version of the Rounded Corners js?  Are you using the most recent version of jquery?  If you create a new project and do as I do, do you get the same results?

If so, have you configured your IE options to apply a custom background color?

After that, I'm out of ideas for you I fear.
0
 

Author Comment

by:MinnRick
Comment Utility
Thanks very much for the effort skrile..  still no joy on my side.  I cut and pasted your code right over my own.  Attached is a screenshot of #box1 as it's getting rendered in my IE8.  jQuery versions are current and as for the background-color suggestion my design uses a gradient color look, which has to be accomplished (as far as I know) with a background-image.  At this point I've spent pretty much all that I have to spend chasing this - guess I'll concede defeat to IE and resort to rounded corner images..  * sigh *

Points are all yours and if you should happen to come up with any other ideas please don't hesitate to send them my way.  Thanks again.

- Rick
corners-ie.png
0
 

Author Closing Comment

by:MinnRick
Comment Utility
Must be something weird in my system or config - I'm sure that skrile's is sound.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now