Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jQuery Rounded Corners Anomaly in IE

Posted on 2011-02-26
5
Medium Priority
?
848 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
[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
  • 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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

722 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