Microsoft Edge bug using hyphenation and flexbox - css

This code shows two div containers. On the div with the id a is display: flex; set. On both we have hyphenation activated using -ms-hyphens: auto;.
But in IE or Edge the hyphenation only works on the div without the flexbox attached. As expected it works well in Chrome and Firefox.
div {
max-width: 100px;
background: red;
-ms-hyphens: auto;
hyphens: auto;
margin-bottom: 10px;
}
#a {
display: flex;
}
<article>
<div id="a" lang="en">
Incomprehensibilities
</div>
<div id="b" lang="en">
Incomprehensibilities
</div>
</article>
https://codepen.io/anon/pen/jmGxJZ
Does anybody have a solution?

I finally found an answer.
According to https://css-tricks.com/almanac/properties/h/hyphenate/
The hyphens property controls hyphenation of text in block level
elements.
They say explicitly block level elements. So I decided not to use flexbox because this is not really a block level element thank you #LGSon.
So to have the text both centered and hyphenated I used the approach from https://css-tricks.com/centering-css-complete-guide/ to vertically center a block level element.
Additionally according to http://caniuse.com/#feat=css-hyphens Chrome on Windows is not supporting hyphenation anyway. So I used word-break: break-all; just for Chrome using a media query hack from here https://stackoverflow.com/a/13587388/4558231.
Finally it's working for Chrome, FF and Safari on MAC OSX.
Also for Edge and IE11 on Windows.
You can see my result on https://codepen.io/bierik/pen/mmBjqQ

Related

Why is display: flow-root; invalid in mobile

I have display: flow-root; on my responsive css script. Works perfectly on the browser responsive test but fails on my device.
shows invalid on my device am able to know this when i inspect through remote device in chrome. Any alternatives i can use ??.
If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.
It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
display: inline-block - Better
Flexbox - Best (but limited browser support)
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
For a detailed browser list see: http://caniuse.com/flexbox.
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements
A clearfix is performed as follows:
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Normally you would need to do something as follows:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer # CSS-Tricks
display: flow-root; Needs Chrome Canary or Firefox Nightlies.
sets it to display: table; or display: block;
May be you can use overflow: visiible to contain float-ed elements.

Flexbox seems to be ignoring CSS specificity

