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
Related
I am developing responsive website. I have given styling to input box like following.
CSS : >
input[type="text"] {
border:1px solid #F2F2F2;
background:none;
font-size:14px;
font-family:'Raleway';
font-weight:500;
text-transform:uppercase;
color:#666666;
}
Now, this all thing works perfectly in desktop as well as Samsung mobiles.
But on iPhone,iPad and Blackberry phone there is some 1 pixel box-shadow coming inside the textbox.
Does anybody faced this kind of issue, if yes than please provide my a solution for it
By Default iPhone and iPad used safari browser.
And safari shows some inner shadow in the input box by default.
For that you have to use -webkit-appearance: none;
So, your code will be like following:
input[type="text"] {
-webkit-appearance: none;
border:1px solid #F2F2F2;
background:none;
font-size:14px;
font-family:'Raleway';
font-weight:500;
text-transform:uppercase;
color:#666666;
}
I hope it will work with Blackberry too.
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;
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.
as u can see the border is missing from the corners (red one). if i make it 4+ px thick then its ok but i need it 1px thin. why it is a problem? ist this property behaves by design like this?
the html
<div class="win" >
<img class="rounded" src='red.jpg' />
</div>
and the css
.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}
/EDIT/
finally i have found a solution which makes exactly what i needed. i share the link maybe someone else has the the same problem:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
You should have a look at the background-clip css property. Try background-clip: padding-box. You should also add -webkit-background-clip and -moz-background-clip to support older browsers.
There is an issue using border-radius with images in most/all browsers. There are a number of online articles about this but I've not paid attention to them. You should Google for those.
If you want good rounded borders that will work with a large number of browsers, you could use image as a background for a div with needed css-properties.
Example (only border, nothing else):
html
<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>
css
.card {
border:1px solid #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
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;
}