PDA

View Full Version : [CLOSED] Icon Border IE7 and IE8



cwolcott
Mar 06, 2013, 4:12 PM
Begin to perform some regression testing against various browser versions that our used by our end users and came across the following, any thoughts?

In IE7 and IE8 there is an extra border around the disabled icon.
In IE7 and IE8 the fields are not lining up.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sended, EventArgs e)
{
ReqDetailCategory.Text = "[1] Sales Projections";
ReqDetailTitle.Text = "2011 Year End";

ReqDetailNumber.Text = "#12-005";
hReqDetailRequestorId.Text = "4523";
ReqDetailRequestor.Text = "Mr. Bob Smith";

hReqDetailActOffId.Text = false ? "778" : "-1";
ReqDetailActOff.Text = "Not Assigned";
ReqDetailActOffVcard.Disabled = !false;

ReqDetailDtSubmit.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm tt");
ReqDetailDtNeed.Text = false ? DateTime.Now.ToString("MM/dd/yyyy") : "n/a";
ReqDetailDtComplete.Text = false ? DateTime.Now.ToString("MM/dd/yyyy hh:mm tt") : "n/a";

ReqDetailsCntSponsor.Hidden = String.IsNullOrEmpty("Ms. Jen Taylor (CFO)");
ReqDetailSponsor.Text = "Ms. Jen Taylor (CFO)";
}

protected void VCardClicked(Object sender, DirectEventArgs e)
{
string userType = e.ExtraParams["Type"];

X.Msg.Alert(String.Format("User Information ({0})", userType), "VCard button clicked").Show();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Viewport with BorderLayout - Ext.NET Examples</title>
<style type="text/css">
.reqDetails .x-label-value
{
font-weight: bold;
font-size: 10px;
font-family: tahoma, arial, verdana, sans-serif;
}

.reqDetails .x-form-item-label
{
line-height: 12px;
font-size: 10px;
font-weight: bold;
font-family: tahoma, arial, verdana, sans-serif;
}

.reqDetails .x-form-item-body
{
vertical-align: top;
}

.reqDetails .x-form-display-field
{
line-height: 12px;
font-size: 10px;
font-family: tahoma, arial, verdana, sans-serif;
}

.vcard-over
{
background-color: #fff;
}

.vcard-pressed
{
background-color: #fff;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:FormPanel ID="RequestDetailsText" runat="server" BodyPadding="5" Icon="BookMagnify"
Cls="reqDetails" Title="Details" Width="500" >
<Items>
<ext:DisplayField ID="ReqDetailCategory" runat="server" FieldLabel="Category" />
<ext:DisplayField ID="ReqDetailTitle" runat="server" FieldLabel="Title" />
<ext:Component runat="server">
<Content>
<hr />
</Content>
</ext:Component>
<ext:Container runat="server" Layout="HBoxLayout" Cls="reqDetails" MarginSpec="0 0 5 0">
<Items>
<ext:DisplayField ID="ReqDetailNumber" runat="server" FieldLabel="Request Number:"
Width="250" />
<ext:DisplayField ID="ReqDetailDtSubmit" runat="server" FieldLabel="Date Submitted"
Flex="1" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="HBoxLayout" Cls="reqDetails" MarginSpec="0 0 5 0">
<Items>
<ext:Hidden ID="hReqDetailRequestorId" ClientIDMode="Static" runat="server" />
<ext:Label runat="server" Text="Requestor:" Width="105" />
<ext:Button ID="ReqDetailRequestorVcard" runat="server" Flat="true" Icon="Vcard"
PaddingSpec="0 5 0 0" BorderSpec="0 0 0 0" OverCls="vcard-over" PressedCls="vcard-pressed">
<DirectEvents>
<Click OnEvent="VCardClicked">
<ExtraParams>
<ext:Parameter Name="Id" Value="hReqDetailRequestorId.value" Mode="Raw" />
<ext:Parameter Name="Type" Value="Requestor" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:DisplayField ID="ReqDetailRequestor" runat="server" Width="124" />
<ext:DisplayField ID="ReqDetailDtNeed" runat="server" FieldLabel="Date Needed" Flex="1" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="HBoxLayout" Cls="reqDetails" MarginSpec="0 0 5 0">
<Items>
<ext:Hidden ID="hReqDetailActOffId" ClientIDMode="Static" runat="server" />
<ext:Label runat="server" Text="Action Officer:" Width="105" />
<ext:Button ID="ReqDetailActOffVcard" runat="server" Flat="true" OverCls="vcard-over"
PressedCls="vcard-pressed" Icon="Vcard" PaddingSpec="0 5 0 0" BorderSpec="0 0 0 0">
<DirectEvents>
<Click OnEvent="VCardClicked">
<ExtraParams>
<ext:Parameter Name="Id" Value="hReqDetailActOffId.value" Mode="Raw" />
<ext:Parameter Name="Type" Value="Action Officer" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:DisplayField ID="ReqDetailActOff" runat="server" Width="124" />
<ext:DisplayField ID="ReqDetailDtComplete" runat="server" FieldLabel="Date Completed"
Flex="1" />
</Items>
</ext:Container>
<ext:Container ID="ReqDetailsCntSponsor" runat="server" ClientIDMode="Static" Layout="HBoxLayout"
Cls="reqDetails" MarginSpec="0 0 5 0">
<Items>
<ext:Label runat="server" Text="Sponsor:" Width="105" />
<ext:Button ID="ReqDetailSponsorVcard" runat="server" Flat="true" OverCls="vcard-over"
PressedCls="vcard-pressed" Icon="Vcard" PaddingSpec="0 5 0 0" BorderSpec="0 0 0 0">
<DirectEvents>
<Click OnEvent="VCardClicked">
<ExtraParams>
<ext:Parameter Name="Type" Value="Sponsor" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:DisplayField ID="ReqDetailSponsor" runat="server" Flex="1" />
</Items>
</ext:Container>
<ext:Component runat="server">
<Content>
<hr />
</Content>
</ext:Component>
</Items>
</ext:FormPanel>
</body>
</html>


5771

Daniil
Mar 06, 2013, 5:09 PM
Hi Chris,

IE < 9 renders another HTML for a Button, using a table HTML element. It is a problem.

I would try to correct it this way.

.x-btn-default-toolbar-small .x-frame-tl,
.x-btn-default-toolbar-small .x-frame-tc,
.x-btn-default-toolbar-small .x-frame-tr,
.x-btn-default-toolbar-small .x-frame-ml,
.x-btn-default-toolbar-small .x-frame-mc,
.x-btn-default-toolbar-small .x-frame-mr,
.x-btn-default-toolbar-small .x-frame-bl,
.x-btn-default-toolbar-small .x-frame-bc,
.x-btn-default-toolbar-small .x-frame-br {
background-image: none;
height: 0px;
}

cwolcott
Mar 06, 2013, 7:23 PM
Looks great. Please close the thread.