Table Borders on IE Zoom

[AG]

I have and ASP.NET 3.5 site that is displaying white lines for table cell
borders, only when zoom is set to other than 100% in IE7. No problem with
IE8 and Firefox.

Does anyone have a suggestion on how to eliminate this.

The site is http://www.pb101.com.

Thanks for any suggestions.

 

[Zhi-Qiang Ni[MSFT]]

Hi AG,

I have tested the page in both Internet Explorer 7 and Internet Explorer 8
and when zooming the page, I repro the issue you said.

As I tried to add the CSS style "body{zoom: 200%}" into the page, I find it
works well with 200% zoom in Internet Explorer 7. Also, I tried to delete
the DOCTYPE declare from the page (the tag start with !DOCTYPE), and it
still doesn't solve the problem. So, I believe the code of the page is
definitely healthy.

After some research, I think this should be an issue of the zoom feature in
Internet Explorer 7 and has been fixed in the later version of Internet
Explorer: when Internet Explorer 7 works with the zoom feature, it will
cause elements to overlap using when zooming out or gap when zooming in.
It is caused by the algorithm of the browser. I am afraid we might have
very few things to do on it.

--
Sincerely,
Zhi-Qiang Ni
Microsoft Online Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================

 

[AG]

Thanks for the response Zhi-Qiang.
I kind of thought it was something like that.
The only question, though, is why the problem does not appear on other sites
that use tables?

 

[Zhi-Qiang Ni[MSFT]]

Hi AG,

I think I finally solved it. When I debug into the HTML code, I found some
of the images are displayed via img tag and others are set as the
background-image of the table cell. This inspires me that the problem can
be a compatible issue casued the different image rendering ways. So I tried
to change all the images in img tags to be the background-image of the
containing cell and be surprised that the gap has been gone.

I quote a part of the HTML code for you to see the performance after
setting the images as background-image below between lines. You can replace
these HTML code to your page for a try.

<div>

<input type="hidden" name="__SCROLLPOSITIONX"
id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY"
id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__PREVIOUSPAGE"
id="__PREVIOUSPAGE" value="WNA0toKAilRqPdmfmx4zpw2" />
<input type="hidden" name="__EVENTVALIDATION"
id="__EVENTVALIDATION"

value="/wEWBwLWqOrsAQLCxKaYAwLh8vmTCALVmeHBBgKFnfGLBwKhtpf1CgLvmqD7CWCOPbNTB
8WauZ/0Jl+40zySMUHl" />
</div>
<div id="modalPage">
<div
class="modalBackground">
</div>
<div id="FlashPopUp">
</div>
</div>
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------
<table id="Table1" style="width: 1025px; height: 769px;" border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td colspan="27" style="background-image:
url(images/1_entryPage_TopOfLayout.jpg); background-repeat: no-repeat;
width: 1024px; height: 128px;">
<%-- <img src="images/1_entryPage_TopOfLayout.jpg"
width="1024" height="128" alt="" />--%>
</td>
<td tyle="background-image: url(images/spacer.gif);
background-repeat: no-repeat;
width: 1px; height: 56px;">
<%--<img src="images/spacer.gif" width="1" height="56"
alt="" />--%>
</td>
</tr>
<tr>
<td rowspan="2" style="background-image:
url(images/LayoutFor-1_3_24.jpg); background-repeat: no-repeat;
width: 28px; height: 52px;">
</td>
<td colspan="6" style="background-image:
url(/Images/LayoutFor-1_3_25.jpg); background-repeat: no-repeat;
width: 241px; height: 27px;">
</td>
<td colspan="9" rowspan="2" style="background-image:
url(/Images/LayoutFor-1_3_27.jpg);
background-repeat: repeat-x; width: 270px; height: 52px;">
<span id="ctl00_lblWelcome" class="welcomestars">Welcome to
PB101.com</span>
</td>
<td colspan="2" rowspan="2" style="background-image:
url(/Images/LayoutFor-1_3_27.jpg);
background-repeat: no-repeat; width: 35px; height: 52px;">
<span id="ctl00_lblNumGoldStars" class="welcomestars"
style="display: inline-block;
height: 60%; width: 100%;"></span>
</td>
<td colspan="9" rowspan="2" style="background-image:
url(images/LayoutFor-1_3_28.jpg);
background-repeat: no-repeat; width: 450px; height: 52px;">
<%-- <img src="images/LayoutFor-1_3_28.jpg" width="450"
height="52" alt="" />--%>
</td>
<td style="background-image: url(images/spacer.gif);
background-repeat: no-repeat; width: 1px; height: 27px;">
<%-- <img src="images/spacer.gif" width="1" height="27"
alt="" />--%>
</td>
</tr>
<tr>
<td colspan="6" style="background-image:
url(/Images/LayoutFor-1_3_29.jpg); background-repeat: no-repeat;
width: 241px; height: 25px;">
<div class="menurow menurow1">
<a id="ctl00_lbtnJoin"
href="javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions(&quot;ctl00