I am attempting to use Flex-By-Default in the same manner as Facebook's CSS layout project. I am having some trouble when it comes to overriding the styles for display: inline-flex elements.
Per this jsfiddle:
The HTML, with two '.test-me' divs:
<body>
<h1>TEST</h1>
<div class="test-me">
I'm correctly displayed as inline-flex
</div>
<div>
<div class="test-me">
'Styles' shows inline-flex, but 'Computed' shows flex
</div>
</div>
</body>
Here is the styling:
.test-me {
display: inline-flex;
background-color: green;
border: 1px solid black;
margin: 6px;
}
div, span {
display: flex;
/* Commenting out flex-direction makes second test-me div display correctly */
flex-direction: column;
background-color: purple;
}
I am am slightly concerned this is a browser bug: in Chrome Developer Tools, 'Styles' shows 'inline-flex' winning (as it's from the more specific styling), but 'Computed' shows 'flex'.
Even though 'display: flex' is crossed out (since it's overridden by 'display: inline-block'), disabling the already crossed-out style fixes the issue.
Revised Answer
#BoltClock, in the comments, provides the relevant section in the spec covering this behavior.
Section 4. Flex
Items
The display value of a flex item is blockified: if the specified
display of an in-flow child of an element generating a flex
container is an inline-level value, it computes to its block-level
equivalent.
This means that in a scenario like the one described in the question, where a child of a flex container is given an inline-level value, the child computes to its block-level equivalent. In a nutshell, the flex item with display: inline-flex becomes display: flex.
Original Answer
I am am slightly concerned this is a browser bug: in Chrome Developer
Tools, 'Styles' shows 'inline-flex' winning (as it's from the more
specific styling), but 'Computed' shows 'flex'.
Tested your code in Chrome, Firefox and Internet Explorer 11. The behavior is all the same. So I wouldn't say this is a browser bug.
Although you are correct that in Chrome (and Firefox) the inspector shows 'Styles' having inline-flex and 'Computed' having flex, in IE11 it shows inline-flex on both panes, but it renders like the others nonetheless.
A reading of the spec suggests that flex items can only be block elements. Even though you're applying display: inline-flex to the div, the same div is a flex item of a larger container with display: flex. The flex item with inline-flex is possibly being overridden as part of the flex formatting context.
Although there is no direct reference to the spec, here's another answer that may be helpful: https://stackoverflow.com/a/27090088/3597276

<main> element doesn't show padding in Opera, Safari, IE

I have the html5 element in my project and given it a padding. Firefox and Chrome show the padding correctly, but unfortunately Opera, Safari and IE don't.
Do you have any experience with this issue and know how to solve it?
It is not happening due to my reset.css, and I was able to reproduce the error in a simple fiddle. Just check it in the named browsers to see the difference.
FIDDLE
And here is the example code.
HTML:
<section class="wrapper">gets padding everywhere</section>
<main class="wrapper">gets no padding in the mentioned Browsers</main>
<section class="wrapper">gets padding everywhere</section>
CSS:
.wrapper {
padding: 8em 0;
}
Thank you!
It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about here
main.wrapper{
display: block;
}

CSS padding-top in IE7 working a little too well

I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?
Here is the CSS
.headerNav{
color:#000;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
Any help would appreciated, thanks in advanced.
Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.
In other browsers the padding is applying from the top of view port.
<div class="headerText"></div>
<div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->
<div class="headerNav"></div>
In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.
See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)

What is the least horrible way to center an element with CSS?

I have html that looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Some title thing, who knows</h1>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</header>
</body>
</html>
If I give header an auto margin and a width, it's horizontally centered. What's the least horrible way to ensure that it's vertically centered, as well?
I am aware of the following articles which provide some discussion of the topic:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
http://www.vanseodesign.com/css/vertical-centering/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.brunildo.org/test/vertmiddle.html
Since this question was tagged CSS3, here's a "least horrible" solution using CSS3's "flexbox". Unfortunately only recent versions of Safari, Chrome and Firefox support it.
html, body {
margin:0;
padding:0;
height:100%;
background:#eee;
}
header {
width:30em;
background:#fff;
}
body {
display:box;
box-pack:center;
box-align:center;
box-orient:horizontal;
}
A more complete demo can be found here.
If you do NOT know the height of the header the only way I often use, requires extra html if done properly, tough you could do without.
You make the header vertical-align: middle by making it a table-cell
html{
height: 100%;
}
body {
display: table;
height: 100%;
margin: 0 auto;
padding: 0;
}
header {
display: table-cell;
vertical-align: middle;
}
note that I set 100% height on the html node, which really isnt proper css as far as I know, it should be on the body and header should be in a encapsulating div wich has display: table http://jsfiddle.net/bgYPR/2/
Unfortunately, there's still nothing elegant for vertical alignment, only hacks.
I don't know if there's a best way, but there are a number of different ways (depending on your situation), and many are thoroughly discussed in this article.
Usually when I need vertical centering I use a pair of inline-block elements. You have one element that is the full height of the container, and a second element that is only the height of the content to be centered. Both are display:inline-block;vertical-align:middle.
I like to use b tags for this, because they have no semantic significance and are tiny:
<style>
.mycontainer {text-align:center;}
b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>
<div class="mycontainer">
<b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>
Mind you, this specific code example wont work in IE7 because of the lack of inline-block and sibling selectors (+), but the same technique can be done using more complex code that IE7 will handle.
I would generally not verticially center, but specify a small top margin like 20px. We don't always know enough about the end user's equipment to make an assumption about what is convenient or usable for the platform they are viewing the site on.

Resources