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
Related
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
So I have a submit button that is styled with the following css:
#search_submit {
width:150px;
font-size:1.5em;
}
In safari it look like this:
In firefox it looks like this:
I would like to get the font to display at 1.5em as it does in firefox, but I would like to maintain the rounded corners that are present in safari (which disappear in firefox, only when I add the font-size:1.5em
I read somewhere that its better to use em for cross browser support? is this not the case?
Using em for font-size is not necessarily 'better' for cross browser support. It's recommended because of its scalable nature, but it may not always have the consistency of using pixels (pixel perfect as they say...)
It generally isn't that difficult to get the buttons to look the same between firefox and safari. Without a link to see the page it's hard to say why yours are so different and my guess is you have other css styles on the page effecting your buttons.
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.
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.