CODEWITHSUNDEEP
cssgoogle-chromesafari
kjo
kjo

Reputation: 35321

Simple CSS but completely different appearance in Chrome 31 and Safari 6

I'm at a loss. I have some very simple CSS (and no JS) producing totally different results under different browsers. For example, below are screenshots of Chrome 31's (on the left) and Safari 6's renditions.

enter image description here enter image description here

(FWIW, every other browser I've tried matches Chrome's, so Safari 6 is the outlier here. Also, the version on the left is closer to the desired appearance.)

I copy the relevant code at the end of this post. The page may be viewed here.

My main question is: what's the best way to fix this problem?

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-family:consolas,monaco,courier,monospace;
}

.banner{
  background:lightgray;
}
.header{
  height:50px;
}
.footer{
  height:300px;
}

.main{
  position:relative;
  max-width:400px;
  margin:0 auto;
  padding:10px;
  display:table;

  background-color:steelblue;
}

.left-panel{
  position:absolute;
  background-color:#555;
}
.vfloat{
  position:absolute;
  padding:10px 30px;
  background-color:#0aa;
  font-size:15px;
}

.right-panel{
  margin-left:200px;
}
.vfixed{
  padding:20px 60px;
  background-color:orange;
  font-size:30px;
}



<div class="header banner"></div>

<div class="main">

  <div class="left-panel">
    <div class="vfloat"><p>Donec laoreet, justo eget luctus pulvinar, nulla mauris facilisis massa, sit amet egestas lacus erat eu felis. In at urna eu elit dictum porttitor. Ut dictum justo nec urna mattis, ut pharetra mauris adipiscing. Pellentesque lacinia turpis id vulputate commodo. Nullam fringilla justo vitae consequat euismod.</p></div>
  </div> <!-- .left-panel -->
  <div class="right-panel">
    <div class="vfixed"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque magna lacus, sed porttitor tortor ultricies ut. Quisque tellus lectus, tincidunt et elementum a, viverra non diam.</p></div>
  </div> <!-- .right-panel -->

</div> <!-- .main -->

<div class="footer banner"></div>

Upvotes: 0

Views: 76

Answers (1)

Bryan Elliott
Bryan Elliott

Reputation: 4095

Max-width: applies to display:block elements. display: table is neither block nor inline. So this is probably your problem. You can use display:block; max-width:400px and should work.

Upvotes: 4

Related Questions