Font family top and bottom Padding different in chrome and firefox - html

I am using 'Shruti' web fonts and they rendered differently in chrome and Firefox.
Added images are for textboxes and same things goes for other elements as well.I have already tried using padding in pixel/em but same thing again.
How to fix (vertical) font spacing problem in all browsers for consistency?

:-moz-placeholder { /* Firefox 18- */
line-height:10px;
}
::-moz-placeholder { /* Firefox 19+ */
line-height:10px;
}
:-ms-input-placeholder {
line-height:10px;
}
Try adding this to your css code, it will let you adjust the line height of the placeholder only for firefox to make it look like in chrome.
Change 10px for whatever you need.
About the other elements you should post an example with your code

Related

In my page heading and drop-down is showing different in chrome and Firefox even though CSS and HTML both are same for both browsers

I am having a page in which heading and drop-down both are inline but that page looks different in Chrome and Firefox even though HTML and CSS classes are same, there is no specific css or style used for a specific browser.
heading is not in center in chrome , but in Firefox heading is in the center and drop-down is in right without any space.
Following CSS
.h2 {
padding: 9px 7px;
margin: 0;
color: #2b6dd1;
background-color: #FFFFFF;
font-weight: 600;
font-size: 22px;
text-align: center;
margin-left: 25% !important;
}
I wants heading in center and drop down in right in both the browsers chrome as well as Firefox.
Please remember the I used searchable drop-down .
They are diferent web navigators so they dont read the code the same way, you must add some prefixes to make your code readable for all of them.
-webkit //chrome
-moz- //firefox
-o- //Opera
-mz- //Internet Explorer
The most common web navigator is google chrome, because it works better and has more functionalities (I´ve worked with Chrome and Edge and I recommend Chrome).
I leave you a link here to a web where u can learn more about this

Remove browser specific style

Browsers have added additional functionality/styling to input[type=number] in the form of up and down buttons.
I was able to remove this styling in Chrome since we're able to view the shadow DOM and figure out an element's corresponding identity.
However, Firefox is another story. Is anybody aware of any way to remove the up and down buttons on input[type=number] in Firefox?
I came across this post, but the extension wasn't sufficient.
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

AngularJS and text-angular: Change CSS style for input placeholder

On wiki page of text-angular github project, it says:
https://github.com/fraywing/textAngular/wiki/Styling-the-Editor
I tried with this code:
<div text-angular="text-angular" ta-toolbar="[]" ng-model="message"
placeholder="<div class='placeholder'>Write Coment...</div>"></div>
But the screen will show as:
placeholder show as raw html
I tried the following after taking a look at this website: https://css-tricks.com/almanac/selectors/p/placeholder/
::-webkit-input-placeholder { color: red; }
It still didn't work. How can I give custom styles to my input placeholder?
placeholders should be used with input elements and not on divs. You'd probably have to change your div tags to inputs.
You had the right idea about styling a placeholder, but you may need to adjust the vendor prefixes depending on your browser
Chrome, Safari, Opera, Edge): ::-webkit-input-placeholder
Firefox 4 through 18: :-moz-placeholder (Only one colon)
Firefox 19+: ::-moz-placeholder (two colons)
IE 10 and IE 11 :-ms-input-placeholder
/* Chrome, Safari, Opera and Edge */
::-webkit-input-placeholder { color: red; }
/* Firefox 4 through 18 */
:-moz-input-placeholder { color: red; }
/* Firefox 19+ */
::-moz-input-placeholder { color: red; }
/* IE10 and IE11 */
:-ms-input-placeholder { color: red; }
<input placeholder="Content here" />
Another thing you could try is to attach a contenteditable property to your div which will make it behave kind of like an input element. You can then set a data property to simulate the behavior of a placeholder.
Use the before pseudo selector which will target the div only when it's empty and not focused on.
[contenteditable=true]:empty:not(:focus):before{
content:attr(data-text);
color: red;
}
div {
border: 1px solid black;
}
<div contenteditable="true" data-text="Enter text here"></div>
I found a way myself.. To let the Answer part standing out to other similar questions, I choose to post answer here instead of editing original question.
Use .placeholder-text class. It's not a customized class but it's the temporary class used by text-angular when it is displaying placeholder.
.ta-bind {
&.placeholder-text {
color: red;
}
&:not(.placeholder-text) {
color: black;
}
}
( Example is in scss, remember to covert if you are using css)

On Edge Browser, how to change input placeholder text color using CSS?

On Edge Browser, I couldn't able to change input placeholder color.
:-ms-input-placeholder is not working but works fine on IE 10 & IE 11.
input:-ms-input-placeholder {
font-style:italic;
color: red;
background-color: yellow;
}
is there anyway to make it work using CSS?
From CanIUse.com
::-webkit-input-placeholder for (Chrome/Safari/Opera)
:-ms-input-placeholder for IE.
::-ms-input-placeholder for Edge (also supports webkit prefix)
Note the double colon syntax
I want to second #ken's comment on #Paulie_D's answer, above.
This works:
input[type="text"]::-ms-input-placeholder { color: #000; }
This doesn't:
input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder { color: #000; }
I'm not sure why, but it definitely appears that the -ms-input-placeholder pseudo-element only works if it's separate from other directives.
For the current version of the Microsoft Edge browser, placeholder doesn't work correctly. Take a look this issue Microsoft Edge placeholder bug. If placeholder is invisible, try to remove position: relative and :-webkit-input-placeholder opacity.

CSS3 columns: a better way to add column break

There is a content that is spread across several columns using CSS3 columns that work quite well in Firefox and Webkit, Opeara.
The problem is that column breaks with css are implemented only in webkit (webkit-column-break-before) and not in other browsers.
What would be the better way to implement the breaks.
The height of the column is fixed.
I can think of adding block element with height equal height of the column.
Would be grateful for ideas.
Thanks.
Without seeing any code or what you are working on, perhaps the column-count, column-gap and the column-rule properties might work.
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
If this is related specifically to the breaks and not the columns, have a look at using
break-inside: avoid-column; and -webkit-column-break-inside: avoid; or use display: inline-block; on child elements, preventing them being split between columns.