Display Flex not working on Firefox but Chrome
You can fix this by wrapping your table inside another div like this :
#fluidDescription_subContainer {
display: flex;
display: -moz-box;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: white;
}
#tableWrapper {
flex: 3;
}
#fluidDescriptions_table[name="sav"] {
font-size: 12px;
text-align: left;
margin-bottom: 0px;
}
#sav_fluid_extra_button {
display: flex;
display: -moz-box;
display: -webkit-flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-flex-direction: column;
flex: 1;
cursor: pointer;
border-left: 2px solid #f4f4f4;
text-decoration: none;
}<div id="fluidDescription_subContainer" style="">
<div id="tableWrapper">
<table name="sav" style="" id="fluidDescriptions_table" class="table">
<tbody id="fluidDescriptions_tbody">
<tr style="border-bottom: 1px solid #f4f4f4">
<td id="fluidDescriptions_controlFunction">Typ 2.3</td>
</tr>
<tr style="border-bottom: 1px solid #f4f4f4">
<td id="fluidDescriptions_steuerung">GAZ-7</td>
</tr>
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
</tr>
</tbody>
</table>
</div>
<a href="#" id="sav_fluid_extra_button" data="GAZ-7-SR-2SOV-2QDV-PRV-HPP" style="">
<b>Fluid-Plan</b>
<i class="fa fa-file-pdf-o fa-5x"></i>
</a>
</div>Flex not working properly in Firefox
I figured out that this is specifically an issue with input elements. flex will not work with input elements in Firefox unless you add this to the CSS:
input { min-width: 1px; }
Flexbox not working properly with Firefox
You need height: 100vh on the body element. Then, to prevent a vertical scrollbar, override the default margins with margin: 0.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh; /* NEW */
margin: 0; /* NEW */
}
html {
background-color: #f7f7f7;
font-family: interstate-mono, monospace;
font-weight: 400;
font-style: normal;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh; /* NEW */
margin: 0; /* NEW */
}
main {
display: flex;
flex-direction: column;
}
.weather-nav {
display: flex;
}
.weather {
text-align: center;
}
main form {
margin: 1em auto !important;
height: 45px;
width: 490px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}
main form input[type="search"] {
width: inherit;
height: inherit;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0.75em;
border-width: 0;
font-size: 1.1em;
font-family: interstate-mono, monospace !important;
font-weight: 300 !important;
font-style: normal !important;
}
main form input[type="search"]:focus {
outline: none;
}
main nav {
display: flex;
justify-content: center;
}
main nav .bookmark-group {
text-align: left;
list-style-type: none;
margin: 0;
padding-right: 2em;
}
main nav .bookmark-group hr {
border-color: rgba(0, 0, 0, 0) !important;
}
main nav .bookmark {
text-align: left;
list-style-type: none;
margin: 0;
padding: 0;
font-weight: 300;
}
main nav .bookmark hr {
border-color: rgba(0, 0, 0, 0) !important;
}
main nav .bookmark li {
display: inline;
padding-right: 0.8em;
}
main nav .bookmark li a {
color: black;
text-decoration: none;
}
footer {
display: flex;
align-self: flex-end;
}
#stack {
color: #f48024;
font-weight: 400;
}
#git {
color: #24292e;
font-weight: 400;
}
#java {
color: #467899;
font-weight: 400;
}
#python {
color: #467899;
font-weight: 400;
}
#aws {
color: #ec912d;
font-weight: 400;
}
#nest {
color: #aa253a;
font-weight: 400;
}
#hs {
color: #fece41;
font-weight: 400;
}
#dw {
color: #b30939;
font-weight: 400;
}
#canvas {
color: #9e1b32;
font-weight: 400;
}
#waze {
color: #85d5ea;
font-weight: 400;
}
#yt {
color: red;
font-weight: 400;
}
#reddit {
color: #ff4500;
font-weight: 400;
}
#rd {
color: silver;
font-weight: 400;
}
#dayz {
color: #292929;
font-weight: 400;
}
#google {
color: #1da362;
font-weight: 400;
}
#mf {
color: #0e2866;
font-weight: 400;
}
#eye {
color: #36393e;
font-weight: 400;
}
#vim {
color: navy;
font-weight: 400;
}
#react {
color: #61dafb;
font-weight: 400;
}
#js {
color: #f5f9fa;
font-weight: 400;
}
#ct {
color: #ff9800;
font-weight: 400;
}
#bttn {
color: #fffde7;
font-weight: 400;
}
#animate {
color: #7b8993;
font-weight: 400;
}<header></header>
<main>
<div class="weather-nav">
<form action="https://duckduckgo.com/?q=" method="GET">
<input type="search" name="q" placeholder=" welcome back" autoFocus></input>
</form>
<div class="weather">
<div id="u"></div>
<div id="t"></div>
</div>
</div>
<nav>
<ul class="bookmark-group">
<li>dev</li>
<hr>
<li>social</li>
<hr>
<li>storage</li>
<hr>
<li>web</li>
</ul>
<ul class="bookmark">
<li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
<li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
<li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
id="dw">]</span></a></li>
<li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
<li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
<li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
<li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
<hr>
<li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
<li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
<li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
<li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
<li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
<hr>
<li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
<li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
<li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
<li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
<hr>
<li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
id="java">[</span>JS<span id="java">]</span></a></li>
<li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
<li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
<li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
<li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
<br>
</ul>
</nav>
</main>
<footer>
<div id="s"></div>
</footer>display: flex - not working in firefox 21
display: flex is currently only supported behind a runtime flag in Firefox.
To enable it, enter about:config in the url field, search for flexbox, and set it to true.
It is enabled by default in Firefox Nightly, as it is a non-stable version.
It is due to be enabled by default in Firefox 22, providing the feature is ready to ship.
Display: flex won't work in firefox or safari
Found a really simple solution at https://css-tricks.com/snippets/sass/centering-mixin/ using some scss:
@mixin centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
.parent {
position: relative;
}
.child {
@include centerer;
}
Flexbox on table doesn't work in Firefox
That's because, according to CSS tables, anonymous table objects should be generated when tabular elements are not children of a table:
According to the Flexbox Last Call Working Draft, it was that anonymous table what became the flex item, not the table cells:
Some values of
displaytrigger the creation of anonymous boxes
around the original box. It’s the outermost box—the direct child of
the flex container box—that becomes a flex item. For
example, given two contiguous child elements withdisplay: table-cell, the anonymous table wrapper box generated around
them [CSS21] becomes the flex item.
Since the table cells were not flex items, they ignored the flex property. It would apply to the anonymous table, but CSS selectors can't select anonymous elements.
However, Chrome disagreed with the spec and decided to blockify the table cells instead.
Then the CSS working group decided to standardize Chrome's behavior:
If you have a flex container and you put two table cells in it, they
won't become flex items independently. They'll wrap in an anonymous
table and that will be flex.However, Chrome had implemented it so that each item is independently
a flex item. [...] So it turns the table cells into blocks.I've seen at least one presentation at a conference where they took
advantage of this to create fallback behavior for a flex. [...] If you're
not trying to trigger fallback, I don't know why you'd put a bunch of
table cells in flex and get it wrapped in anonymous stuff. [...]RESOLVED: Just blockify the children of flex and grid containers.
Don't do anonymous box fix-up
The first Flexbox Candidate Recommendation was published with that new resolution:
Some values of
displaynormally trigger the creation of
anonymous boxes around the original box. If such a box is a flex
item, it is blockified first, and so anonymous box creation will
not happen. For example, two contiguous flex items with
display: table-cellwill become two separatedisplay: blockflex items, instead of being wrapped into a single
anonymous table.
And then Firefox implemented the new behavior starting at version 47 (bug 1185140).
For older versions, you can style the cells as blocks manually:
.flex-container > td {
display: block;
}
* {
box-sizing: border-box;
}
table{
border: 1px solid #ddd;
width: 100%;
}
tbody {
background: #fff;
}
tr {
display: flex;
}
td {
display: block;
}
td:first-child {
flex: 1 1 80%;
background: mistyrose;
}
td:nth-child(2){
flex: 0 0 10%;
background: Aquamarine;
}
td:nth-child(3){
flex: 0 0 10%;
background: pink;
}<table>
<tbody>
<tr>
<td>Ted</td>
<td>1</td>
<td>100%</td>
</tr>
<tr>
<td>Turd Ferguson</td>
<td>2</td>
<td>65%</td>
</tr>
<tr>
<td>Hingle McKringleberry</td>
<td>3</td>
<td>99%</td>
</tr>
</tbody>
</table>Related Topics
What Characters Must Be Escaped in an Http Query String
How to Save the Content in Uiwebview for Faster Loading on Next Launch
Best JSON-Ld Practices: Using Multiple <Script> Elements
How to Make Responsive Website for All Devices
If an HTML Form Has Two <Input Type="Submit"> Buttons, How to Know Which Got Clicked
Why Is "" Being Injected into My HTML
How to Use the Same Meta Tag for Opengraph and Schema.Org
Any Way of Using Frames in HTML5
Set Maxlength in HTML Textarea
Change Checkbox Check Image to Custom Image
Pure CSS Continuous Horizontal Text Scroll Without Break
HTML - How to Do a Confirmation Popup to a Submit Button and Then Send the Request
HTML Table Different Number of Columns in Different Rows