I'm developing a web application for Sales Department people in my company. I used my 1024X768 resolution and "Medium" IE text size to test my Layout and it worked fine. However, some people in Sales Department use different settings like "800X600", "Larger" IE text size or even "Large font" in Appearance tab in Display Property. Those different settings would mess up my layout. What I want to do is to set font size of labels, buttons and etc (preferrably everything that has text on it, except image) be static. So no matter what kind of font setting user has, the web page would show up in the same way.
Now, I can get part of my page worked. In the following code, the font size in the table remain the same regardless whatever the user's font setting is:
Expand|Select|Wrap|Line Numbers
- <P>
- <TABLE id="Table5" style="Z-INDEX: 119; LEFT: 8px; WIDTH: 112px; POSITION: absolute; TOP: 48px; HEIGHT: 516px"
- cellSpacing="1" cellPadding="1" width="112" border="1" runat="server">
- <tr>
- <td>
- <P><asp:label id="Label49" Width="152px" runat="server" Font-Bold="True">Column Display</asp:label>
- <MEDIUM>
- <asp:linkbutton id="Linkbutton1" Width="120px" runat="server" ForeColor="DodgerBlue" Font-Bold="True"
- BackColor="Transparent">Select All</asp:linkbutton>
- <asp:linkbutton id="Linkbutton2" Width="120px" runat="server" ForeColor="DodgerBlue" Font-Bold="True"
- BackColor="Transparent">Deselect All</asp:linkbutton>
- <asp:linkbutton id="Linkbutton_userSetting" Width="150px" runat="server" ForeColor="DodgerBlue"
- Font-Bold="True" BackColor="Transparent">Save user Setting</asp:linkbutton>
- </MEDIUM>
- </P>
- </td>
- </tr>
- <TR>
- <TD style="WIDTH: 334px; HEIGHT: 7px">
- <P><asp:checkbox id="CB_Item" runat="server" Text="Item"></asp:checkbox><BR>
- <asp:checkbox id="CB_POnum" runat="server" Text="PO#"></asp:checkbox><BR>
- <asp:checkbox id="CB_Container" runat="server" Text="Container"></asp:checkbox><BR>
- <asp:checkbox id="CB_ETA" runat="server" Text="ETA"></asp:checkbox><BR>
- <asp:checkbox id="CB_category" runat="server" Text="Category"></asp:checkbox><BR>
- <asp:checkbox id="CB_Brand" runat="server" Text="Brand"></asp:checkbox><BR>
- <asp:checkbox id="CB_Supplier" runat="server" Text="Supplier"></asp:checkbox><BR>
- <asp:checkbox id="CB_ItemDesc" runat="server" Text="Item Desc."></asp:checkbox><BR>
- <asp:checkbox id="CB_Size" runat="server" Text="Size"></asp:checkbox><BR>
- <asp:checkbox id="CB_PackSize" Height="22px" runat="server" Text="Pack Size"></asp:checkbox><BR>
- <asp:checkbox id="CB_Qty_on_hand" runat="server" Text="Qty On Hand"></asp:checkbox><BR>
- <asp:checkbox id="CB_Qty_warehouse" runat="server" Text="Qty On All WH"></asp:checkbox><BR>
- <asp:checkbox id="CB_Qty_Order" runat="server" Text="Qty On Order"></asp:checkbox><BR>
- <asp:checkbox id="CB_Unit" runat="server" Text="Unit"></asp:checkbox><BR>
- <asp:checkbox id="CB_ShipTo" runat="server" Text="Ship To"></asp:checkbox><BR>
- <asp:checkbox id="CB_Group" runat="server" Text="Group"></asp:checkbox><BR>
- <asp:checkbox id="CB_GroupDesc" runat="server" Text="Group Desc."></asp:checkbox><BR>
- <asp:checkbox id="CB_CatDesc" runat="server" Text="Category Desc."></asp:checkbox><BR>
- <asp:checkbox id="CB_6wks" runat="server" Text="6 Wks Avg Movement"></asp:checkbox><BR>
- <asp:checkbox id="CB_LastReceivedDate" runat="server" Text="Last Received Date"></asp:checkbox><BR>
- <asp:checkbox id="CB_lastCost" Visible="False" runat="server" Text="Last Cost" ForeColor="Red"></asp:checkbox><BR>
- <asp:checkbox id="CB_avgCost" Visible="False" runat="server" Text="Avg. Cost" ForeColor="Red"></asp:checkbox><BR>
- <asp:checkbox id="CB_LastCostUS" Visible="False" runat="server" Text="Last Cost (US$)" ForeColor="Red"></asp:checkbox><BR>
- <asp:checkbox id="CB_avgCostUS" Visible="False" runat="server" Text="Avg. Cost (US$)" ForeColor="Red"></asp:checkbox></P>
- </TD>
- </TR>
- <TR>
- </TR>
- </TABLE>
- </P>
Expand|Select|Wrap|Line Numbers
- P { FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial }
- SMALL {
- font-size: .7em;
- }
- MEDIUM {
- font-size: .9em;
- }
- BIG {
- font-size: 1.17em;
- }
However, when i tried to apply same logic to other tables in my page, the style doesn't work. I have no idea what happen out there. Anyone can give me some suggestions?