Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery Rounded Corners Anomaly in IE

Posted on 2011-02-26
5
Medium Priority
?
854 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
ID: 34998199
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
ID: 35004293
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 1500 total points
ID: 35006373
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
ID: 35014901
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
ID: 35014909
Must be something weird in my system or config - I'm sure that skrile's is sound.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

916 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