The Firefox line-height bug is a pain. In short, it prevents the manual setting of line-height on button elements through a browser style line-height: normal !important declaration that can't be reversed.
Now this is a huge pain, and in an era where hacking around browser-specific quirks is fortunately becoming decreasingly necessary, I'd hate to have to make an exception for Firefox of all browsers.
So my question now is whether there's anything I can do about it since the concession that the above article made that it was basically impossible.
Here's a fiddle to play around with: http://jsfiddle.net/hBLQ7/
Open in Firefox and Chrome and observe the difference.
So is there anything we can do in this day and age?
Can you just set the height of the button, if that's what you're after?
What about hacking it with top and bottom padding ?
CSS
button {
padding: 25px 0;
}
Example
jsFiddle.
When testing your fiddle in firefox 9, your button actually renders with the same height as the span. Using inputs of type button/submit gives the problem you describe, however: Fiddle
I still haven't found a viable way around that issue..
One of the related bug reports is here.
Related
I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.
Here it's a screenshot (Firefox, Safari and Opera, in this order):
And here the code: http://jsfiddle.net/TMUnS/2/
I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):
And here the code: http://jsfiddle.net/TMUnS/4/.
How could I fix this?
Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
padding:0;
border:0;
}
That might be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/
This is a feature set in Firefox which limits the line-height of buttons. It sets a default line height for buttons - http://www.cssnewbie.com/input-button-line-height-bug/. I would try using a fixed height for the buttons and playing around with the padding.
Are you using a CSS-Reset ?
A CSS-Reset normalizes the CSS for the Browsers.
Try this YUI reset:
YUI CSS RESET
Here's a screenshot of the website I'm coding in 4 browsers: http://img801.imageshack.us/img801/2510/browsersj.jpg
There are CSS3 columns (in IE, there's a jQuery plugin simulating the CSS3 columns behaviour). As you can see, Opera and Firefox render the first column slightly lowered in relation to the other columns. This is the first paragraph's margin. Chrome ignores the first paragraph's margin and aligns everything correctly.
I have found that this CSS rule helps to eliminate the issue:
.column-3 > *:first-child { margin-top: 0; }
Still, I find this a bit hacky (what if I WANT the first element to retain the margin in some specific scenario?). Do you happen to know of any other solutions to this problem (preferably something clean and reliable, sort of like the box-sizing property taking care of different default box models in different browsers)?
[EDIT]
Alright, I have found that in Firefox, the issue was an overflow:hidden; set on the container div. Removing it solved the issue.
Still, Opera won't cooperate.
As per #Kyle's request, here's the code to reproduce the issue in Opera: http://jsfiddle.net/LVqtD/1/
not sure if it's still actual, but i did some reading and doctype might be the reason.
http://www.opera.com/docs/specs/presto28/doctypes/
just sayin'
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.
A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.
The site in question is:
http://208.43.52.30
The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..
I'll attach some screenshots
IE 8:
IE 7:
I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.
Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.
The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.
http://jsfiddle.net/znRxq/
Same solution for the show button.
IE7 might be making your input larger (from experience), you should set a different width for IE7.
First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...
Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:
.inline-element {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
On this page in Internet Explorer 6 and 7 on XP and Vista there is a bug where scrolling the page seems to lose bits of the left and right borders. Has anyone seen this behaviour before, and does anyone have any ideas to avoid it?
Edit: This is fixed now. If anyone would like to see what the problem was, find the following line and disable it in Firebug:
zoom:1; /*for hasLayout*/
You can often deal with this bug by applying position:relative to the elements in question. height:1% can also help. Another typical "black-magic" solution to dealing with IE6 and has to do with hasLayout. See http://www.satzansatz.de/cssd/onhavinglayout.html for more information.
If giving it hasLayout doesn't solve your particular issue, then you will definitely want to make sure that there is no contained element with a background of #fff that is expanding past the bounds of the containing element (likely due to IE6's way of handling padding and width).