Menu icon Foundation
Concrete5 and foundation5 firefox problems

Hello, im currently creating 2 projects based on Foundation5 and Concrete5. So far i have created some C5 + foundation 4 without any efforts, but now i headed the weird problem.

I started to test website on multiple browsers and on firefox it seems that floating is not working properly:

Scr 03

my classes for above example looks like:

<div class="row">
    <div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-1');
			$a->display($c);
		?>		
	</div>
	<div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-2');
			$a->display($c);
		?>		
	</div>
	<div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-3');
			$a->display($c);
		?>		
	</div>
</div>

and small version looks like:
(last column floated little too much to left side)

Scr2 03

To achive integration between concrete5 and foundation5 i have downloaded c5 from github and placed files using the concrete5 theme pattern (the same way i've done with foundation4 without efforts).

so my head tag looks like:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>sitetitle</title>
<meta name="description" content="">
<meta name="generator" content="concrete5 - 5.6.3">
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/mysitepath/index.php';
var CCM_CID = 142;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/mysitepath/concrete/images";
var CCM_TOOLS_PATH = "/mysitepath/index.php/tools/required";
var CCM_BASE_URL = "http://localhost";
var CCM_REL = "/mysitepath";

</script>

<link rel="stylesheet" type="text/css" href="/dropbox/pomerania/concrete/css/ccm.base.css">
<script type="text/javascript" src="/dropbox/pomerania/concrete/js/jquery.js"></script>
<script type="text/javascript" src="/dropbox/pomerania/concrete/js/ccm.base.js"></script>
<script type="text/javascript" src="/dropbox/pomerania/packages/automatic_email_obfuscator/js/email_deobfuscator_html.js"></script>

<script type="text/javascript">
var COOKIES_ALLOWED=true;
</script>
<link rel="stylesheet" type="text/css" href="/mysitepath/blocks/autonav/templates/pb_nav/view.css">
<script type="text/javascript" src="/mysitepath/packages/multilingual/blocks/switch_language/view.js"></script>
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/normalize.css" type="text/css">
    
    <script type="text/JavaScript" src="/dropbox/pomerania/themes/pb/js/modernizr.js"></script>
        <link rel="stylesheet" href="/dropbox/pomerania/themes/pb/css/allinputsandbuttons.css" type="text/css">
        
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/fonts.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/foundation.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/typography.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/main.css" type="text/css">
<meta class="foundation-data-attribute-namespace"><meta class="foundation-mq-xxlarge"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-large"><meta class="foundation-mq-medium"><meta class="foundation-mq-small"><style></style><meta class="foundation-mq-topbar">

and in footer (just before body tag) i use:

    <script src="<?php echo $this->getThemePath()?>/js/foundation.min.js"></script>
	<script src="<?php echo $this->getThemePath()?>/js/foundation/foundation.orbit.js"></script>
	<script>
		$(document).foundation();
	</script>

also i saw that on chrome that <div class="row"></div>  havent use proper clear and <div></div> inside were floating each other to left.

to fix that i used <div class="clearfix"></div> between each <div class="row"></div> in my layout.

i use _settings.scss file to make layout changes which is imported inside foundation.scss

@import
  "foundation/settings",
  "foundation/components/grid",
  ....... 
  and so on and so on....

What i can tell more, basicly all the columns float related things doesnt work for me on firefox ( basic grid, block grid and inside element floats). Im using firefox 27.0.1 and chrome 33.0.1. Also i have succefully tested my website on chrome mobile edion on LG Nexus 5

I can provide any other further informations about my enviroment, code, used plugins etc. to solve this problem. Maybe im missing something or i have done repeatable mistake...

Looking forward for your replies !

firefoxcolumn floatproblemconcrete5

Hello, im currently creating 2 projects based on Foundation5 and Concrete5. So far i have created some C5 + foundation 4 without any efforts, but now i headed the weird problem.

I started to test website on multiple browsers and on firefox it seems that floating is not working properly:

Scr 03

my classes for above example looks like:

<div class="row">
    <div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-1');
			$a->display($c);
		?>		
	</div>
	<div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-2');
			$a->display($c);
		?>		
	</div>
	<div class="columns large-4 medium-6 small-12">
		<?php     
			$a = new Area('Main3-3');
			$a->display($c);
		?>		
	</div>
</div>

and small version looks like:
(last column floated little too much to left side)

Scr2 03

To achive integration between concrete5 and foundation5 i have downloaded c5 from github and placed files using the concrete5 theme pattern (the same way i've done with foundation4 without efforts).

so my head tag looks like:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>sitetitle</title>
<meta name="description" content="">
<meta name="generator" content="concrete5 - 5.6.3">
<script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/mysitepath/index.php';
var CCM_CID = 142;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/mysitepath/concrete/images";
var CCM_TOOLS_PATH = "/mysitepath/index.php/tools/required";
var CCM_BASE_URL = "http://localhost";
var CCM_REL = "/mysitepath";

</script>

<link rel="stylesheet" type="text/css" href="/dropbox/pomerania/concrete/css/ccm.base.css">
<script type="text/javascript" src="/dropbox/pomerania/concrete/js/jquery.js"></script>
<script type="text/javascript" src="/dropbox/pomerania/concrete/js/ccm.base.js"></script>
<script type="text/javascript" src="/dropbox/pomerania/packages/automatic_email_obfuscator/js/email_deobfuscator_html.js"></script>

<script type="text/javascript">
var COOKIES_ALLOWED=true;
</script>
<link rel="stylesheet" type="text/css" href="/mysitepath/blocks/autonav/templates/pb_nav/view.css">
<script type="text/javascript" src="/mysitepath/packages/multilingual/blocks/switch_language/view.js"></script>
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/normalize.css" type="text/css">
    
    <script type="text/JavaScript" src="/dropbox/pomerania/themes/pb/js/modernizr.js"></script>
        <link rel="stylesheet" href="/dropbox/pomerania/themes/pb/css/allinputsandbuttons.css" type="text/css">
        
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/fonts.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/foundation.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/typography.css" type="text/css">
    <link rel="stylesheet" href="/mysitepath/themes/pb/css/main.css" type="text/css">
<meta class="foundation-data-attribute-namespace"><meta class="foundation-mq-xxlarge"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-large"><meta class="foundation-mq-medium"><meta class="foundation-mq-small"><style></style><meta class="foundation-mq-topbar">

and in footer (just before body tag) i use:

    <script src="<?php echo $this->getThemePath()?>/js/foundation.min.js"></script>
	<script src="<?php echo $this->getThemePath()?>/js/foundation/foundation.orbit.js"></script>
	<script>
		$(document).foundation();
	</script>

also i saw that on chrome that <div class="row"></div>  havent use proper clear and <div></div> inside were floating each other to left.

to fix that i used <div class="clearfix"></div> between each <div class="row"></div> in my layout.

i use _settings.scss file to make layout changes which is imported inside foundation.scss

@import
  "foundation/settings",
  "foundation/components/grid",
  ....... 
  and so on and so on....

What i can tell more, basicly all the columns float related things doesnt work for me on firefox ( basic grid, block grid and inside element floats). Im using firefox 27.0.1 and chrome 33.0.1. Also i have succefully tested my website on chrome mobile edion on LG Nexus 5

I can provide any other further informations about my enviroment, code, used plugins etc. to solve this problem. Maybe im missing something or i have done repeatable mistake...

Looking forward for your replies !

Andrzej K about 5 years ago

I found thing which should be really relevant to this case:

when i set

$column-gutter: 0px;

the whole layout system seems to work fine, but i have no left/right padding between borders...

still the problem exist on firefox only.

Pyry about 5 years ago

Grid is broken in Firefox in Foundation 5.2.1. See this topic:

http://foundation.zurb.com/forum/posts/4924-after-compiling-sass-foundation-isnt-shown-correctly-in-firefox

Armin made a workaroud adding automatically -moz-prefixes in Prepros. Problem seems to be with -moz-box-sizing -prefixes.

I have not tried this yet, but I found some changes made to box-sizing mixin in _global.scss. Moz-prefix is removed from Foundation 5.2.1. Box-sizing is supported in Firefox only from version 29, so -moz-box-sizing is removed too early. 29 is not a stable release yet.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Browser_compatibility

Foundation 5.2.0
SCSS
// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
@if $experimental {
-moz-box-sizing: $type;
-webkit-box-sizing: $type;
}
box-sizing: $type;
}

Foundation 5.2.1
SCSS
// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
box-sizing: $type;
}

Andrzej Kaźmierczak about 5 years ago

Hello, thanks for your reply. Meanwhile you have posted on my topic i have found solution by my own, adding manually

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

to normalize.css

Also im using prepros and "auto-prefix" options woroks aswell !! just have tested it ;)

thanks !! topic could be closed.