AndyCollinson
asked on
IE zoom features upsets simple HTML sent from asp.net
Some simple HTML is being wrongly displayed in Internet Explorer when the user has a Zoom other than 100%
I have a large web site with 230+ web pages, written in asp.net
About 10 pages are for the end user, the rest are for back end internal staff.
I intentionally keep things simple on the HTML side.
In particular, I write data out in tables so that they will display properly in "Right to Left" languages.
E.g. the code snippet below just shows the logo, a vertical bar then the word "login" or "connexion" in French.
This is displayed correctly in English and in reverse order on RTL languages.
Everything is fine except for a group of users who use the Zoom feature of Internet Explorer.
Often the word login uderlays the Logo - see the 2 attached images.
Below is the CSS
Regards
Andy
.PanelLogo
{
margin-bottom: 10px;
vertical-align: middle;
}
.LogoTopBar
{
height: 70px;
}
.SeparatorTopBar
{
height: 70px;
}
.TextTopBar
{
font-size: 2em;
color: #a9a9a9;
}
image-correct.GIF
I have a large web site with 230+ web pages, written in asp.net
About 10 pages are for the end user, the rest are for back end internal staff.
I intentionally keep things simple on the HTML side.
In particular, I write data out in tables so that they will display properly in "Right to Left" languages.
E.g. the code snippet below just shows the logo, a vertical bar then the word "login" or "connexion" in French.
This is displayed correctly in English and in reverse order on RTL languages.
Everything is fine except for a group of users who use the Zoom feature of Internet Explorer.
Often the word login uderlays the Logo - see the 2 attached images.
Below is the CSS
Regards
Andy
.PanelLogo
{
margin-bottom: 10px;
vertical-align: middle;
}
.LogoTopBar
{
height: 70px;
}
.SeparatorTopBar
{
height: 70px;
}
.TextTopBar
{
font-size: 2em;
color: #a9a9a9;
}
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table>
<tr>
<td valign="middle">
<asp:Image ID="ImageClinisafeLogo" runat="server" ImageUrl="~/Images/Clinisafe-Logo.gif"
AlternateText="CliniSafe Logo" CssClass="LogoTopBar" />
</td>
<td valign="middle">
<asp:Image ID="ImageGreyBar" runat="server" ImageUrl="~/Images/GreyBar.jpg" CssClass="SeparatorTopBar" />
</td>
<td valign="middle">
<asp:Label ID="LabelTopMessage" runat="server" Text="online" CssClass="TextTopBar"></asp:Label>
</td>
</tr>
</table>
image-overlay-problem.GIFimage-correct.GIF
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.