CODEWITHSUNDEEP
css
user3542945
user3542945

Reputation: 41

responsive page using table-cell not working with Safari

I'm trying to design a responsive site. Everything works fine on all browsers except Safari. I need to have in a centered page maximum-width:950px; two side columns with a fixed width and the center column to reduce so that the page fits Inside the window. With Safari the center column reduces when I reduce the window width, but the body width of 950px is ignored. Here is a sample of the code I use:

<!DOCTYPE HTML> 
<HTML>
<STYLE>
body
    {
    width:950px;
    margin:0 auto;
    padding:0;
    }
div.container
    {
    position:absolute;
    display: table;
    width:100%;
    max-width:950px;
    margin:10px;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }
div.leftColumn
    {
    display: table-cell;
    width:200px;
    border:solid 1px red;
    margin:2px;
    }
div.center
    {
    display: table-cell;
    border:solid 1px blue;
    margin:2px;
    }
div.rightColumn
    {
    display: table-cell;
    width:200px;
    border:solid 1px green;
    margin:2px;
    }
</STYLE>
<BODY>
<div class="container">
<div class="leftColumn">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, 
mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
<div class="center">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, 
mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
<div class="rightColumn">
Lorem ipsum dolor sit amet, quo elit movet tincidunt ne, cum in prima vituperatoribus. 
Ea qui nostro percipit reprimique, eos in augue virtute. Mutat aliquam alienum ne mea, mutat 
dicat scripta vix et. Regione oblique eum ea, ne usu quod vero mazim. Te mea eros denique, mei te hinc suscipit omittantur, no qui diam inani nominavi.
</div>
</div>
</BODY>
</HTML>

Upvotes: 1

Views: 553

Answers (2)

user3542945
user3542945

Reputation: 41

Ok, the problem is mainly when the window gets larger than 950px. So I solved the problem by -1: replace 

  width:100%;
  max-width:950px;

by 

  width:950px;

this way the page works fine when the window is larger than 950px, this was when the problem occured, -2: add

@media (max-width: 950px) 
  {
  div.container
    {
    width:100%;
    }
  }

this way the page works as well for Windows less than 950px. And other browser don't complain about the fix.

Upvotes: 0

Tropilac
Tropilac

Reputation: 47

Some browsers don't support certain elements and styles in html 5. have a look at w3 Schools to find out if elements work in all browsers.

You can also go to the Editor to put the html in and see it in action.

Upvotes: 1

Related Questions