Flexbox does not work in Safari, striked out in Web inspector
You need use prefix so does safari supports
#grid {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 55px;
left: 415px;
bottom: 10px;
right: 10px;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
display: -webkit-flex;
-webkit-justify-content: space-between;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
}
CSS3 Flexbox fails in Webkit (Chrome and Safari)
Try adding vendor prefixes.
<nav>
<div id="navbox" style="display: -webkit-box; -webkit-box-orient: horizontal;">
<img src="../gfx/lg_logo.png" />
<div>tagline</div>
</div>
</nav>
BTW, img
element doesn't have closing tag.
Web site using flexbox not working on IOS
Your use of flex is overexcessive; its being used in areas where it isn't needed and hence it's causing unnecessary problems across browsers.
Flexbox is only supported on relatively new browsers (IE10+, see this link for all browser compatibilities), so supporting anything below that is out of the question. Also, I think you should read up on the use of the shorthand "flex" as removing it in inspector on Safari will solve many of your layout issues.
This is an excellent guide to understand how flex works.
Chrome / Safari not filling 100% height of flex parent
Solution
Use nested flex containers.
Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align
. Avoid absolute positioning. Just stick with flexbox all the way through.
Apply display: flex
to the flex item (.item
), making it a flex container. This automatically sets align-items: stretch
, which tells the child (.item-inner
) to expand the full height of the parent.
Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%
), then it will ignore the align-items: stretch
coming from the parent. For the stretch
default to work, the child's height must compute to auto
(full explanation).
Try this (no changes to HTML):
.container { display: flex; flex-direction: column; height: 20em; border: 5px solid black}
.item { display: flex; /* new; nested flex container */ flex: 1; border-bottom: 1px solid white;}
.item-inner { display: flex; /* new; nested flex container */ flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */ /* width: 100%; <-- remove; unnecessary */ /* display: table; <-- remove; unnecessary */ }
a { display: flex; /* new; nested flex container */ flex: 1; /* new */ align-items: center; /* new; vertically center text */ background: orange;
/* display: table-cell; <-- remove; unnecessary */ /* vertical-align: middle; <-- remove; unnecessary */}
<div class="container"> <div class="item"> <div class="item-inner"> <a>Button</a> </div> </div>
<div class="item"> <div class="item-inner"> <a>Button</a> </div> </div>
<div class="item"> <div class="item-inner"> <a>Button</a> </div> </div></div>
What does it mean when a CSS rule is grayed out in Chrome's element inspector?
For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.
Greyed/dimmed out text, can mean either
- it's a default rule/property the browser applies, which includes defaulted short-hand properties.
- It involves inheritance which is a bit more complicated.
Inheritance
Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.
In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.
The rules which are applied to the currently selected element appear in normal text.
If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.
here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Excerpt from the article
This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.
text-align is not working on safari select
For Safari
text-align: -webkit-center;
However, the best way to analyze the working of HTML/CSS is the Web-Inspector in Safari.
More >>
Related Topics
Background Image Width Not 100% on Ipad
How to Make Sidebar with Same Height as The Content Div
How to Add or Change The Class Attribute of a Jsf Datatable (Primefaces)
Make an Image Fit Its Container by Setting The Image Height to The Containers Heights
CSS Divs Jumping When Border Added
CSS - Style Svg Fill with Class Name
Changing The Color of Active Navigation Bar
Is a CSS Reset Still Necessary
Custom Classname Semantic UI React
Seeing CSS Pseudo-Elements in Firebug
Pure CSS Solution to Styling Specific <Select> Options in Webkit Based Browsers
Why Does My Custom Font Have a Positional Offset in Some Browsers