Whenever I am making something like a box with text inside, eg. a button, I notice that I can never get the text to be perfectly centered in Firefox, although it does work perfectly in Chrome. I have tried multiple different fonts, using different CSS resets and methods of centering, but it seems to be that in Firefox text just isn't actually centered inside its own content box.
Firefox: firefox demo
Chrome: chrome demo
CSS:
span {
background-color: black;
color: white;
font-size: 48px;
}
Does anyone know why this might be the case, and if anything can be done to fix it?
Thanks
Edit: jsfiddle link to test https://jsfiddle.net/b4zwLgck/1/
I have found that this is a bug specific to Firefox for MacOS, in which the text content box does not leave space above the text for diacritics, contrary to basically every other browser. I found a bug report on bugzilla that is over 14 years old(!) describing this problem, with the latest comment confirming it to still exist as of four months ago. I have submitted a new bug report, so hopefully this gets fixed.
Related
I rarely run into these kind of differences between WebKit & Gecko but it is critical to my client. I am not able to adjust the placeholder word "SEARCH" in the search field at the top right of this site. In Firefox it sits where I want it but in Chrome/Safari it is shifted down. How can I correct this so that it is consistent between browsers?
http://splitlightdesigns.com/megatel/
Many thanks,
Houston
Like chris mentionned in the comments section, line-height: is what you're looking for.
I tried it in both chrome and firefox, and a line-height of 26px fixed the problem. You have to apply it to the input type text. (you can also try it by opening your browser's console and type the new property in the element.style {} section.)
I'm having some issues on my Shopify site getting the input selector dropdown to display properly in Firefox. The field shows and is clickable but doesn't fill with text. Works fine in Safari, Chrome, and IE.
Any idea what might be causing this?
http://stillmotionstore.com/products/storytelling-workshop-basic
Yes!
It fills with text, but the text isn't visible.
Your CSS says the following:
height: 24px;
padding: 1.384615385em 0.615384615em;
That's why there's no place for the text anymore .
Solutions
Increase the height
Remove the top/bottom padding
Use box-sizing: border-box so that the padding is added to the height
Try to debug such problems with the Web Developer Tools in the future (available in all browsers), and you'll find this bugs immediately!
I was looking at a friends website and noticed most of the text has the bottom cut off but only when viewing in chrome. I poked around in the css but couldn't seem to find the issue.
Can anyone help me out?
The site is http://www.customcasez.com/
The same issue exists here, Bubbler+One font (at least for me in chrome).
here is an image about how it looks at my place.
So, I guess the issue is not with your website but with the font itself.
Try replacing the font-family with some similar font or try to download it from another source
I've had the same issue. Text in input box looked fine in Firefox however it was cut off from bottom in Chrome.
Check with padding of the input box, it is smartly managed in Firefox but not in Chrome!
I gave padding as padding:0px 6px; (or whatever you intend to give!)
I've been trying to format the appearance of the RSS button in css, and for some reason there's a big difference between browsers. Chrome renders it perfectly, as if I don't need to mess with it at all. But on Firefox and IE9, it is uneven with the rest of the menu. So I added padding to even it out, and to elongate the hover colour to the bottom of the menu bar. That fixes the issue on Firefox, but it makes the menu uneven in the opposite way on Chrome. Suddenly the bar is too long for the other menu items.
.menunav a {
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;
}
.menunav-rss:hover {
background: #ff6600;
font-size: 100%;
padding-top: 3px;
padding-bottom:3px;
}
This is coming from a wordpress site. I'm quite new to css or coding, so I'm not entirely sure how to amend this. Fixing one seems to make the other worse, and I'm not sure why only the rss button is uneven.
For reference, this is what the menubar appears without any padding on both Firefox and Chrome.
Any help would be appreciated. If you need more information, I can easily give it.
Its due to browsers having different "preset" values. Think of it as each browser having their own stylesheet that gets applied before yours.
The only workaround really is to use a CSS reset. Eric Mayers is considered to be the 'goto' one, and covers pretty much everything you'd want it to.
Simply load the reset before your own styles, and then you should be able to adjust everything to look more or less the same across all browsers.
It's a bit of a pain to have to do it, but you shouldnt really rely on the browser's built in default styling.
I've run into the same issue multiple times. I've found that setting vertical-align: top makes it look the same in both FF and chrome (probably IE9 as well, although I haven't tested that), after which you can add padding-top to position the text within the anchor exactly where you want it.
I want to create a search bar like one in this page http://dl.dropbox.com/u/333492/search/form.html
If you load that page with chrome, opera or safari, the search bar looks like it should (tested on mac). However, if you use firefox (tested at least with ff 3.5 and 3.6 on mac), you'll see that one extra pixel gets added on top of the text field, and thus the text field is one pixel lower than the button, which looks ugly.
I tried to remove all possible borders and paddings but the problem persists. I also noticed that it doesn't occur when the search button is not there.
Does someone have any idea on what might be causing this behavior? Or, even better, could someone alter the CSS on that page so that the problem would be fixed?
I finally found a blog post that explains the cause of the problem and proposes an answer that partially fixes the situation. Thanks #anttisykari in Twitter!
http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari
So the correct answer is to add following lines to the CSS:
input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/
input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */
However, IE8 still broke my form, so I had to add these to both input elements.
display: block;
position: relative;
float: left;
Now everything seems to be ok.