CSS text-align:center not working in FireFox (FF)

The CSS style for any component text-align:center will not work in FireFox (FF) browser. The work around is to have the CSS defined as follows. If you defined the below CSS for body, it will work in both IE and FF. You have to defined both CSS for the body as defined below (one after another) to have cross browser compatibiltiy. It will not work if you asssing only text-align: -moz-center;


body
{
text-align: center;
}

body
{
text-align: -moz-center;
}

-::-

HTML printing with custom page format

You may always noticed that whenever we try to print a web page with a click on "Print Friendly" or "Print" or "Print Preview", the page will open up a pop up window with a different simple layout with no extravaganzas, say buttons, advertisements, etc.

This is simply achieved with CSS. The solution is as follows.

Defined two sets of CSS for the page targeting "Print" and "Screen". See the example below.

<style type="text/css">
@media screen{
body {color:Red; }
td{font-size:14px;}
.noprint{display:block !important;}

}

@media print {
body {fcolor:Blue;}
td{font-size:7px;}
.noprint{display:none;}
}
</style>

and the page is

<form id="form1" runat="server">
<div style="text-align: center;">
<table id="tblParent" style="width: 90%">
<tr class="noprint">
<td>
This is just a demonstration of how to make HTML printing</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr class="noprint">
<td style="text-align: right">
<a href="#" onclick="window.print()">Print</a>  <a href="#" onclick="window.close()">Close</a>
</td>
</tr>
<tr>
<th>
Employee Informations</th>
</tr>
<tr>
<td>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<table id="tblEmployee" style="width: 100%">
<tr>
<td style="width: 5%;">
</td>
<td style="width: 30%;">
</td>
<td style="width: 5%;">
</td>
<td style="width: 60%;">
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
Last Name</td>
<td>
:</td>
<td align="left">
<%# Eval("LastName") %>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
First Name</td>
<td>
:</td>
<td align="left">
<%# Eval("firstname") %>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
Title</td>
<td>
:</td>
<td align="left">
<%# Eval("title") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</div>
</form>

Here the section of the page with class .noprint is displayed while displaying on the "screen" and hidden while printing, say buttons and other items


-::-