[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

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

0
feesu
Asked:
feesu
  • 3
  • 3
  • 3
  • +1
3 Solutions
 
manishkungwaniCommented:
Can you show screenshots of the correct rendering and the rendering on the website?

What about it looks different?
0
 
feesuAuthor Commented:
Look at the borders!
safari.png
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 BeckCommented:
Looks like Safari will not display borders smaller than 1px. You have .5px.
0
 
Tom BeckCommented:
Actually in my copy of Safari 5.0.5, the cutoff appears to be at .7px.

.7px shows a border, .6px does not.
0
 
manishkungwaniCommented:
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now