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 179 Views

Button

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

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

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 >>