Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}
Related
I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I'm having an issue with inconsistency with inputs in chrome.
I'm using a big font-size, but setting the height and line-height to smaller to remove gaps above and below the text.
input {
font-size: 100px;
padding: 0;
margin: 0;
height: 80px;
line-height: 80px;
}
IE and Firefox seem to render it correctly, but chrome seems to add padding to the text of the input.
Fiddle showing what's going on here: http://jsfiddle.net/tomdickie/nZY8r/1/
EDIT:
To add a bit more clarity, to this here are some screenshots:
Firefox
Chrome
I'm trying to get Chrome to behave like Firefox (and IE) do.
try this and its woring here
HTML code
<input type="text" name="uname" value="223" />
and CSS code is
input {
font-size: 100px;
padding: 0;
margin: 0;
/*height: 80px;
line-height: 80px;*/
}
I've tested this code.
I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this:
display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;
It must look like this (chrome and IE renders perfectly my code) : http://img341.imageshack.us/img341/6590/kogy.png
But when i use the same code on firefox, here is what I get: http://img17.imageshack.us/img17/953/jms4.jpg
I looked on dom inspector on both browsers, and when i look at "calculated values", it doesn't renders the same thing on chrome (line-height: 60px) and firefox (line-height: 67px).
Everything I've tried from now is a fail :/ I hope you guys will have some help for me :)
Thanks !
You shouldn't define a unit of measurement with line-height, this is so that the spacing is relative to the font size. In your example
line-height: 60px;
should be
line-height: 1;
or
line height: 100%;
as you are specifying that you want it to be the same height as the font.
Button line-height in FF is hardcoded as line-height: normal !important; meaning that even a user defined line-height: xxx !important will not override it.
Give these a read:
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
https://bugzilla.mozilla.org/show_bug.cgi?id=697451
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.
I have few buttons on my jsp page and I am using the style as :
*.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
}*
In Firefox the buttons are bit smaller than IE6.
I can not define the size of buttons as the caption changes the button size changes accordingly.
I tried with width:auto but no success. Also, with overflow:visible the buttons in IE becomes bit smaller.
Please help.
IE has a bug with button padding, you may be experiencing this. Try something like this:
input.button {
padding: 0 .25em;
width: 0; /* IE table-cell margin fix */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto; /* cancel margin fix for other browsers */
}
Note: if your buttons become even smaller in IE after applying this fix, make sure you are not in quirks mode. In IE's quirks mode the widths of objects are calculated differently than in standards mode, making everything a bit smaller (for items with a specified width). Best to always use standards mode if you expect consistent cross-browser results (even though IE's standards mode isn't that good, it's still way more standard than quirks mode).
Either use Conditional Comments :
Ex:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Or set custom width for input only read by IE like this :
.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}
Now you can tweak them accordingly
A button is rendered however the browser decides. You will need to use an image and set it up to work like a button if you want it to look that same in all browsers.