Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
beautiful people,
For the life of me I can't get my buttons to format properly in IE and Firefox, using Bootstrap. I've looked around for people with similar problems on here but I can't seem to lick this one. Any help would be greatly appreciated. I've made this site in MeteorJS in case that provides any insight for you out there:
http://jdd.meteor.com/search
*It works fine in Chrome, Safari, iOS devices...
I've made a reduced version of your form. My method for solving this problem is using the enforced line-height of firefox as your basis for applying styles. The default is normal from what I remember.
So using that you don't have to set a height and line-height to match that, this for me has been the most consistent solution cross browser without any weirdness.
I use the prefixed appearance rules as that removes all default browser styling applied to that element. It's especially needed in Mobile Safari.
http://codepen.io/stevemckinney/pen/CLgdE
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: #EFEFEF;
}
input,
.btn {
line-height: normal;
padding: 10px;
}
.btn {
text-decoration: none;
}
.btn-primary {
background: #820024;
color: white;
}
Hopefully this helps.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
problem to use -webkit-background-clip on vs-code
It works properly but get error sometime. Why does it happen?
Here is my code:
.heading-secondary{
font-size: 3.5rem;
text-transform: uppercase;
font-weight: 700;
display: inline-block;
background-image: linear-gradient(to right, $color-primary-light , $color-primary-dark );
-webkit-background-clip: text;
color: transparent;
letter-spacing: .2rem;
transition: all .2s;
AND THE PROBLEM SHOW
Also define standard property 'background-clip'
!error
scss(vendorPrefix)
It's self-explanatory. Include the background-clip: text property too.
As you can see, it's not an error it's a warning. Nothing is broken. Visual Studio Code just gives you advise in the "problems" panel if they have the "warning" icon.
And since your property has a vendor prefix, the property is considered non-standard since it only works in one browser (engine). So it's highly recommended to always use them alongside with the non-prefixed property.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm totally new to coding and just trying to find my feet, I have been given a challenge to do on the course I am taking which I have solved but my solution was to write the same 2 lines of code but in a different order.
Whilst it's great that this worked I'm confused at to why!
Can anyone help me?
This one works
em {
font-size: 20px;
color:white
}
This way doesn't work it completely ignores my request for color and font size and leaves it with the rules I set in an earlier part of the code.
em {
color:white
font-size: 20px;
}
I would expect both ways to work as my understanding was CSS reads from top to bottom and this is the bottom of the code so there's nothing which can negate this rule.
It looks like you're missing a semi-colon on the colour:
p {
color: red;
}
em {
font-size: 20px;
color: black;
}
em {
color: blue;
font-size: 20px;
}
<p> Test <em>Word</em></p>
This should work for you, you're right that the styling should cascade down.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I use visual composer in Wordpress and both when I make the image here rounded, either with Visual composer or directly with CSS it still does not become rounded in the corners.
Link: http://hope.ly/13Aaqw8
Does anyone have any ideas ? Suggestions ?
You can set border radius on the parent wrapper:
.wpb_column > .wpb_wrapper *:last-child {
margin-bottom: 0;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
But this will depend on the cropping of the image inside this wrapper.
It looks ok to me when I edited it directly in the chrome inspector. but you should post your own code really to see what you have tried.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I've managed to get this working correctly in IE (annoying), but the solutions I manage to get working cause some odd issues in Chrome and Firefox. I can't seem to get a set height/padding that works across all the browsers for the handle.
http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview
The height of the red, green and gray boxes should all be the same. Right now they are in IE, but not in Chrome/Firefox.
The problem is arising from several inconsistencies between the attributes of the red/green boxes compared to the gray.
I've been able to make the gray box the same height by changing the following attributes:
.stSlide > .stHandle { /* Gray box container */
padding: 4px 1px; /* old style: padding: 1px 1px 3px 0; */
font-size: 11px; /* old style: font-size: 12px; */
line-height: 18px; /* old style: line-height: 22px; */
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Been searching all over and can't seem to find the answer to this:
I have a checkbox that disables several forms if unchecked. The forms are styled to change color, but the placeholder text remains the same. How can I fix this?
(alternatively, I wouldn't mind even just removing all placeholder text)
Thanks!
You can style placeholder pseudo-elements in css, so you could write the following css:
input:disabled::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
assuming that white is also inputs background.