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
    6,063
    Mentioned
    253 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.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  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
  •