I have pull down menu which is working fine in IE8 without any issues but not working in IE 10. Not even able to click the menu in IE10. Also I checked in IE 10 compatibility mode, but still not working. Below is the code I have written and loading the menu items dynamically.
<div class="clear hideSkiplink" style="background-image: url(Images/horizBar1.jpg);padding-top: 10px">
<asp:Menu ID="menuMain" runat="server" StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal"
OnMenuItemClick="menuMain_MenuItemClick" BackColor="#FFFFFF"
BorderColor="#296573" Font-Bold="True" Font-Names="Verdana"
Font-Size="Medium" ForeColor="#296573">
<StaticMenuItemStyle CssClass="menuItem"></StaticMenuItemStyle>
<DynamicMenuItemStyle CssClass="menuItem"></DynamicMenuItemStyle>
</asp:Menu>
</div>
style:
.menuItem {
border: groove 1px black;
width: 150px;
padding: 2px;
padding-left: 20px;
background-color: Transparent;
font-family: verdana;
font-size: 12px;
font-weight: bold;
}
Related
I have two options for the user on my page, one is a button that performs an edit function and the other is a hyperlink that navigates to another page. Both are styled to look the same but because the delete option is a hyperlink control it only works when you click on the text and not the surrounding box like the button does.
The .aspx file is as follows:
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit"/>
<div class ="deletebutton">
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
</div>
And the CSS is:
.deletebutton, input[type="submit"]
{
align-items: flex-start;
text-align: center;
cursor: default;
color:#BD193A;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
width: 200px;
font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
float: left;
margin:5px;
}
Simply remove DIV from hyperlink and set deletebutton class to hyperlink
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>Delete</asp:HyperLink>
In that case I think you can use the hyperlink outside the DIV element, like:
<asp:HyperLink ID="HyperLinkDeleteRecord" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
<div class="deletebutton">
Delete
</div>
</asp:HyperLink>
Depending on your CSS you can have changes to do...
or like the edited version that I've mentioned in comments:
<asp:HyperLink ID="HyperLinkDeleteRecord" CssClass="deletebutton" runat="server" NavigateUrl='<%#"DeleteArticle.aspx?passarticleid=" + Eval("ArticleID") %>'>
Delete
</asp:HyperLink>
I am using a asp.net ajax modal pop extender to show the modal overlay. it is working as expected, the problem i am facing is it is setting the background to black in IE 8 rather than the transparent one. it works fine FF and Chrome.
Markup.
<cc1:ModalPopupExtender ID="mpError" runat="server" PopupControlID="pnlError" TargetControlID="btn"
CancelControlID="ancClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlError" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div class="dvPopup">
<a id="ancClose" style="float: left; cursor: pointer; margin: 10px 0 0 10px;">
<img alt="Close" src="Images/x_button.png" /></a>
<br />
<br />
<span class="spanPop">You can only vote once!</span>
</div>
</asp:Panel>
Css classes.
.modalBackground
{
background-color: #d2d2d2;
filter: alpha(opacity=60%);
opacity: 0.8;
}
.modalPopup
{
padding-top: 10px;
padding-left: 10px;
width: 486px;
height: 215px;
}
.dvPopup
{
background-image: url('images/error2_window.png');
width: 486px;
height: 215px;
}
There is some problem with opacity in IE8 , but don't the work arounds. Any suggestions, Css hacks will work .
Resolve this by changing in modal background class.
filter: alpha(opacity=50);
opacity: 0.5;
1My gridview code is like:
<asp:GridView runat="server"
ID="gvOpenProblems"
AutoGenerateColumns="true"
BorderColor="Black"
OnRowCreated="gvOpenProblems_RowCreated"
OnRowDataBound="gvOpenProblems_RowDataBound"
HeaderStyle-HorizontalAlign="Center"
Width="2000px"
AllowPaging="true"
PageSize="20"
OnPageIndexChanging="gvOpenProblems_PageIndexChanging">
<RowStyle HorizontalAlign="Left" />
<PagerStyle CssClass="gridpager"
HorizontalAlign="Left"
Width="200px" />
And CSS is like:
.gridpager, .gridpager td {
text-align: left;
color: Green;
font-weight: bold;
text-decoration: none;
border: 0;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.gridpager a {
color: Red;
font-weight: normal;
}
This works fine normally but when the number of pages is more than 10, and when I click on 10th page or 11th page all page numbers spread and go out of grid.
Is this a normal issue or is it an issue with the CSS?
The problem is that you're setting the width to 200px. You'd be forgiven for thinking that this applies to the containing table that the paging controls are held in, but it's not, it's the TD that the a & span tags are contained in.
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.