SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    controls position changes in IE FF

    i have the HTML as

    <table><tr><td>Name</td><td>asp.net control</td></table>

    in IE it appears as defined but in FF it appears as one below another

    Name
    aspnet control

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,344
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Either you've made a typo in your post, or you're missing a closing </tr>

    <table><tr><td>Name</td><td>asp.net control</td></tr></table>

    Beyond that, we would probably need the rest of your code, including the CSS, to diagnose the problem.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    .st11 
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        text-align  : left;  
        TEXT-DECORATION: none;
        display:block;
    }
     
        .st11 a
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        TEXT-ALIGN: left; 
        TEXT-DECORATION: none;
        padding:3;
        display:block;
     
        }
        .st11 a:hover
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        TEXT-ALIGN: left; 
        TEXT-DECORATION: none;
        background-color:#D6E7F8;
        display:block;
        padding:3;
     
        }
    .td4 
        {
     
     
        }




    Code HTML4Strict:
    <table width="580" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td class="st11 td4">
     Leave Name
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtlname" runat="server" Width="241px"></asp:TextBox>
     </td>
    </tr>
    <tr>
    <td class="st11 td4">
     Leave Date
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtldate" AutoPostBack="true" runat="server" Width="150px" ></asp:TextBox>
     
    </td>
    </tr>
    <tr>
    <td class="st11 td4">
     Leave Day
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtlday" runat="server" Height="22px" Width="227px"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td class="st11 td4">
    <asp:Label ID="lblid" runat="server"></asp:Label>
    </td>
    <td class="st11 td4">
     &nbsp;
    </td>
    </tr>
    <tr>
    <td class="st11 td4" colspan="2">&nbsp;</td></tr>
    <tr>
    <td class="st11 td4" colspan="2">
    </td>
    </tr>
    </tbody>
    </table>
    Last edited by TechnoBear; Apr 11, 2012 at 11:12. Reason: Code tags added

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    There must be something else at issue here because I tried the HTMl/CSS you posted.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style tpe="text/css">
    .st11 
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        text-align  : left;  
        TEXT-DECORATION: none;
        display:block;
    }
     
        .st11 a
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        TEXT-ALIGN: left; 
        TEXT-DECORATION: none;
        padding:3;
        display:block;
     
        }
        .st11 a:hover
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        TEXT-ALIGN: left; 
        TEXT-DECORATION: none;
        background-color:#D6E7F8;
        display:block;
        padding:3;
     
        }
    .td4 
        {
     
     
        }
    </style>
    </head>
    
    <body>
    <table width="580" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td class="st11 td4">
     Leave Name
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtlname" runat="server" Width="241px"></asp:TextBox>
     </td>
    </tr>
    <tr>
    <td class="st11 td4">
     Leave Date
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtldate" AutoPostBack="true" runat="server" Width="150px" ></asp:TextBox>
     
    </td>
    </tr>
    <tr>
    <td class="st11 td4">
     Leave Day
    </td>
    <td class="st11 td4">
    <asp:TextBox ID="txtlday" runat="server" Height="22px" Width="227px"></asp:TextBox>
    </td>
    </tr>
    <tr>
    <td class="st11 td4">
    <asp:Label ID="lblid" runat="server"></asp:Label>
    </td>
    <td class="st11 td4">
     &nbsp;
    </td>
    </tr>
    <tr>
    <td class="st11 td4" colspan="2">&nbsp;</td></tr>
    <tr>
    <td class="st11 td4" colspan="2">
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    No difference in any browser . I even removed the doctype above <html> and nothing.

    Do you have a link where we can take a look at the problem? Or at least give us the code that can replicate the issue. You have given us code, yes, good, although it doesn't reproduce the problem .

    Realize that we can't really take ASP code and use it. We don't run the code on a server so the brwoser just reads that ASP code without its' intended purpose. Give us the View-Source code of the page in the future. The true source code that you gave above isn't what we need. Though I doubt it would matter in this case, but just for future reference....
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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 id="Head1"><title>
    	Untitled Page
    </title><link href="CSS/PMS.css" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=FzP6sLN8tDW9-Dk6WCY2OozOOdUaW6y_g2uIzy9ZTJmwcgKMOq6atARE4OAk9JE4xz8YSUPto0xe1BciJTSNxQ2&amp;t=633899266740000000" type="text/css" rel="stylesheet" /></head>
    <body>
        <form name="form1" method="post" action="test.aspx" id="form1">
    <div>
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTI2OTQwMDI2ZGRQdV7x4NL+IFPE5Y5kGTK4fcN0GA==" />
    </div>
    
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
    
    
    <script src="/WebResource.axd?d=oJUhC_uooSjRt7Nx6AbKnA2&amp;t=633802855995006876" type="text/javascript"></script>
    
    
    <script src="/ScriptResource.axd?d=pfgi-EUDNT17r6GnlpMuPJcswirsPysMhLEsueglHnxHMSxDUJFH4ljzftxXcdEXBM_qlBSlSUj8bPzIehTnfx_t1tQbaxxCvh95O8YGsTo1&amp;t=ffffffffec2d9970" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
    //]]>
    </script>
    
    <script src="/ScriptResource.axd?d=pfgi-EUDNT17r6GnlpMuPJcswirsPysMhLEsueglHnxHMSxDUJFH4ljzftxXcdEXhfgWIz-cjoF1qCO7n4SCy0oMZS4ohlzvLZih448-p7KMV7MCP5s5zr6bEiSZAjIS0&amp;t=ffffffffec2d9970" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWgZeqhPSObd9FSXbKTW7AZWaRR1VGzZulchwh_a6mCvGQ2&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWg9LRxSsHiQq84XeTDJAFTpnliX6n7aew4gC6XWNR_8jwHyituELA9tewfL5xmy5wg1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWjRyxwgd-89ekQHhKvrhGztF8CWHEya4NAo78NAjQRvFIKBLvyayfYx8-8dvBv25KA1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhHu7TMvm288gUTntSXKvmlimJnsh2N7JYzBWpec1K2PEw5EnfE1WnRsV9zzZg-cFc1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWjOMmLzEeKN3AXkHHymtpBiRj0BkymzUM_Jq5KJq200lQVclF__Da1UVApoe-WB6y01&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhHu7TMvm288gUTntSXKvmlEZSLJ4JW90eltCPRkjn4fZEKqFvSfyE4w8USb4W2Je81&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWi4uyXC5dWcqXAPv_WIIEp6kJ4IrgYJHpeeWjMdzYhK7QRQcEK-pQ2o9VexKsEzskE1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhL_FkQNi0_t393EeOzEvt2jyGrttrRT2RMGeF_qz6VC6XeOd4wVgt_GmPImE8-Mro1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWi9DYVD3h4XUt3M0OYKxPPoK3IJdECY-nj35p-E4Dd8658EhMOGXwrEOHOPil8fstY1&amp;t=ffffffffd2a9b7c7" type="text/javascript"></script>
    <div>
    
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAK32qiLBwKbzu4MAv6HhfoBAt3fpKsBkp6CRpZDGtjvPDsEJTyJhT/gfNM=" />
    
    </div>
        <script type="text/javascript">
    //<![CDATA[
    Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
    Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
    //]]>
    </script>
    
        <div>
            <table width="580" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="greynorm" colspan="2" width="700">
                            <table width="580" border="0" cellpadding="0" cellspacing="0">
    
                                <tbody>
                                    <tr>
                                        <td class="st11 td4">
                                            Leave Name
                                        </td>
                                        <td class="st11 td4">
                                            <input name="txtlname" type="text" id="txtlname" style="width:241px;" />
                                        </td>
                                    </tr>
    
                                    <tr>
                                        <td class="st11 td4">
                                            Leave Date
                                        </td>
                                        <td class="st11 td4">
                                            <input name="txtldate" type="text" onchange="javascript:setTimeout('__doPostBack(\'txtldate\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="txtldate" style="width:150px;" />
                                            
                                        </td>
                                    </tr>
                                    <tr>
    
                                        <td class="st11 td4">
                                            Leave Day
                                        </td>
                                        <td class="st11 td4">
                                            <input name="txtlday" type="text" id="txtlday" style="height:22px;width:227px;" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="st11 td4">
    
                                            <span id="lblid"></span>
                                        </td>
                                        <td class="st11 td4">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="st11 td4" colspan="2">
                                            &nbsp;
    
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="st11 td4" colspan="2">
                                            
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
    
                    </tr>
                </tbody>
            </table>
        </div>
        
    
    <script type="text/javascript">
    //<![CDATA[
    Sys.Application.initialize();
    Sys.Application.add_init(function() {
        $create(AjaxControlToolkit.CalendarBehavior, {"format":"dd/MM/yyyy","id":"CalendarExtender3"}, null, null, $get("txtldate"));
    });
    //]]>
    </script>
    </form>
    </body>
    </html>

    this is th ehtml output which in FF gives the controls one below another instead of side by side
    Last edited by TechnoBear; Apr 12, 2012 at 01:37. Reason: Code tags added

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The problem is that on this section of code
    Code:
    .st11 
    {
        FONT-SIZE: 12px; 
        COLOR: #3c3c3c; 
        LINE-HEIGHT: 15px; 
        FONT-FAMILY: Arial, Helvetica, sans-serif; 
        text-align  : left;  
        TEXT-DECORATION: none;
        display:block;
    }
    You have display:block; which FF is applying and is removing the display:table-cell value that is normally on the <td>'s and instead has display:block; on it. And we all know that display:block; doesn't (by default) allow elements to sit side by side. I don't know why you had that there to begin with, but remove it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot
    it was pending since long

    thanks it got solved

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad I could be of some help.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •