i have a problem that i couldnt find a solution for it. I use bootstrap on my website and it uses
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
for all buttons.
Now i just installed arrowchat scrip and i have a problem with this rule from above, it ruins my css from arrowchat. I tryed to add
-webkit-box-sizing:content-box !important;
to my arrowchat class but still it doesnt affect with anything. Can someone give me a solution for this?
-webkit-box-sizing: content-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: content-box; /* Firefox 1+ */
box-sizing: content-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
You need all of them to cover all the browsers
Related
I am trying to change the width of my input button. I can change it using chrome devtools when it's set to mobile, but once the React app is deployed and I check it on my phone, the width is unchanging. See screenshot below.
Thus far, I've changed my width size to all kinds of pixels and percentages and added these properties:
.TodoApp .button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I have a simple input with some styles.
input {
display: block;
width: 100%;
padding: 4px 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
<input type="email" id="email" name="email" placeholder="Email">
The code works just fine with Firefox. However, in Chrome, when the input is focused it get shrunk a little bit (smaller than in normal state).
I've tried to apply border-box sizing on this input but the problem still retains. How should I fixed that?
Use the :focus pseudo class.
input:focus {
outline: none;
}
Like this: JSFiddle.
It works fine for me in Chrome and Firefox as well. Also worth to consider of using normalize.css (or something similar), to avoid (or fix) the browsers default css attriibute settings.
I am attempting to get my login form all aligned in a column. This works great in Chrome and (hilariously) IE but doesnt in Firefox!
Can anyone help me out with what the issue is?
You can see it here in a fiddle!
I am currently using border box to get everything aligned in spite of padding.
box-sizing: border-box;
Firefox still uses the prefixed version, so add -moz-box-sizing: border-box; before your box-sizing declaration.
Have you tried using the -moz- prefix for Firefox?
If you are into responsive design, include these also for wider coverage of browsers on mobile devices.
-webkit-box-sizing: border-box;
/* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
-moz-box-sizing: border-box;
/* Firefox 1 - 28 */
box-sizing: border-box;
/* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
http://trulyamped.com/test/art.html
For some weird reason whenever i toggle one of the options such as web/ios/print the animation does a weird glitch and the animation skips.
but when i delete the codes *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
from my style it works properly but only to find that my hover animation is clipped.
So what i am asking is how do i get the animation glitch to stop? (just click on one of the filters on the site to see the glitch)
for comparisons look at http://designwoop.com/labs/filtered-portfolio/ and you can see how smooth it looks
i am really nit picky and the way the animation is not smooth bothers me.
it's easy since you already know the reason that couses glitch.
quicksand is a plug-in so it's not smart enough to calculate css.
And also it is better not to apply box-sizing css for practice.
I would suggest take the
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
out and calculate width and padding by yourself for figcaption
I am trying to add padding to a box via:
.p-box-header{
border: 1px solid orange;
float: left;
width: $p-box-width;
padding: 0px 0px 0xp 20px;
}
and it looks like this:
The 'Food' header is adding 20px to it's width. This didn't happen in box below. Why is this happening and how can I prevent?
thx
Note : You wrote "0xp" and not "0px". If this doesn't solved your problem, then read the following.
You should take a look at a CSS3 property called box-sizing.
This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
More infos here : http://css-tricks.com/box-sizing/ and it's available since IE8 (CanIUse - Box-sizing)