CODEWITHSUNDEEP
iphonecssmobile-safari
Dima V.
Dima V.

Reputation: 1

Bug with table in mobile Safari

I have the following table:

<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse">
<tr>
    <td class="tr-l-t">
    </td>
    <td class="tr-t">
    </td>
    <td class="tr-r-t">
    </td>
</tr>
<tr>
    <td class="tr-l">
    </td>
    <td class="control-panel">
    </td>
    <td class="tr-r">
    </td>
</tr>
<tr>
    <td class="tr-l-b">
    </td>
    <td class="tr-b">
    </td>
    <td class="tr-r-b">
    </td>
</tr>

...and CSS

.tr-l-t
{
    background: url("../Images/tr_l_t.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-l-b
{
    background: url("../Images/tr_l_b.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-r-t
{
    background: url("../Images/tr_r_t.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-r-b
{
    background: url("../Images/tr_r_b.png") no-repeat;
    width: 6px;
    height: 6px;
}
.tr-t
{
    background: transparent url("../Images/tr_t.png") repeat scroll 0 0;
    height: 6px;
}
.tr-l
{
    background: transparent url("../Images/tr_l.png") repeat scroll 0 0;
}
.tr-r
{
    background: transparent url("../Images/tr_r.png") repeat scroll 0 0;
}
.tr-b
{
    background: transparent url("../Images/tr_b.png") repeat scroll 0 0;
    height: 6px;
}
.control-panel
{
    background-color: #151515;
    width: 300px;
    height: 30px;
}

Both look good in IE7/8, FF, Chrome and Safari (Windows and Mac OS) browsers. However, in Safari for Ipod / Iphone / Ipad white stripes appear in between td tags. I've tried adding border:0 none, padding:0px, margin: 0px, but with no success.

Do you have any ideas on how to fix it?

Upvotes: 0

Views: 1853

Answers (2)

alex
alex

Reputation: 33

margin-bottom: -2px; //on one of the TD elements

This worked for me, but in my case I was joining two TDs with a solid white color. Not sure if this will be usable in every case.

Upvotes: 3

MatW
MatW

Reputation: 11

Set the viewport using a meta tag in the template of the page. When the scale is at "1" the tables apear okay. When zooming in or out OR even setting the initial zoom anything other than 1, you get the gaps. That's what I'm working on at the moment.

reg, MW

Upvotes: 1

Related Questions