CODEWITHSUNDEEP
csscross-browseroperafluid-layout
Paul Sheldrake
Paul Sheldrake

Reputation: 7801

Problem with percentage based widths in Opera

I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be consistent then I may change to fixed sizes.

Does anyone know how I can get Opera to render the width the same as the other browsers?

example of Opera browser not render something the percentage width it should be

Here is the CSS and HTML I'm using for this demo

.show_grid {
  background: url(../img/grid.gif) no-repeat center top;
}

html, body{
  margin: 0;
  padding: 0;
}
.container {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  max-width: 936px;
  padding-top: 15%;
}
.box {
  width: 15.633%;
  background: #006;
  color: #999;
  margin: 5% .55%   
}


<div class="container show_grid">
  <div class="box">2 column - browser name</div>
</div>

Upvotes: 7

Views: 3408

Answers (2)

kizu
kizu

Reputation: 43224

Opera rounds percent widths but it doesn't round percentage values for paddings and margins.

So, the easy way is to set the width: 15%, and add padding-right:.633%. But doing so, only the block would be bigger visually.

If you want to have it's width fair so all childs would have the same width, you'll need to add another wrapper and add the appropriate negative margin to it. It is calculated by this formula: 100/width*padding, in your case: 100/15*0.633. It would compensate the padding and everything would be cool.

Here is a fiddle with all the variants: http://jsfiddle.net/kizu/8q23d/ — fixed width in pixels, block with width:15.633%, first visual fix and the proper fix at the end.

Upvotes: 15

Rdpi
Rdpi

Reputation: 581

Dealing with different box models could be very tricky and time consuming. I definitely suggest you to avoid dirty CSS hacks that will not validate your css files.

You could try to drop the use of percentage values and go for an "elastic" layout. In this case you specify the min-width and max-width for your block elements. An article about elastic layout is here and something more here

In alternative you could detect the browser via javascript or via library and use conditional CSS files. This is my favorite approach when dealing with IE.

conditional css is a library that will help you with that, but there are many more options in the web.

Good luck

Upvotes: 0

Related Questions