Firefox cuts text off in ::after element - html

i have got several ::after elements with text. Firefox is cutting off some letters - but not in a line (see picture). I wanted to find the mistake, but when I open the developer tools the text is rendered correctly. I do not understand this. in safari and chrome everything is fine...
Missing:
Not missing:
Here is the after-Elements CSS-Code:
font-size: 15px;
hyphens: none;
padding: 10px;
display: inline-block;
line-height: 1.3em;

I figured out the mistake. It was a mistake in the font-family, not an issue in firefox. curious thing for me: after opening developer tools it seems to render or load again and so the text was rigth displayed.

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

Dreamweaver different display than Firefox

I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.

How to make text clip inside navbar?

I am trying to make a website and i want to clip(mask) text from navbar. The text becomes like a hole in the navbar and background image is seen through it. How to do this?
JSFIDDLE
//css code
text{
background-image: inherit;
color: transparent;
font-size: 20px;
top: 0px;
position: relative;
margin-top: 10px;
padding: 0px;
}
There's a CSS property called background-clip that seems to do do what you're looking for. It's is unfortunatly not supported before IE9 (but works on other main broswers : Chrome, FF, Opera, Safari).
Depending on the importance of this implementation you can always have a different rendering for older IE versions and use background-clip in any other context.
See this Fiddle and comment to tell me if it's what you were looking for!
EDIT : I misunderstood the initial request. I'll try to find a suitable solution for the actual question! Sorry about that.

CSS not working in Safari - OK in Chrome, Firefox

My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

How so I set an inline span to have the same height when containg text in both Chrome and Firefox?

I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.