ASP.NET - HTML table doesn't look the same on Safari

Hi Experts,

The below html taken from my aspx page. It is a normal HTML table, but it doesn't look the same on Safari.

What is it that I need to change?

Thanks!
<table cellspacing="0" cellpadding="0" style="width: 100%;" id="tbl_centerContent">
    <tbody>
        <tr>
            <td align="center" 
                
                style="background-image: url('../../images/PricesAndSizing_bg.png'); 
                        background-repeat: no-repeat; 
                        background-position: center center; 
                        background-attachment: fixed; 
                        height:40px;" 
                class="module_Title">
                Our Prices</td>
        </tr>
        <tr>
            <td align="center" height="5">
            </td>
        </tr>
        <tr>
            <td align="center">
            <table width="300" cellspacing="0" cellpadding="5" class="text_plain" id="tbl_pricing">
                <tbody>
                    <tr>
                        <td align="center" class="grid_header">
                        Size (cm)</td>
                        <td align="center" class="grid_header">
                        Price (USD)</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        20 x 20</td>
                        <td align="center" class="border_topRight">
                        10.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        30 x 20</td>
                        <td align="center" class="border_topRight">
                        19.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        30 x 30</td>
                        <td align="center" class="border_topRight">
                        28.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        40 x 30</td>
                        <td align="center" class="border_topRight">
                        34.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        50 x 40</td>
                        <td align="center" class="border_topRight">
                        42.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        50 x 50</td>
                        <td align="center" class="border_topRight">
                        47.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        60 x 45</td>
                        <td align="center" class="border_topRight">
                        51.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        70 x 70</td>
                        <td align="center" class="border_topRight">
                        61.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        100 x 70</td>
                        <td align="center" class="border_topRight">
                        72.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        100 x 100</td>
                        <td align="center" class="border_topRight">
                        79.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        120 x 90</td>
                        <td align="center" class="border_topRight">
                        85.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        140 x 100</td>
                        <td align="center" class="border_topRight">
                        98.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightBottomLeft">
                        140 x 140</td>
                        <td align="center" class="border_topRightBottom">
                        120.000</td>
                    </tr>
                </tbody>
            </table>
            <br />
            For any inquires about sizes &amp; pricing, please do not hesitate to <a id="hyp_contactUs" runat="server" class="link">contact us</a>
            </td>
        </tr>
    </tbody>
</table>

Open in new window

feesuAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Looks like Safari will not display borders smaller than 1px. You have .5px.
0
 
manishkungwaniCommented:
Can you show screenshots of the correct rendering and the rendering on the website?

What about it looks different?
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
feesuAuthor Commented:
Look at the borders!
safari.png
0
 
Tom BeckCommented:
Can we see the css, please?
0
 
manishkungwaniCommented:
set the border width and size to zero or to a specific value, otherwise safari renders something for you ...
This shall solve the problem.
0
 
feesuAuthor Commented:
Hi Experts,
Below is the CSS used in the page and the table markup:


-----------------------------------------------------------------------------
CSS
-----------------------------------------------------------------------------
.grid_header
{
    background:#dc87b9;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    height:20px;
    padding-left:8px;
}

.border_top{BORDER-TOP: #d6d7c6 1px solid;}
.border_topRight{BORDER-RIGHT: #d6d7c6 1px solid;BORDER-TOP: #d6d7c6 .5px solid;}
.border_topRightBottom{BORDER-RIGHT: #d6d7c6 1px solid;BORDER-TOP: #d6d7c6 1px solid;BORDER-BOTTOM: #d6d7c6 1px solid;}
.border_topRightBottomLeft{BORDER-TOP: #d6d7c6 1px solid;BORDER-RIGHT: #d6d7c6 1px solid;BORDER-BOTTOM: #d6d7c6 1px solid;BORDER-LEFT: #d6d7c6 1px solid;}
.border_right{BORDER-RIGHT: #d6d7c6 1px solid;}
.border_rightBottom{BORDER-RIGHT: #d6d7c6 1px solid;BORDER-BOTTOM: #d6d7c6 1px solid;}
.border_rightBottomLeft{BORDER-RIGHT: #d6d7c6 .5px solid;BORDER-BOTTOM: #d6d7c6 .5px solid;BORDER-LEFT: #d6d7c6 .5px solid;}
.border_bottom{BORDER-BOTTOM: #d6d7c6 1px solid;}
.border_bottomLeft{BORDER-BOTTOM: #d6d7c6 1px solid;BORDER-LEFT: #d6d7c6 1px solid;}
.border_topBottomLeft{BORDER-TOP: #d6d7c6 1px solid;BORDER-BOTTOM: #d6d7c6 1px solid;BORDER-LEFT: #d6d7c6 1px solid;}
.border_topBottom{BORDER-TOP: #d6d7c6 1px solid;BORDER-BOTTOM: #d6d7c6 1px solid;}
.border_topLeft{BORDER-LEFT: #d6d7c6 1px solid;BORDER-TOP: #d6d7c6 1px solid;}
.border_topRightLeft{BORDER-TOP: #d6d7c6 1px solid;BORDER-RIGHT: #d6d7c6 1px solid;BORDER-LEFT: #d6d7c6 1px solid;}
.border_rightLeft{BORDER-RIGHT: #d6d7c6 1px solid;BORDER-LEFT: #d6d7c6 1px solid;}
.border_left{BORDER-LEFT: #d6d7c6 1px solid;}


-----------------------------------------------------------------------------
Page
-----------------------------------------------------------------------------

<table width="300" cellspacing="0" cellpadding="5" class="text_plain" id="tbl_pricing">
                <tbody>
                    <tr>
                        <td align="center" class="grid_header">
                        Size (cm)</td>
                        <td align="center" class="grid_header">
                        Price (KD)</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        20 x 20</td>
                        <td align="center" class="border_topRight">
                        10.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        30 x 20</td>
                        <td align="center" class="border_topRight">
                        19.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        30 x 30</td>
                        <td align="center" class="border_topRight">
                        28.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        40 x 30</td>
                        <td align="center" class="border_topRight">
                        34.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        50 x 40</td>
                        <td align="center" class="border_topRight">
                        42.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        50 x 50</td>
                        <td align="center" class="border_topRight">
                        47.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        60 x 45</td>
                        <td align="center" class="border_topRight">
                        51.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        70 x 70</td>
                        <td align="center" class="border_topRight">
                        61.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        100 x 70</td>
                        <td align="center" class="border_topRight">
                        72.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        100 x 100</td>
                        <td align="center" class="border_topRight">
                        79.900</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        120 x 90</td>
                        <td align="center" class="border_topRight">
                        85.000</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightLeft">
                        140 x 100</td>
                        <td align="center" class="border_topRight">
                        98.500</td>
                    </tr>
                    <tr>
                        <td align="center" class="border_topRightBottomLeft">
                        140 x 140</td>
                        <td align="center" class="border_topRightBottom">
                        120.000</td>
                    </tr>
                </tbody>
            </table>
0
 
Tom BeckConnect With a Mentor Commented:
Actually in my copy of Safari 5.0.5, the cutoff appears to be at .7px.

.7px shows a border, .6px does not.
0
 
manishkungwaniConnect With a Mentor Commented:
I will suggest that you try a RESET sheet before applying the CSS  or set the margin and padding to zero for all of these, as some browsers add some default browser-spacing.

Here is one you can use the - Eric Meyer's reset CSS to avoid any such problems in the future.

http://meyerweb.com/eric/tools/css/reset/
0
 
feesuAuthor Commented:
That's interesting, thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.