there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}
Related
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
I'm trying to use css3's :first-letter to create drop caps effect, but Firefox does not render it the same way as Chrome and IE10 do. Here is jsfiddle in which you can see the 2nd "P" is cut off at top and bottom in Firefox.
http://jsfiddle.net/0256dxdb/18/
Is this a bug in Firefox? Below is my css:
p.test1 span,
p.test2:first-letter {
float: left;
font-family: arial, serif;
font-size: 70px;
line-height: 70px;
margin: 10px;
background:red;
}
if Chrome is look like this:
.text-center {
text-align: -webkit-center;
}
and firefox:
.text-center {
text-align: -moz-center;
}
how about in opera?
.text-center {
text-align: -o-center;
}
is not working.
UPDATE:
HTML:
.container
.text-center.label-margin
%h3
.bubble LEADERSHIP
CSS of my bubble class.
.bubble {
position: relative;
width: 170px;
height: 45px;
padding: 11px 0 0 0 !important;
background-color: #333333 !important;
font-style: normal !important;
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
font-weight: 600;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
it looks like in OPera
You do not need to prefix the text-align property. You can simply use:
text-align:center;
instead (which should work on all browsers).
Further Reading:
W3.org documentation on the text-align property.
Here's quite a nice CSS-Tricks article that you might find useful.
If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.
Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.
Try like this: Demo
.center{
text-align-center;
}
No need to use specifically for all the browsers,as its almost accepted by all browser
When I go to http://128.199.58.229/landingpage/ in Chrome and Safari I can read the placeholder text and see the text I input.
In Firefox I don't see any input text.
When I change the padding..
.form-control {
color: #A1A1A1;
font-size: 16px;
padding: 0;
}
I can see the text.. but of course the padding is terrible now. Any fix for this?
Thanks
Change the .form-control to box-sizing: content-box and provide a smaller padding value.
Like this:
.form-control {
color: #A1A1A1;
font-size: 16px;
padding: 10px;
box-sizing: content-box;
}
Currently, the box-sizing: border-box property is combining the padding with the height and creating unexpected results in Firefox.
box-sizing is explained nicely over here on CSS Tricks
Instead of disturbing padding change the height to 54px
.form-control {
color: #A1A1A1;
font-size: 16px;
height: 54px;
}
Problem was height,Your padding is too much
CSS
.form-control
{
height:100%;
padding: 10px;
}
Why height in Chrome is bigger than Firefox of input
See example here http://jsfiddle.net/jitendravyas/89Msh/1/
select, input, textarea, button {
font: 99% sans-serif;
}
input, select {
vertical-align: middle;
}
body, select, input, textarea {
color: #444444;
}
button, input, select, textarea {
margin: 0;
}
input, textarea {
font-family: inherit;
line-height: 1.5;
}
input {
border: 0 none;
font-size: 32px;
line-height: 1.1;
margin-right: 29px;
padding: 3px 3px 0;
width: 206px;
border-radius: 7px;
}
The problem is essentially line-height.
Chrome sees line-height much like it sees height and Firefox doesn't.
Adding height to the input should solve the problem, though you should be careful that your line-height and height match.
For example: height: 20px; line-height: 20px;.
http://jsfiddle.net/e2agj/1/ - Last example input is the correct one.
Simply try overflow:hidden on input
I usually use padding instead of height to push the total height of the input. Doing so, I do not have to fight around with the different interpretations of Chrome and Firefox.
I had the same problem and had to combine line-height AND padding to make things work.
I think it has to do with the way you styled the font for the input.
select, input, textarea, button {
font: 99% sans-serif;
}
Each browser has its own rendering for sans-serif, as that is really not a font.
Therefore, without a specific font set, you could expect some inconsistencies.
This should work in Chrome & Firefox on select elements:
height: 20px;
padding: 0;
I had gone throught same input line-height problem across Firefox , Chrome & Opera browsers. So I combined line-height , height and font-size for the appropriate look.
input {
line-height: 45px;
height: 45px;
font-size: 45px;
}