?
Solved

IE zoom features upsets simple HTML sent from asp.net

Posted on 2008-11-10
1
Medium Priority
?
262 Views
Last Modified: 2013-12-08
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;
}



<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>

Open in new window

image-overlay-problem.GIF
image-correct.GIF
0
Comment
Question by:AndyCollinson
1 Comment
 

Accepted Solution

by:
AndyCollinson earned 0 total points
ID: 23122501
I found the answer myself.

It is critical that *every* image has both height and width - otherwise IE7 gets confused when using zoom.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question