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
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.
.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
{
}
<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">
</td>
</tr>
<tr>
<td class="st11 td4" colspan="2"> </td></tr>
<tr>
<td class="st11 td4" colspan="2">
</td>
</tr>
</tbody>
</table>
There must be something else at issue here because I tried the HTMl/CSS you posted.
<!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">
</td>
</tr>
<tr>
<td class="st11 td4" colspan="2"> </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…:).
<!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&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&t=633802855995006876" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=pfgi-EUDNT17r6GnlpMuPJcswirsPysMhLEsueglHnxHMSxDUJFH4ljzftxXcdEXBM_qlBSlSUj8bPzIehTnfx_t1tQbaxxCvh95O8YGsTo1&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&t=ffffffffec2d9970" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWgZeqhPSObd9FSXbKTW7AZWaRR1VGzZulchwh_a6mCvGQ2&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWg9LRxSsHiQq84XeTDJAFTpnliX6n7aew4gC6XWNR_8jwHyituELA9tewfL5xmy5wg1&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWjRyxwgd-89ekQHhKvrhGztF8CWHEya4NAo78NAjQRvFIKBLvyayfYx8-8dvBv25KA1&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhHu7TMvm288gUTntSXKvmlimJnsh2N7JYzBWpec1K2PEw5EnfE1WnRsV9zzZg-cFc1&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWjOMmLzEeKN3AXkHHymtpBiRj0BkymzUM_Jq5KJq200lQVclF__Da1UVApoe-WB6y01&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhHu7TMvm288gUTntSXKvmlEZSLJ4JW90eltCPRkjn4fZEKqFvSfyE4w8USb4W2Je81&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWi4uyXC5dWcqXAPv_WIIEp6kJ4IrgYJHpeeWjMdzYhK7QRQcEK-pQ2o9VexKsEzskE1&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWhL_FkQNi0_t393EeOzEvt2jyGrttrRT2RMGeF_qz6VC6XeOd4wVgt_GmPImE8-Mro1&t=ffffffffd2a9b7c7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=nvR4OwkgThC2V-AMQt2ePhWc-rRxHZgHDmfL8CjAOWi9DYVD3h4XUt3M0OYKxPPoK3IJdECY-nj35p-E4Dd8658EhMOGXwrEOHOPil8fstY1&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">
</td>
</tr>
<tr>
<td class="st11 td4" colspan="2">
</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
The problem is that on this section of 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 :).
thanks a lot
it was pending since long
thanks it got solved
You’re welcome :). Glad I could be of some help.