Menu icon Foundation
Strange problem with divs and borders

Hello and thanks for reading this message.

I'm trying to make the skeleton of a web, unusual design (old).

Everything works fine except one detail that took days without being able to solve. In some points, some div's are not displayed correctly.
In the image you can see the problem.

I have performed several tests, and I think the problem is when I apply the "div2" be twice as large as the other divs. But what I do not understand why only occurs in certain parts of the design. It is frustrating.

Also, I thought that these points do not matter since you probably do not coincide with breakpoints (size devices), but I was wrong. Yesterday I tried it on my tablet, and the problem appears :(((

Could anyone tell me what could be the problem?. The code is a bit chaotic, because the tests that have been performed. Here the code: http://codepen.io/drlynch/pen/ZQbadE

URL to see the website:
http://centronovalaser.com/foundation-6/test.html

Regards.

Thanks.

Problem

borders problemdivs

Hello and thanks for reading this message.

I'm trying to make the skeleton of a web, unusual design (old).

Everything works fine except one detail that took days without being able to solve. In some points, some div's are not displayed correctly.
In the image you can see the problem.

I have performed several tests, and I think the problem is when I apply the "div2" be twice as large as the other divs. But what I do not understand why only occurs in certain parts of the design. It is frustrating.

Also, I thought that these points do not matter since you probably do not coincide with breakpoints (size devices), but I was wrong. Yesterday I tried it on my tablet, and the problem appears :(((

Could anyone tell me what could be the problem?. The code is a bit chaotic, because the tests that have been performed. Here the code: http://codepen.io/drlynch/pen/ZQbadE

URL to see the website:
http://centronovalaser.com/foundation-6/test.html

Regards.

Thanks.

Problem
Brandon Arnold almost 4 years ago

Hm i've never seen this before, it's most likely a rounding issue since the columns are all different sizes. I'm wondering if you could code the second row the exact same way as the first and then use a medium-6 medium-6 for div7 and div8.

Lynch over 3 years ago

Hi, Brandon. Thank you very much for your response and interest in helping me :)

I have also concluded that it is a rounding problem. The problem is that I don't know if it's a bug of Foundation or web browsers. With Bootstrap, I had a similar problem... very rare.
If you view the website, the problem only occurs from DIV 2.

I also thought it might be a problem when using the "end" class in the last column: DIV 4. But I think the problem is not there and comes from DIV 2.

I do not think the problem is in my code. But I will try to do more tests and if I see that I haven't satisfastorios results, I will write to premium support.

I have found that in 6.0.6 Foundation has fixed a CSS of columns and rows error. But I guess it will not be related to the problem presented to me. I will try with this new version.

Greetings and thanks.

Lynch over 3 years ago

Tested with Foundation 6.0.6 and the problem still exists :(