Frage
i have posted a question on ZURB's forum, but i noticed there were no answers to any post. As i think this problem might occur to many others, i think it might be a good idea to put it on SO as well. Here it comes:
i have crafted a minimal example of the problem using the following markup (Edited with CLCS advices):
https://stackoverflow.com/questions/20970347
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>
All CSS classes are ZURB Foundation untouched classes. The only addition is for the test-table class, which sole purpose is only to get visual aid on the problem (Edited as well for clarity sake):
.test div {
border: 1px solid red;
}
The expected output would be 3 columns perfectly touching each other. The actual output is two columns touching each other like expected, but the third one being offset a bit on the right, leaving a white space between the center and the right one (See attached image, edited as well, but issue still present).
[EDIT]Seems that some other users are facing the same problem under the same environment (Safari 7, Zurb Rails Gem 5.0.2.0)[/EDIT]
Lösung 3
Looks like a rounding issue with how Safari is converting the % widths of the columns, default site width ends up (on my machine at least) at 1000px wide. Comparing the calculated results between Chrome and Safari I get 333.328px in Chrome and 333px in Safari.
Depending on the rest of your layout requirements a workaround may be to adjust your layout widths to a figure that works better with the columns you require.
Andere Tipps
It is a combination of rounding issue that others have pointed out above and the fact that Foundation put float: right; on the last column in the row. That is why you are seeing the gap between the last column and the middle column.
To remove the gap, you can add the end class to every column.
Have a look at Foundation's docs under "Incomplete Rows" http://foundation.zurb.com/docs/components/grid.html#incomplete-rows
The problem is with roundings by Safari. There is a difference between width: 33.333% and width: 33.333333% for large-4 in Safari. To solve it use sass to compile own css based on foundation sass files and make higher precision number.
Put Sass::Script::Number.precision = 6 in config.rb
or in Gruntfile.coffee
sass:
options:
loadPath: ["bower_components/foundation/scss"]
sourcemap: "true"
precision: 6
dist:
files:
"css/app.css": "scss/app.scss"
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* to fix 1px Foundation 5 bug*/
Adding a border of 1px worked for me. You could try something like this:
<div class="small-5 small-offset-2 columns border">
...
</div>
<div class="small-5 columns border">
...
</div>
On CSS: .border {border-right: 1px solid color-of-column;}
