[CLOSED] Icon Border IE7 and IE8

  1. #1

    [CLOSED] Icon Border IE7 and IE8

    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>
    Click image for larger version. 

Name:	IE7 IE8 Issue.JPG 
Views:	46 
Size:	39.0 KB 
ID:	5771
    Last edited by Daniil; Mar 07, 2013 at 8:12 AM. Reason: [CLOSED]
  2. #2
    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;
    }
  3. #3
    Looks great. Please close the thread.

Similar Threads

  1. [CLOSED] FireFox 13.0 and ext:TextField icon: icon untidy.
    By supera in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 18, 2012, 5:21 PM
  2. Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  3. Replies: 5
    Last Post: Aug 02, 2010, 8:44 AM
  4. Replies: 3
    Last Post: Jul 20, 2010, 7:48 PM
  5. Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM

Tags for this Thread

Posting Permissions