as described in the subject - in Internet Explorer 11 (I don't know how it goes with earlier versions) my input boxes go around 1px down on focus.
I've applied:
textarea:focus, input:focus{
outline: 0 !important;
}
and I don't have the blue outline anymore, however the problem with 1px down still exists.
Any idea what's causing it?
Ok, found the answer - it seems like I set a line-height higher than the input box somewhere along the way.
Related
I'm having a little trouble, I cant seem to find/use the right pseudo class and was hoping some one here might be able to tell me which would be the correct one.
My issue is that google chrome has your previous values which you have inputted into the text input, which is great and all but I can't seem to get my styling right if you click one of the suggestions. My styling works fine in all other aspects of the text input but when you select an option from chrome's list of previous values the background of my text input goes blue, which I don't want. I have tried :active, :visited, and a few others, but I think i'm using the incorrect classes.
Please can some one help me out, I just can't seem to find the right thing.
Thanks.
For webkit browsers you can use -webkit-autofill:
input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus, {
color: blue;
background: red;
}
Check this article out for more info.
Add this to your css, and add the desired styles to it.
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
}
Check out this article, to learn more.
I am currently working on a site which has an design where the main 'welcoming text' contains more than one line (as it is a short introduction about a product). This has an background of a transparant (0.7) white (rgba(255,255,255,0.7) with multiline padding. Yes, multiline padding I am saying. What that means, is that every line of text has top, bottom, left and right padding, background color and also a small transparent space between the lines.
To accomplish this, I used a box-shadow with an horizontal offset to simulate the left and right padding on each line. This does work on all browsers except Internet Explorer. As we want to have site working on all browsers I tried fixing this problem for a while now and I almost have come to the conclusion that this is just an internet explorer issue.
I used Geoff Muskett his example (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/) and it does work as excepted except IE.
The problem is that when I open the page in IE, the box-shadows seems to be rendered somewhat blurry even though I set the blur to 0 pixels. (or just not added it, both did not work).
Even the code from Geoff his example does not work:
HTML
<h2><span>Could you benefit from having Alfi in your home?</span></h2>
CSS
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
Is there anybody here that knows this issue and knows if there is a solution to this that is not very hacky (not preferred)?
IE 11.0.9600.17905
EDIT
3 August 2015 09:32
I have been investigating this issue this weekend and found some posts of people having exactly the same issue as I am currently having. This seems to be a rendering bug in IE. See: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow
Also in another StackOverflow post, someone by the name of #nickmorss says using the box-shadow to accomplish the multiline padded text is not working in IE11 and FF34+. It could be fixed in FF using box-decoration-break: clone; but this does not work at my side.
I think this is something not fixable in CSS by myself as this may be just a narly bug.
I found this worked in IE11
body{
background-color: blue;
}
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>
So I'm thinking that maybe your site is perhaps in quirks mode, or using a different rendering mode other than IE11.
Confirm that you are running in IE11 mode by pressing F12 and going to the emulation tab. Are you in the right document mode. If not you will have to fix your site to ensure it's using the right document mode.
Please note, that in the comments of that blog post it does mention it doesn't work in Firefox, but someone has post code that does.
Not sure if it'll solve it but try declaring your rgba values as rgba(255,255,255,0.7) I've not seen hex values used within rgba before and this may be confusing IE
I added a shadow and a background to a button, but the shadow causes the background to be interupted and broken as is described in the following screenshot.
What's strange is that when I remove the box-shadow of the button, the issue disappears.
This is my CSS :
.btnx3{
background: #4687DF;
border: 1px solid #2667BF;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
padding: 5px 10px;
}
I'm using Firefox 29.0.1, But what makes me ask this question is that I have other buttons and I don't have this issue.
I made sure to restart the browser, upgraded to 30.x.x, but the problem persists.
Edit
I tested the same code on JsFiddle, and it works normal : http://jsfiddle.net/nemzL/
This is not a CSS issue, it's apparently a Firefox bug. For some reasons :
There's no problem on chrome, and other browsers.
The problem is solved when you change css properties of other
elements : Like the margin-top or the border of the container, or
remove the shadows etc...
The same button, and the same CSS code works normally in different pages. (If I move the button to another place)
I will ignore this issue, since it's just related to the browser as you can see.
Thank you,
in webkit safari and chrome ive found that they render the last px of the css rule border:1px dotted; oddly it kind of combines the last 2 pixels into 1 so you get a black mark at the end of the line ..?
has any one else encountered this / got a work arround for it ? please see attached image bellow
Give it a border-right: 1px solid transparent; style: http://jsfiddle.net/4CktD/
It's weird, but hey, it works.
I am debugging my app in IE8's developer mode and I'm running into some very strange behavior. IE8's dev mode usually displays every CSS style on a new line, but not in these cases... take three examples:
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
As you can see, these are three cases where IE seems to behave strangely, and especially for #3, I get some really strange artefacts, such as an ugly dark grey border around my gradient box.
Is there a known way of getting around this behavior?
Update - gradient artefacts fixed
#3 was fixed surprisingly easily, by adding position:relative; to that style. Apparently IE needs this in order to render its gradients properly.
I'm still interested in knowing why IE lumps some styles together on one line, and whether this quirk has any actual effect.
In the samples you give there are at least some missing semi-colons. This may very well be the problem here.
As suggested in comments: try to validate your CSS. Here's the one from W3:
http://jigsaw.w3.org/css-validator/