I am using Persian language and I have developed two ways to display my button in Bootstrap 3.3.6:
For the upper I have used this code:
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary"> <h4><font face="B Nazanin">
خواندن اطلاعات چهره
</font></h4></button>
</div>
And for the lower I have used this code:
//--------in the CSS-------
#font-face{
font-family: myFirstFont;
src: url("../myFonts/BNAZANIN.TTF");
}
.myButton{
font-family: myFirstFont;
font-size: large;
font-weight: bold;
}
//---------in the HTML-------
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary myButton">
خواندن اطلاعات چهره
</button>
</div>
However, as you see in the picture when I use CSS the result has not a good sharpening. I mean border of the text is not clear, if you look closely you see that the text of the button is slightly blurred.
I have found that even though we use a myButton class without any styles, and instead we set inline styles like the upper code, it still remains blurred!!!
Ensure text-shadow: none is set.
Please try this css
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
I just encountered this issue.
This issue comes from not having a bold font available for the font you have embedded. You need to include the bold version of the font or the browser will try to render the bold version of the font badly.
It is because you have
overflow-x hidden
;) That's how I fixed it!
I found the solution by turning off in the chrome checkboxes the style panel at my element submit button and the styles aplied to the button too from other parent elements.
I tried to style a fieldset element with display: flex and display: inline-flex.
However, it didn't work: flex behaved like block, and inline-flex behaved like inline-block.
This happens both on Firefox and Chrome, but strangely it works on IE.
Is it a bug? I couldn't find that fieldset should have any special behavior, neither in HTML5 nor in CSS Flexible Box Layout specs.
fieldset, div {
display: flex;
border: 1px solid;
}
<fieldset>
<p>foo</p>
<p>bar</p>
</fieldset>
<div>
<p>foo</p>
<p>bar</p>
</div>
According to Bug 984869 - display: flex doesn't work for button elements,
<button> is not implementable (by browsers) in pure CSS, so they are a
bit of a black box, from the perspective of CSS. This means that they
don't necessarily react in the same way that e.g. a <div> would.
This isn't specific to flexbox -- e.g. we don't render scrollbars if
you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.
Stepping back even further, this isn't specific to <button>. Consider
<fieldset> and <table> which also have special rendering behavior:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
In these cases, Chrome agrees with us and disregards the flex
display mode. (as revealed by the fact that "abc" and "def" end up
being stacked vertically). The fact that they happen to do what you're
expecting on <button style="display:flex"> is likely just due to an
implementation detail.
In Gecko's button implementation, we hardcode <button> (and
<fieldset>, and <table>) as having a specific frame class (and hence,
a specific way of laying out the child elements), regardless of the
display property.
If you want to reliably have the children reliably arranged in a
particular layout mode in a cross-browser fashion, your best bet is to
use a wrapper-div inside the button, just as you would need to inside
of a <table> or a <fieldset>.
Therefore, that bug was marked as "resolved invalid".
There is also Bug 1047590 - display: flex; doesn't work in <fieldset>, currently "unconfirmed".
Good news: Firefox 46+ implements Flexbox for <fieldset>. See bug 1230207.
I find out this might be a bug on Chrome and Firefox where legend and fieldset are replaced elements.
Bugs Reported:
Bug Chrome (fixed since v86)
Bug Firefox (fixed since v46)
A possible Workaround:
A possible workaround would be using <div role="group"> in HTML, and applying in CSS div[role='group'] as selector.
UPDATE
In Chrome version 83 button can work with the display: inline-grid/grid/inline-flex/flex, you can see the demo below:
button {
display: inline-flex;
height: 2rem;
align-items: flex-end;
width: 4rem;
-webkit-appearance: none;
justify-content: flex-end;
}
<!--
The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set.
-->
<button>Hi</button>
<input type="button" value="Hi">
Please star the Chrome bug to increase bug priority
This is a bug in Chrome. Please add a star to this issue to increase it's priority to be fixed:
https://bugs.chromium.org/p/chromium/issues/detail?id=375693
In the mean time, I created these three Code Pen examples to show how to work around the issue. They are built using CSS Grid for the examples but the same techniques can be used for flexbox.
Using aria-labelledby instead of legend
This is the more propper way to deal with the problem. The downside is that you have to deal with generating unique IDs applied to every fake legend element.
https://codepen.io/daniel-tonon/pen/vaaGzZ
<style>
.flex-container {
display: flex;
}
</style>
<fieldset aria-labelledby="fake-legend">
<div class="flex-container">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
</fieldset>
Using role="group" and aria-labelledby instead of fieldset and legend
If you need the flex-container to be able to stretch to the height of a sibling element and then also pass that stretch onto its children, you will need to use role="group" instead of <fieldset>
https://codepen.io/daniel-tonon/pen/BayRjGz
<style>
.flex-container {
display: flex;
}
</style>
<div role="group" class="flex-container" aria-labelledby="fake-legend">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
Creating a fake duplicate legend for styling purposes
This is a far more hacky way to do it. It is still just as accessible but you don't have to deal with IDs when doing it this way. The main down side is that there is going to be duplicate content between the real legend element and the fake legend element.
https://codepen.io/daniel-tonon/pen/zLLqjY
<style>
.screen-reader-only {
position: absolute;
opacity: 0;
pointer-events: none;
}
.flex-container {
display: flex;
}
</style>
<fieldset>
<legend class="screen-reader-only">
I am a real screen-reader accessible legend element
</legend>
<div class="flex-container">
<div class="flex-child" aria-hidden="true">
I am a fake legend purely for styling purposes
</div>
...
</div>
</fieldset>
Legend MUST be a direct decendent
When you are first trying to fix this yourself, you will probably try doing this:
<!-- DO NOT DO THIS! -->
<fieldset>
<div class="flex-container">
<legend class="flex-child">
Broken semantics legend text
</legend>
...
</div>
</fieldset>
You will discover it works, and then you will probably move on without giving it a second thought.
The problem is that putting a div wrapper between the fieldset and the legend breaks the relationship between the two elements. This breaks the semantics of fieldset/legend.
So by doing this, you have defeated the whole purpose of using fieldset/legend in the first place.
Also, there isn't much point in using a fieldset if you don't give that fieldset a legend.
In my experience, I've found that neither <fieldset>, nor <button>, nor <textarea> can properly use display:flex or inherited properties.
As others have already mentioned, bugs have been reported. If you want to use flexbox to control ordering (e.g. order:2), then you'd need to wrap the element in a div. If you want flexbox to control actual layout and dimensions, then you may want to consider using a div, instead of the input control (Which stinks, I know).
<div role="group">
<p>foo</p>
<p>bar</p>
</div>
<div>
<p>foo</p>
<p>bar</p>
</div>
Might need to use role-group because firefox, chrome and i think safari have a bug with fieldsets apparently. Then the selector in the CSS would simply be
div[role='group'], div {
display: flex;
border: 1px solid;
}
Edit: Here are some issues that other people are experiencing as well.
Issue 375693
Issue 262679
you can put additional div in <fieldset> with the following props:
flex-inner-wrapper {
display: inherit;
flex-flow: inherit;
justify-content: inherit;
align-items: inherit;
}
To answer the original question: yes, it is a bug, but it wasn't well-defined at the time the question was asked.
Now the rendering for fieldset is better defined: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
In Firefox and Safari, flexbox on fieldset now works. It doesn't yet in Chromium. (See https://bugs.chromium.org/p/chromium/issues/detail?id=375693 )
Also see https://blog.whatwg.org/the-state-of-fieldset-interoperability for improvements made in the specification in 2018.
I have a P element with style which I can't change.
I want to enclose it with a DIV to enforce a new font-size.
Why does the inner P ignore the div font-size?
Example:
<html>
<head>
<style>
.para1 { font-size:small; }
</style>
</head>
<div style="font-size:300% !important">
<p class="para1">I must have been asleep, for certainly if I had been fully awake I must have noticed the approach to such a remarkable place. In the gloom the courtyard looked of considerable size, and as several dark ways led from it under great round arches it perhaps seemed bigger than it really is. I have not yet been able to see it by daylight.</p>
</div>
</html>
You can set a class to the wrapping div, like I did here:
http://jsfiddle.net/3Zvrg/
HTML:
<div class="out_of_para1">
<p class="para1">
CSS:
.out_of_para1 p {font-size: 300%;}
EDIT: based on last comment from OP
I know you cant change the class but why cant you do this.
<div style="font-size:300% !important">
<p>I must have been asleep</p>
</div>
and not associate your "p" with any class??
Styles are only inherited if the value of the property is inherit. On the paragraph, the value of the property is small. Thus the font size of the div is 300% but the font size of the paragraph is small.
You have to explicitly set the font size on the paragraph element.
You could do this with a descendent selector in the stylesheet:
div .para1 {
font-size: 300%;
}
I am working round a custom CMS called phpVMS. In this, there is a bubble box that displays when clicked on an icon on the map. However, the text align seems to be centered instead of going to left? I've linked a picture:
The code that I am using for the bubble span is:
<span style="font-size: 9px; text-align: left; width: 100%;">
<strong>Pilot In Command: </strong> <%=flight.pilotname%><br />
... so on.
</span>
I've tried to look where text could be centered, but cannot find anything sadly in the css or the html. I have also noticed that width and font size work, but text-align is ignored. I hope you can help me.
Thanks and regards
You can't use text-align within a span as it is not a block-type element. Try replacing your <span> with a <div> of the same parameters.
I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type='text/css'>
</style>
</head>
<body>
<button style='height:100px;width:100px;position:relative;'>
<span style='position:absolute;top:0;left:0;'>text</span>
</button>
</body>
</html>
<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).
Replacing <button> with <div> does places <span> at the top-left corner.
Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?
Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.
EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).
I advice against using a <button> this way. It is really difficult to style and you'll end up having to write specific styles for different browsers.
I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:
<div class="button">
<span>
<button>Text</button>
</span>
</div>
With the button tag reset this way:
button {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
margin:0;
overflow:visible;
padding:0;
position:relative;
}
You can even use js to wrap the <button> on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.
Update:
As I commented below, the wrapping element should not be an <a> tag. Remember that we need the <button> to keeps its functionality, we just need it to be text only (form will still submit on enter).
You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a <div> instead of an <a>.
Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
That will do it for Firefox hopefully. Good luck!