Solved

jQuery Rounded Corners Anomaly in IE

Posted on 2011-02-26
5
837 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 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Conformation code 4 36
center div inside another div 2 32
My tooltip is not displaying correct 11 16
Javascript function 3 20
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

739 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