I search for a long and I can't find an answer :/
In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.
Any suggestion?
HTML
<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>
CSS
.red{
background: red;
/* All this contain margins */
float:left;
/* padding-top:1px; */
/* display: inline-block */
/* overflow: hidden */
}
.blue{
background: blue;
min-height: 60px;
}
h1{
margin: 10px 0 20px;
background: green;
}
Gecko-based: [This one is the correct, I guess]
Webkit-based, KHTML-based and Trident shell:
CODEPEN
http://codepen.io/marquex/pen/fzsIk
The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.
I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.
Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.
As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:
h1{
margin: 10px 0 20px;
background: green;
font-family: "Your-favorite-font", Times, sans-serif;
font-size: 2em;
}
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
Although I'm not new to the idea of responsive design I have experienced a very troublesome thing...
I have decided to completely move to rem units, but I still follow 62.5% rule (I have used it with em).
So for starters:
html {
font-size: 62.5%;
}
I assume that 1rem = 10px (I know it's not always true, but hey, it's for me to ease math a little bit, for browser it's still relative right?)
Horror starts in Opera (12.12 both linux and win version, where default font-size is set to 14px and 16px respectively).
header nav ul li a span {
padding: 1.8rem 2.7rem 3rem 0;
font-family: 'sawasdeebold', sans-serif;
font-size: 2rem;
line-height: 3rem;
letter-spacing: -0.3rem;
display: block;
}
As You can see part of my navigation is let's say "pixel perfect" thanks to using rem units. Under linux page is a little bit narrower (that's no problem the font is smaller so 1rem represents less pixels). However everything in nav scales badly if default size is changed to something else than 14px... Under Windows the same is true for 16px... The whole scaling idea just doesn't work. I don't need every pixel to match, but it looks ugly...
The similar problem appears under IE9, but this time is the logotype where:
header h1 a {
margin: 1.8rem 0 0 1.6rem;
width: 46.2rem;
height: 10.1rem;
background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
background-size: 46.2rem 20.2rem;
text-indent: -5000px;
display: block;
}
header h1 a:hover {
background-position: 0 -10.1rem;
}
Even though I set logotype's height and the exact size for its background, on hover, the background is positioned 1px too low...
Aside of these problems I have one, general question.
Is it POSSIBLE to create "pixel perfect" layouts with rem units?
I haven't even touched media queries yet and I want to know if it's worth my effort...
BIG THANKS guys!
So... I have switched back to em untits. Except few (minor) glitches in IE9 (which are well known subpixel problems) everything is perfect in ALL browsers. Moreover, as before rem issue, I have no problem with media queries which also use em units. Sadly, it seems that rem units are not yet stable enough to use them across existing web browsers. Case closed...
If you're wishing to continue use 1rem = 10px have you tried –
html {
font-size: 10px;
}
instead of
html {
font-size: 62.5%;
}
does this solve the issue?
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.
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.
The position of the text on the search submit button on my blog is very low in Firefox 4, but not Chrome 10 or IE9. I've tried almost everything, and nothing works except lowering the font size of the text, which isn't an optimal solution as the text will be too small.
Screenshots
Firefox 4 on Windows 7:
Google Chrome 10.0.648.204 on Windows 7:
The relevant HTML:
<form method="get" class="searchform" action="http://eligrey.com/blog">
<input type="search" placeholder="search" name="s" />
<input type="submit" value="🔍" title="Search" />
</form>
The relevant CSS rule (from http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css):
.searchform input[type="submit"] {
font-family: "rfhb-lpmg";
color: #ccc;
font-size: 3em;
background-color: #959595;
text-align: center;
border: 1px solid #888;
height: 34px;
width: 42px;
line-height: 34px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition-property: border, background-color, box-shadow;
-webkit-transition-duration: 0.2s;
-moz-transition-property: border, background-color, box-shadow;
-moz-transition-duration: 0.2s;
}
rfhb-lpmg is just a custom font I made which implements U+2767 rotated floral heart bullet and U+1F50E right-pointing magnifying glass with simplistic glyphs.
I've deduced that the main trouble is the line-height property.
Both browsers attempt to vertically center all text on buttons. In combination with the height property, however, if there is not enough room to render the full standard line-height (glyph padding grows quite large with large font sizes), both browsers will pin the glyph to the top of the button, trimming the bottom.
Normally, the line-height would help adjust this, and in Chrome, in your example, this was successful. However, in the case of button and input type="submit" elements, Firefox ignores line-height altogether, so it can't be used in this way to "fix" the positioning of the character. Using the extreme example below, we can see that the text has been pushed out of visbility in Chrome, while it still stays right in the (vertical) center in Firefox.
<!doctype html>
<html>
<body>
<style type="text/css">
input {
border:1px solid black;
line-height:1000px;
height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>
Firefox:
Chrome:
When a button element is left to the native style (remove the border), line-height is ignored by both browsers (weirdly, Chrome also ignores the height but Firefox does not). As soon as the button is custom-styled, Chrome picks up the line-height but Firefox does not.
So what can you do?
If you still want to make use of CSS fonts...
First of all, make sure your font renders the glyphs in the same vertical-alignment that a standard font displays a basic full-height character, like H. (It appears you've done this for the most part, since your page looks significantly better than the screenshots in the question.)
Second, you'll notice that if you use a font like Arial, and display an H (at the same font size), it's also low. This is because the built in standard line-height of the font gives it quite a bit of room above the character. This indicates that you may have some success if you can edit the font to trim this, thereby giving the character enough room to not be trimmed at the bottom by the browser.
Probably less ideal to you, but still an option, you can use other elements, either in combination with or in place of the button/submit element, to get the character into place.
Alternative option
I'm not sure what your goal is in using CSS fonts, but often it is for some form of progressive enhancement/graceful degradation. In this case, although (as you said in the comments) the special character is a standardized Unicode "right-pointing magnifying glass", it still will not have any meaning to the user if it doesn't render.
Given that the benefit of graceful degradation is to allow simpler technologies to display your website without appearing broken, the use of this character seems suspect — without CSS fonts or a native font with this character, it will render as 🔍 a ?, or simply a blank box.
A better option for graceful degradation, given this problem, would be to simply use a background-image. Make the text of the button "Search", hide the text (through CSS), and apply the background image, and then you have actual graceful degradation, and a fancy character for better browsers.
A background image could also (obviously dependent on the files themselves) have other benefits, such as faster load and render times (for instance, if a developer wanted to use a single character from a full-character-set font).
FF4 sets it's own styles on input elements. You can check all of them if you paste this in your URL field:
resource://gre-resources/forms.css
Alternatively you can see this styles if you check Show user agent CSS from Style tab dropdown if you have Firebug instaled.
Check solution here: How to reset default button style in Firefox 4 +
I came to the same conclusion as Renesis, though I wasn't sure whether Firefox wasn't respecting line-height or vertical-align. Here is the outline to a different solution that allows you to continue to use your fancy glyph. Since you are using pixel-sizes for your button, try something along these lines (simplified html). This might be overkill, and a background-image would almost certainly be more appropriate, but anyway.
The simplified html:
<div class="searchform">
<input type="search" placeholder="search" name="s" />
<span><input type="submit" value="🔍" title="Search" /></span>
</div>
And the simplified css:
// hide the border and background for the submit button
.searchform input[type="submit"] {
border: none;
background: transparent;
}
// give the span the properties that the submit button has now
span {
position: relative;
width: 30px; // or whatever
height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
position: absolute;
margin-top: -15px; // half the span height
margin-left: -15px; // half the span width
top: 50%;
left: 50%;
bottom: 0;
right: 0;
}
I had been facing a similar problem when using CSS inside buttons. The text was offset by 1 pixel in firefox, and rest of the browsers it was just fine. I used "padding" property specific to Firefox, in the following way
The original code in which the input button's text was one pixel lower in Firefox
.mybutton {
height:32px; background-color:green;
font-size:14px; color:white; font-weight:bold;
border:0px; -moz-border-radius:16px; border-radius:16px;
}
and after adding the Firefox specific padding after the above css, it was perfect in Firefox
#-moz-document url-prefix() {
.mybutton { padding-bottom:1px; }
}
In your case, may be you need a bit more padding-bottom, and probably padding-top in negative too (-1px or -2px).
I came across this when I was looking for a solution to this problem, but since I never really found anything other than a hint at changing the padding bottom I wanted to share that I found adjusting the padding-bottom for just firefox worked great.
Every other browser allowed for enough line-height control to adjust the text positioning.
/* This gets picked up in firefox only to adjust the text into the middle */
#-moz-document url-prefix() {
input[type="button"],
input[type="submit"],
button.btn {
padding-bottom: 6px;
}
}
I had something like this happen earlier this week - I found out that you have to apply certain ccs elements to the 'parent' element instead of the 'child'. So basically try some of the css like vertical-align: in the .searchform div.
Meanwhile, I'm having trouble with my search icon at smartemini.com. It works in aaaaallllll browsers except ie9. :(
I ran into the same.
I was able to solve my issues, pushing padding from the bottom (!)
padding: 0 0 2px 0; /* total height: 36px */
height: 34px;
or, in a bigger picture, if you fancy consistent input['..'] and anchor button, use distinct overriding tweaking for the latter for full control.
/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL {
display: block;
font-size: 14px;
line-height: 14px; /* just a precaution, likely ignored in FF */
padding: 0 0 2px 0; /* total height: 36px */
height: 34px;
...
}
/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL {
padding: 12px 0 0 0; /* total height: 36px */
height: 24px;
}
(the 'T-shirt-sizes' lead to different background-offsets and widths elsewhere)
What you're seeing here is how differently browsers render text inside button elements when space is tight. Chrome centers the test vertically, while Firefox top-aligns it.
On top of that, you're using a home-made font, that might have some latent issues when it comes to vertical-height/leading/etc.
I note that when I add any other character to the input's value - the magnifying glass drops down even further in Firefox. This suggests that tweaking the font somehow (like vertical-position, or cropping away top/bottom white-space) might help.
If that fails you should change your <input type="submit"/> into a <button type="search" title="Tooltip">Label</button> element, and see if styling the button is any easier than styling the input.
If the problem still remains, you'll need to switch tactics and wrap your button in a <div class="btnwrap" />.
.searchform .btnwrap {
display: inline-block;
overflow: hidden;
height: 32px;
border: 1px solid #888;
/* plus the border-radius styles */
}
.searchform button {
/* all the original button styles, except the border */
height: 50px;
margin: -9px 0; /* (32-50)/2 = -9 */
}
(BTW, You can alternatively inner-wrap button text in a <span/> and do similar negative-margin hack to that, although I suspect that getting the vertical-centering is easier with the button inside adiv.)
That said, you really should just use a good old fashioned background image replacement - it will both render and load faster. :-)
Good luck!
This problem only happens on Firefox 4/Win7 with DirectWrite enabled render mode (which is enabled by default). Firefor4 GDI render mode is working properly.
It might caused by the vertical-align attribute is baseline. But the baseline of U1F50D sin't on the lowest point. Maybe you should try to move the font points a little higher, set the lowest point's y point to 0.
lots of anwsers here... i think this is the simplest way to do this :
.searchform input[type="submit"]
{
height: 35px;
line-height: 35px;
font-size: 2em;
}
Hope this helps =D
I have found that a combination of padding and line-height does the trick. As stated Firefox ignores line-height.
Make sure you set a larger bottom padding than top padding. Fiddle around with it a bit and you will be able to vertically align the text in Firefox.
You will then see that this pushes the text too close to the top of the element in Webkit. Now use a large line-height to align it properly in Webkit and voila!
I have tested this on a Windows 7 machine running Firefox 7, Chrome 16, Safari 5.1 and IE9.