I have styled submit button with custom background image. But it shows differently on different browsers.
Almost all browsers shows it correct:
But on 2 it have extra height:
Can anyone point what wrong is with my markup?
CSS:
input[type="submit"]{
background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat;
width:30px;
height:30px;
border:none;
float:left;
margin:30px 0 0;
cursor:pointer;
}
HTML:
<form>
<input type="text" class="placeholder" value="Search" />
<input type="submit" value="" />
</form>
Tested:
IE 8.0 good
IE 7.0 good
iPhone good
Chrome 24.0 good
Firefox 18.0.2 good
Safari 5.1 (Mac OS X 10.7.1) good
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bit) extra height
Opera 11.51 (Mac OS X 10.7.1) extra height
Live demo on jsfiddle.
It looks to me the height of the textbox is different not the submit button. Try setting the height of the textbox.
I see in the second search bar, the text is italic and looks slightly smaller. I think the search bar is adjusting to the text and making itself smaller, which makes the search icon appear larger.
What you probably need to do is add this to your stylesheet where the placeholder is controlled:
{font-style:normal}
Try this.
It will give a fix height to the element.
input[type="text"]{
margin:30px 0 0;
width:226px;
color:#999999;
font-size:12px;
font-style:italic;
border:1px solid #cccccc;
border-right:none;
background-color:#ededed;
float:left;
height:28px;
padding-right: 7px;
padding-left: 7px;
line-height: 28px;
}
Submit buttons & input textfields have different default values for borders, margins, padding, etc. First of all you have to put this to both submit buttons and textfields
margin:0;
padding: 0;
border: none;
outline: none;
Related
Take the following HTML and CSS:
<html>
<body>
<td class="colorpick">
<input type="color" name="head" value="#aec7e8">
</td>
</body>
</html>
input[type="color"] {
border: none;
width: 24px;
height: 24px;
}
On Chrome, Safari, and Internet Explorer, this appears to follow the CSS, and the input appears as a square.
Chrome screenshot
Safari screenshot
However, on Firefox, it appears as a very very narrow rectangle that does not follow the CSS. This is consistent between devices and between versions of Firefox. How do I make the color input match the shape that it is in the other browsers?
Firefox screenshot
Desired:
FF Result:
Let's get rid of borders, margins and paddings:
input[type="color"] {
border: none;
width: 24px;
height: 24px;
border:0;
margin:0;
padding:0;
}
Fiddle: https://jsfiddle.net/qkyhn7pj/
So, I have a span with some text in it, it has padding and it has a border.
It displays ok in chrome and safari, but in firefox it has more space between the text and the bottom border than between the text and the top border. Inspecting the element in firefox I figured out that the span in firefox has more height than the text inside it, and the text is top-aligned. Below is a screenshot to explain myself.
But first, this is the code:
span.num{
border:1px solid #00B288;
border-radius: 5px;
padding:5px 15px;
font-size:25px;
color:#fff;
font-weight:100;
letter-spacing: 0.5px;
}
<span class="num">0800-777-8101</span>
Chrome: http://puu.sh/lHWSM/aa4e15a522.png
Firefox: http://puu.sh/lHWUv/aa066712c3.png
As you can see in this last screenshot, firefox is making the span take bigger height than it's content. http://puu.sh/lHX1V/c6f6a12c13.png
How can I fix this?
That is because Chrome and Firefox render fonts differently and also have a different default line-height. Setting a fixed line-height and setting display:inline-block You can force them to render the element with the same rules.
Example:
span.num{
border:1px solid #00B288;
border-radius: 5px;
padding:5px 15px;
font-size:25px;
color:#fff;
font-weight:100;
letter-spacing: 0.5px;
line-height:1.2em;
display:inline-block;
}
I'm trying to remove this border around my PayPal input as well as center align the text.
It works fine in Firefox but bugs in Chrome.
Here's a link to what I'm working on.
http://jsfiddle.net/R28f7/1/
I've tried this focus fix, but no luck.
textarea:focus, input:focus{
outline: 0;}
I have been trying to fix this for a while now and any help would be appreciated. Thank you!
Are you able to change the HTML markup of the input type to button ? Doesn't seem like you are using it as an image anyways.
<button type="submit" class="button_fix">Order Now</button>
Since you are trying to align your text to the center, remove the padding from the right and left and apply text-align:center; Here is an updated fiddle:
http://jsfiddle.net/DL6QU/7/
Try to use like this: DEMO
HTML:
<input type="submit" class="button_fix" name="submit" value="Order Now">
CSS:
.button_fix {
display:block;
background-color:#c0392b;
text-align:center;
width:200px;
padding:10px 35px;
color:#fff;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 8px;
/* Firefox 1-3.6 */
-moz-border-radius: 8px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 8px;
font-size:2em;
font-weight:200;
font-family: Helvetica, sans-serif;
margin:10px auto 0px auto;
outline:none;
border:0;
}
Hope this helps
I have a critical HTML issue: a weird white line appears on buttons in Internet Explorer.
Example of Original Mockup -
Button HTML -
<input type="button" Class="buttonAll" value="Regenerate" onClick="Captcha();"/>
<input type="submit" value="Save" onclick="" class="buttonAll">
My UI HTML does not include any Doctype and I have a criteria to do only Cosmetic changes.
I tried to Apply CSS in 2 ways:
Using BG Image -
CSS for the above:
background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;
Using CSS Gradient -
CSS:
input[type="button"], input[type="submit"], .buttonAll {
overflow:visible; display:inline-block; cursor:pointer;
outline:0px none; width: auto; vertical-align:middle;
margin:3px 6px 3px 0px; padding:2px 6px; border:1px solid #804240;
/*background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;*/
background: #92110d; background-repeat:repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#f04b47), to(#92110d));
background: -moz-linear-gradient(center top, #f04b47, #92110d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04b47', endColorstr='#92110d');
text-align:center; text-transform:capitalize; color:#fdfad9; font-size:11px!important; }
Both of the above code works well in FF and Chrome.
Is there is any possibility that it happens due to Events Focus / Active / Blur
I want to know how can I remove this white Line?
you need to remove border from input field for example input[type="button"], input[type="submit"], .buttonAll { border:none;}
Vipul above code is right. reason is your doctype declaration. because there is two type of document modes 1. strict mode, 2. quirks mode. Quirk mode doesn't support W3C modern standards.
I have a problem getting the text in an input to show correct in Internet Explorer 8.
Firefox, Safari and Chrome all show the same.
Firefox, Safari and Chrome
Internet Explorer 8
<form action="" method="get">
<input id="q" name="q" type="text">
<input id="s" name="s" type="submit" value="Sök">
</form>
#q {
background:url(../../image_layout/search_field.png) no-repeat;
width:209px;
height:32px;
padding:0 5px 0 5px;
text-align:left;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#09305b;
font-weight:bold;
position:absolute;
left: 0px;
top: 19px;
}
#s {
background:url(../../image_layout/serach_buttom.png) no-repeat;
width:56px;
height:34px;
padding:0;
margin:0;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
border:0;
position:absolute;
left: 225px;
top: 17px;
}
Try specifying a line-height: 34px or thereabouts.
There is a CSS3 rule: the box-sizing. This rule is supported by IE8.
The IEs(including IE8) have non-standard box model, where padding and border are included into width and height whereas other browsers go with standard and don't include padding and border into width . It is described in detail here.
By setting the box-sizing to content-box you tell the browsers not to include border and padding into width, and if you set box-sizing: border-box, all browsers will include border and padding into width. This or this, the display will be consistent across all modern browsers(not that IE8 is so modern, but it supports this rule too :).
I had to set the line-height and display: inline. No idea why, but it worked for me.
Set a line-height property for search input field #q?
Try setting a line-height targeting IE8 and below, like this:
line-height: 32px\9;
line-height value should be equal to input's height and \9 will target IE8 and below.
The position of input should be position:absolute; in order for line-height:37px; and display:inline; to work.
I had much trouble with that, and finally i resolved it:
for ex. you set
INPUT {
line-height: 44px
}
and...
INPUT:focus {
line-height: 45px
}
this one...f... pixel makes the difference (focus shoud have +1px more than normal) and now you have your cursor in good position at IE8.
Just use
line-height: 34px!important;
height: 34px;
I can't comment yet, Matthew's answer worked for me, but in case people wanted an IE-only wrapper without searching anywhere else:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
line-height: 20px;
}