So, this is the html code for the button
<input type="submit" name="logueo" value="log" id="sendbu"/>
And this is the css style
#sendbu { width: 50px; height: 34px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 12px; background: transparent url(lock.png) no-repeat center top; border: 0; text-indent: -1000em; cursor: pointer; cursor: hand; }
All this works on Chrome and Firefox, but in IE the button seams to dont exist. Thanks for the help.
#domingo why text-indent - 1000em , ie does a different calculation on negative margins , try to remove that and check once
font-size: 0; works sometimes. I'm sure there are sites that use negative indent that work in IE.
Try: background: transparent url(lock.png) center top no-repeat;, and also the 'name' and 'id' properties should match, different flavours of Browser use 'name' differently.
Related
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;
}
I have a input select box and I have to align the text in this box.
In Google Chrome, Firefox and IE <= 9 it works fine.
But the Safari don't use the padding..
Here my code:
<select class="anrede1">
<option>Frau</option>
<option>Herr</option>
</select>
.anrede1, .land {
font-family:'Roboto Condensed';
font-size: 22px;
color: #575656;
margin: 10px 10px 10px 0px;
width: 100%;
height: 42px;
text-align: left;
padding-left: 17px;
border: 2px solid #e1eef9;
font-weight: 300;
}
http://jsfiddle.net/jhne7pfe/
Some ideas to fix that?
Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.
-webkit-appearance: textfield;
Using that solved my problem, hope this saves someone else time.
as far as I know W3 specs don't allow to use padding in select fields. So Safari doesn't support it.
But you can use the following instead of padding-left:
text-indent:17px;
This should work fine.
Not sure, if my last comment reply came through:
As I don't have a Safari installed here, I hope this helps. Try to use:
padding-left:17px;
-webkit-padding-start:17px;
instead of
text-indent: 17px;
The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.
Unfortunately I also have no jsfiddle account yet.
Will be done as soon as possible ;-)
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'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.
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.