This is a migrated thread and some comments may be shown as answers.

RadWindow close button w/ OnHover CSS not working as expected under Opera

4 Answers 126 Views
Button
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 06 Sep 2011, 11:58 PM
Hi Telerik,

I am experiencing a weird quirk while developing under the Opera browser. 

Version information
Version
11.51
 
Build
1087
 
Platform
Win32
 
System
Windows 7
 
XHTML+Voice
Plug-in not loaded
 
Browser identification
 
Opera/9.80 (Windows NT 6.1; U; Edition United States Local; en) Presto/2.9.168 Version/11.51

I have this CSS property set on my dashboard page which is responsible for opening the corresponding RadWindow:

.RadWindow_Web20 .rwCloseButton:hover
{
    cursor: pointer;
}

and this is what happens when I mouse-over that icon in Opera: http://screencast.com/t/WMiaaJC3

with relevant code-behind:

<tr class="rwTitleRow">
<td class="rwCorner rwTopLeft"> </td>
<td class="rwTitlebar" style="cursor: move">
<div class="rwTopResize">
<!-- / -->
</div>
<table align="left" cellspacing="0" cellpadding="0" class="rwTitlebarControls">
<tbody>
<tr>
<td style="width: 16px">
<a class="rwIcon" style="background-position: 0px 0px; background-color: transparent; background-attachment: scroll; background-repeat: no-repeat; background-image: url("http://localhost/csweb_IISVS2010/Content/Dashboard/Icons/drive-upload.png"); background-size: auto; background-origin: padding-box; background-clip: border-box"/>
</td>
<td>
<em unselectable="on" style="width: 194px">Upload Dashboard</em>
</td>
<td nowrap="true" style="white-space: nowrap">
<ul class="rwControlButtons" style="width: 30px">
<li>
<a href="javascript:void(0);" class="rwCloseButton" title="Close">
<span>Close</span>
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rwCorner rwTopRight"> </td>
</tr>

Weird, right? Any ideas, or is this a browser thing?

4 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 2
answered on 07 Sep 2011, 01:16 PM
Hello Sean,

Wouldn't you achieve the same result if you remove the 'hover' part, since it's a link. Perhaps that will resolve your issue.
0
Sean
Top achievements
Rank 2
answered on 07 Sep 2011, 05:32 PM
Hey Kevin,

Good question. I can explain, partially, why this is not the case.

In the original implementation of RadWindow, the rwCloseButton opts to not use default pointer settings. Instead, when the mouse hovers over the area, the background of the button changes instead of the mouse pointer. 

I didn't care much for the icon being displayed on the default RadWindow. As such, I applied this CSS:

.RadWindow_Web20 .rwCloseButton
{
    background: url(./Icons/radwindow_close.png) no-repeat !important;
}

This CSS caused the icon to change to what I had desired, but removed the onhover:highlight button functionality. Now, without highlighting functionality, the mouse pointer looks weird. So, I applied this css:

.RadWindow_Web20 .rwCloseButton:hover
{
    cursor: pointer;
}

which causes the mouse pointer to look as-expected in all browsers except Opera.

I'm assuming the solution is some sort of clear/reset CSS, but I am still new to learning the tricks of web development. :)

Cheers,

Sean
0
Bozhidar
Telerik team
answered on 08 Sep 2011, 04:05 PM
Hi Sean,

I have tested a RadWindow with custom close button and everything works as expected in all major browser, including the cursor: pointer rule in Opera:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <style type="text/css">
        div.RadWindow_Web20 a.rwCloseButton,
        div.RadWindow_Web20 a.rwCloseButton:hover
        {
            background-image: url(http://conpro.tnc.org/button-close.png);
            background-position: 0 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scrman1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindow ID="radw1" runat="server" VisibleOnPageLoad="true" Width="300"
        Height="300" Skin="Web20" Behaviors="Close">
    </telerik:RadWindow>
    </form>
</body>
</html>

I have used an image with absolute url found in Google in order not to attach some extra files to the code sample.

In you case, I suppose the code does not work as you could not override the existing CSS selectors form the embedded resources. Note that they are loaded after you CSS and if the selectors are with equal weight, the embedded will be applied. Note how I merged the HTML element with the class name to achieve heavier selector and to be able to apply it to the application.

Best wishes,
Bojo
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Sean
Top achievements
Rank 2
answered on 08 Sep 2011, 05:03 PM
Hi Bojo,

Thank you for the code. This worked as I had hoped.

Cheers,

Sean
Tags
Button
Asked by
Sean
Top achievements
Rank 2
Answers by
Kevin
Top achievements
Rank 2
Sean
Top achievements
Rank 2
Bozhidar
Telerik team
Share this question
or