CODEWITHSUNDEEP
cssresponsive-designsasszurb-foundation
Camrin Parnell
Camrin Parnell

Reputation: 449

Safari issue with table and table cell properties (responsive design)

First off I would like to start by explaining my issue, it is as follows:

In all browsers except for Safari my website http://www.hamiltonseniorcity.com/dean/location-category/health-wellness/?passedpageid=28&box=1 appears normal and scales down appropriately on this page, in Safari and on my iPad the page distorts and does not scale down to smaller screens properly. Also it appears that the div that holds the left and right content areas expands to full screen. I believe the issue is caused by how Safari is rendering my divs table and table cell properties, I could be wrong. Does anyone have a solution for this issue or any suggestions?

Upvotes: 0

Views: 8514

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23600

I've tested the page on the iPad and I can reproduce your problem.

The issue is caused by this CSS rule:

.equal-columns > div {
    display: table-row;
}

It's overwriting this code:

.equal-columns > div {
    display: table-cell;
}

with the help of this the media query addressing the iPad:

@media screen and (max-width: 768px)

I think Safari gets into trouble, as there's no table cell within the table row now. If you fix this and set it to display: table-cell; no matter what resolution, it works again in Safari on the iPad. I guess it will also fix it on the Safari 5.1.7 on PC.

Also note that Safari is no longer developed for PC. 5.1.7 is the latest and last release from May 2012. All the new Webkit stuff from Apple will not be available on PC. Unfortunately. …

Upvotes: 1

Related Questions