Designed specifically for input buttons such as <input type="submit" value="Button Name">, this round button style uses the sliding doors technique that's assembled from a single image.
Demo: Click to review the source code and demo the code in action
Demo: Click to see a video demo of the style in Mac browsers: Firefox, Safari, Chrome and Opera
This button style enables the following:
Resolves wide button issue for long
button names for IE browsers.
Resolves an issue with IE browsers when the right sliding door piece would float on the page when the button is hidden server side.
Resolves fragmented text issue for IE browsers
when scrolling down and then back up the page.
This is the perfect alternative for
designers when you can't use the ASP
.Net button control such as
<asp:Button id="b1" Text="Submit"
runat="server" /> in your code
Cross compatible
for safari, ie, firefox, chrome and
opera. watch video
I think you just need to change one pseudo-class.
span.button input.form_button:hover {
background-position:left -39px;
color:#FFFFFF;
}
Should be
span.button:hover input.form_button {
background-position:left -39px;
color:#FFFFFF;
}
Edit: It's line 52 of the demo source
Related
There is a drop-down in my web application. This drop-down is user-defined (not using the <select> element). Inside this drop-down there is a down arrow. This arrow is creating by using background images on an absolutely positioned span. This span tag is blocking the click event of the drop-down. So, I've added pointer-events:none to the span tag. After adding this, it's working fine everywhere but in the Edge browser. Does Edge support pointer-event: none? If not, what is the alternative for pointer-event: none in Edge.
Below is the code which I used:
<div class="multi-dd" id="multi_dd_ddlProfession" role="application" cascadesto="ddlDiscipline">
<input class="multi-dd-txt" id="txtProf" role="combobox" aria-readonly="false" aria-describedby="spMultiExit" style="width: 260px;" aria-label="Multi Select Control Professions " type="text" readonly="readonly" value="Select All">
<span class="nir"></span>
</div>
.nir{
height: 28px;
margin-left: -30px;
vertical-align: bottom;
overflow: hidden;
pointer-events: none;
}
There are some bugs which may be the root cause:
FocusEvent Sequence should be: focusout, focusin, blur, focus.
FocusEvent Sequence is: blur, focusout, focus, focusin.
and a no-repro test:
#testID {pointer-events: none;}
<ul>
<li>MS Dev</li>
<li id="testID">example.com</li>
</ul>
The first version of Microsoft Edge was introduced in Windows 10 Build 10049. Pointer Events have been supported since Windows 10 Build 10240.
References
"Project Spartan" in the Windows Technical Preview build 10049 – IEBlog
Windows 10 Build 10240
RemoteIE - Microsoft Edge Development
HTML5test - How well does your browser support HTML5?
CSS 'pointer-events: none' rule not working
DOM Level 3: FocusEvent sequence
Edge raises "blur" event while "click" event processing is not completed
Problem with focus
Click event not raised when Edge is not in focus
Unifying touch and mouse: how Pointer Events will make cross-browsers touch support easy – David Rousset
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
I'm trying to create a modal popup using the Ajaxtoolkit's modalpopupextender, which works like a charm.
while the popup is showing i want to gray out the page, and did that by assigning the popuppanel teh modalPopup css class:
<style type="text/css">
.modalPopup {
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalDiv {
background-color:white;
height:200px;
width:400px;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
</style>
the backgroudn is grayed out, but now i can't make the controls inside my popup solid again. I tried putting them in a div, and assigning the div another css class where I set the opacity to 0 and 100, but this makes no difference.
my popup panel is this:
<asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
<div class="modalDiv">
writesomething:
<asp:TextBox runat="server" ID="txtModalBox" /><br />
<asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
<asp:Button Text="Annuller" ID="btnModalAnnuller" OnClick="btnModalAnnuller_Click" runat="server" /><br />
</div>
</asp:Panel>
So my question is, how do i have a not transparant div inside a panel with a transparant background ?
You can't have a child thats more opaque than its parent when using opacity you should instead use the alpha transparency value in rgba(0,0,0,0) so that the transparency isn't "inherited"
The only downside is that rgba() isn't supported below IE 9
I'll offer an alternative if you want to use rgba with IE versions earlier than 9, but, personally, I don't like to overuse this.
http://css3pie.com/documentation/supported-css3-features/
The link above will take you to the CSS3 PIE project. The instructions for its use in your site are pretty straight forward, but in short, it allows non-CSS3 compatible browsers to render certain CSS3 features (rgba being one of those features, not to mention border-radius, which is another nice one).
In my experience: It does take a fraction of a second (most of the time) to render the features once the user has pulled up the page, but for me, this hasn't really been a problem when I've used it because it just ends up looking like their browser was simply still loading the page, since the user is used to using an older browser anyway.
Hope this helps someone who finds themselves in need of rgba but must remain fully compatible with IE8 (or others), as I know that is exactly what happened to me, and, to my knowledge, this was the only available solution.
I am working on my new site and I checked it in multiple browsers: ie6+, chrome, safari and firefox.
I noticed that firefox display the top offset of my button in wrong position - like top=-1 and I cant fix it in NORMAL way...
Here's an example
http://jsfiddle.net/7XRZG/
Thank you
button inputs and text inputs seem to have different default vertical align properties in firefox. Try explicitly setting them to the same thing. For instance:
<input type="text" style="height:19px;border:1px solid silver;font-size:10px;vertical-align:text-top;">
<input type="button" value="Search" style="margin-left:5px;background-color:#f5f5f5;color:#707070;border:1px solid #e3e3e3;font-size:9px;padding:0 10px;height:21px;font-weight:700;vertical-align:text-top;">
I have a ModalPopupExtender from the AjaxControlToolkit that is working properly in Firefox, Chrome and IE8, but when I run it in IE8 Compatibility mode, it pops up behind the content of my page, rather than on top.
The popup is in a user control that's rendered by the Masterpage. What I think is happening is it's popping up in front of the master page content, as the Masterpage content (my header and sidebars) is greyed out, but the content placeholders are rendering in front of my popup. I found a solution online that suggested changing your doctype declaration in the master page to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But I already had that exact declaration and still have the positioning problem. Here is the popup code:
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="lnkbtnDealerID"
PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
CancelControlID="CancelButton"
OnOkScript=""
>
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
<p>Are you sure? Your current shopping cart is valid only for the current Dealer ID. Switching Dealer IDs will reset your cart according to the new Dealer ID chosen.</p>
<br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="Ok" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
And the relevant CSS:
.popupControl {
background-color: white;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:white;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
I just found your posting whilst trying so solve the same problem. For me I tracked it down to a div tag, called mainBody, which all page content is contained within. The CSS class that controls this div has relative positioning but no z-index. As soon as I set the z-index to -1 for mainBody my modalPopup worked perfectly in IE7.
Hope this helps?!
You can only set the Z-index in IE for the parent div you are in.
A div higher up will always render on top of your lower div.
I solved the problem by Always put the Modualwindow Div directly after the tag.
If it's the first div it's always on top.
Henrik
I'd like to add that Z-index is indeed the issue for those running into this in IE 10 compat view, which defaults to IE7 doc mode on a local network.
I used z-index: -1 for the html and body, and then had to go to a z-index: 100 for the other containers. The pop-up classes are at a z-index: 999999; You'll need to adjust for your site.
This might be a solution you can use:
Problem in Z-index of menu and ajax ModalPopupExtender in ASP.net
I have been running into this issue too... but on a prerelease product that we weren't really going to support for IE6/7. But, I just tried it out. Make sure that all of the divs that hold your controls in the modal popup have a really high z-index (like 10001).
If you use the ModalPopupExtender (AjaxToolkit 4.1.50927.0 and .Net 4.0.30319) in an ASP.NET project, you may face the same problem with IE7 and IE8. The Popup window will be completely rendered in IE 9 but not in IE7 & IE8. In that case, try removing the AnimationExtender (fade in) for that ModalPopupExtender it works fine. Check the browser version and render the code for the animation via JS for newer browsers that can handle the fade in effect or do not use the animation if the browser is, say, IE7.