$lbtnJoin&quot;, &quot;&quot;, false, &quot;&quot;,
&quot;Account.aspx?register=true&quot;, false, true))">
Join Now&nbsp;|</a> <a id="ctl00_LoginStatus1"
class="LoginStatus" href="javascript:__doPostBack('ctl00

$LoginStatus1$ctl02','')">
Login</a></div>
</td>
<td style="background-image: url(images/spacer.gif);
background-repeat: no-repeat; width: 1px; height: 25px;">
<%-- <img src="images/spacer.gif" width="1" height="25"
alt="" />--%>
</td>
</tr>
<tr>
<td colspan="27" style="background-image:
url(images/LayoutFor-1_3_30.jpg);
background-repeat: no-repeat; width: 1024px; height: 31px;">
<%-- <img src="images/LayoutFor-1_3_30.jpg" width="1024"
height="31" alt="" />--%>
</td>
<td style="background-image: url(images/spacer.gif);
background-repeat: no-repeat; width: 1px; height: 31px;">
<%-- <img src="images/spacer.gif" width="1" height="31"
alt="" />--%>
</td>
</tr>
<tr>
<td colspan="9" rowspan="5"
style="background-image: url(/Images/LayoutFor-1_3_31.jpg);

background-repeat:no-repeat; width:359px; height: 242px;">

<div class="leftpane leftpane1">
<span id="ctl00_cphLeft_ContentEditor1_lblContent"> The Piggybank
............................... Piggybank 101 is to educate children on
the

importance of managing money from a very young age, providing a foundation
of positive habits that they can ultimately use for a

lifetime of financial responsibility and security. <br /></span>
</div></td>
<td colspan="3" rowspan="5"
style="background-image: url(images/LayoutFor-1_3_32.jpg);
background-repeat: no-repeat; width: 40px; height: 242px;">
<%-- <img src="images/LayoutFor-1_3_32.jpg" width="40"
height="242" alt="" />--%>
</td>
<td colspan="2" rowspan="2" style="background-image:
url(images/LayoutFor-1_3_33.jpg);
background-repeat: no-repeat; width: 119px; height: 75px;">
<%--<img src="images/LayoutFor-1_3_33.jpg" width="119"
height="75" alt="" />--%>
</td>
<td colspan="5" rowspan="5" style="background-image:
url(images/LayoutFor-1_3_34.jpg);
background-repeat: no-repeat; width: 82px; height: 242px;">
<%--<img src="images/LayoutFor-1_3_34.jpg" width="82"
height="242" alt="" />--%>
</td>
<td colspan="7" style="background-image:
url(images/LayoutFor-1_3_35.jpg);
background-repeat: no-repeat; width: 314px; height: 36px;">
<%--<img src="images/LayoutFor-1_3_35.jpg" width="314"
height="36" alt="" />--%>
</td>
<td rowspan="5" style="background-image:
url(images/LayoutFor-1_3_36.jpg);
background-repeat: no-repeat; width: 110px; height: 242px;">
<%--<img src="images/LayoutFor-1_3_36.jpg" width="110"
height="242" alt="" />--%>
</td>
<td style="background-image: url(images/spacer.gif);
background-repeat: no-repeat; width: 1px; height: 36px;">
<%--<img src="images/spacer.gif" width="1" height="36"
alt="" />--%>
</td>
</tr>
<tr>
<td colspan="7" rowspan="3" style="background-image:
url(images/1_entryPage_ScreenPiggy.jpg);
background-repeat: no-repeat; width: 314px; height: 205px;">
<%--<img src="images/1_entryPage_ScreenPiggy.jpg"
width="314px" height="205px" alt="" />--%>
</td>
<td style="background-image: url(images/spacer.gif);
background-repeat: no-repeat; width: 1px; height: 39px;">
<%--<img src="images/spacer.gif" width="1" height="39"
alt="" />--%>
</td>
</tr>
----------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------
<tr>
<td colspan="2" style="background-image:
url(/Images/LayoutFor-1_3_38.jpg);

background-repeat:no-repeat; width:119px; height: 134px;">
<a
href="#ctl00_mnuLeft_SkipLink"><img alt="Skip Navigation Links"
src="/WebResource.axd?

d=vNysEyNtNh6FlfsAm23l0g2&amp;t=633802477995006876" width="0" height="0"
style="border-width:0px;" /></a><table id="ctl00_mnuLeft"

class="LeftMenu ctl00_mnuLeft_2" cellpadding="0" cellspacing="0" border="0">
<tr title="PB101 - home page." id="ctl00_mnuLeftn0">
<td><table class="LeftMenuStaticItem
ctl00_mnuLeft_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td
style="white-space:nowrap;width:100%;"><a class="ctl00_mnuLeft_1
LeftMenuStaticItem

ctl00_mnuLeft_3" style="border-style:none;font-size:1em;">Home</a></td>
</tr>
</table></td>

--
Sincerely,
Zhi-Qiang Ni
Microsoft Online Support
==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================

 

[AG]

Zhi-Qiang,

Thanks for following through. I will try that.

--

AG
Email: npATadhdataDOTcom