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)
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 want to set in % the height of a div included in a fieldset,
but browsers don't calculate the same way the inside height of the fieldset when you use legend !
Firefox: height: 100% consider the height of the legend: it's ok.
Chrome: height: 100% does NOT consider the height of the legend: it overflows.
Internet Explorer: height: 100% does NOT consider the height of the legend: it overflows.
1. Do you know a clean solution to have the same result in the 3 browsers?
2. Which is right compared to W3C recommendations?
Here is the code used to make the test:
<html>
<body>
<fieldset style="height:60px;width:150px;">
<legend>Legend</legend>
<div style="height:100%;width:100%;margin:0;padding:0;background-color:#FF0000;">
DIV : height 100%
</div>
</fieldset>
</body>
</html>
This is an interesting case.
To your 2nd question: It might arise out of W3C HTML5 standard spec being very vague of the visual representation of <legend> element. There has been a long history of browser inconsistencies around <legend>.
To answer your question 1. and come up with a cross-browser consistent position of legend:
In order to get the miscalculation resolved, you have to remove legend from the content flow, for example by adding float to it. Then you need to reposition it relatively and 456bereastreet.com came up with a sibling selector clearing the float immediately after.
Demo:
https://codepen.io/Volker_E/full/zqPjrK/
CSS code on top of your inline styles:
fieldset {
position: relative;
margin: 0;
border: 1px solid #000;
padding: 0;
}
legend {
float: left;
margin-top: -1em;
line-height: 1em;
}
legend + * { /* #link: http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ */
clear: both;
}
It is indeed browser differences (bugs?) or vague spec, which don't allow to style it consistently without taking legend out of flow.
This is an old topic, but still can be useful to someone (my solution is below).
I searched all day for a solution and did not find it. I want to display it correctly in chrome, firefox, edge, opera and IE11 (which will probably also work on IE10).
"Float" or "position: absolute;" does not solve the problem for me, because it removes the transparent background of the legend. I want to keep it on the fieldset 's border and also keep its transparent background (so as one does not see the border beneath it).
I tried with negative top/bottom margins, but then I have a problem in firefox (which infact is the only one who displays the legend correctly).
How I solved it:
I just put "line-height: 0;" (no unit) on my legend and now it displays it correctly.
This way I managed to get the full height of the filedset, from top to bottom border (without the bottom overflow), with overlapping the content with the legend.
Now this can be solved with filedset's padding (detach the content from the label and/or vertically center it with top/bottom padding on the fieldset etc.).
If you need a border on the legend, you can do it with an absolutely positioned pseudo-element (width 100%, height in px/em/rem, top 50%, left: 0, translateY -50%), because padding on legend (even with negative margins) will bring back the same problem.
I tested this in all above-mentioned browsers, on Windows 8.1.
I have not tested it on mobile or safari. I will test it on several mobile browsers (android), but if there's someone to check it on safari, it would be nice.
I was going crazy with the same issue and I've found a css snippet for normalizing fieldsets, And it goes right, in my case I had to remove some properties that are unnecesary, I've removed the old IE versions support too.
this is what I've used to solve my problem commenting unnecesary lines and IE support:
fieldset {
margin: 0px; padding: 0px; display: block; position: relative; width: 100%;
//%border-top: none !important; /* for IE7, does not work with Webkit */
//_padding-top: 3em; /* for IE6 */
}
fieldset > * {
width: auto;
//%width: auto !important; /* for IE7 */
// margin-left: 1.5em; /* emulating fieldset padding-left */
// margin-left: 1.5em !important; /* for IE7 */
}
fieldset *:first-child + * {
// margin-top: 3em; /* emulating fieldset padding-top */
}
fieldset:last-child {
margin-bottom: 1.5em; } /* emulating fieldset pading-bottom */
legend {
width: 100%;
//%width: 100% !important; /* for IE7 */
position: absolute;
top: -1px; left: -1px; /* hide the fieldset border */
margin: 0px !important; /* suppress all margin rules */
line-height: 2em; /* emulating padding-top/bottom */
text-indent: 1.5em; /* emulating padding-left */
//%left: -8px;
} /* for IE7 */
/* user format */
fieldset, legend {
border: 1px solid #ddd;
background-color: #eee;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
legend {
font-weight: normal;
font-style: italic;
font-size: 1.2em;
text-shadow: #fff 1px 1px 1px; }
fieldset {
background-color: #f7f7f7;
width: 360px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px; }
This is the first time I try to help on stackoverflow, usually I only read the answers. Well the original and Snippet is on https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6
Really, really usefull to understand how fieldsets works around different browsers, hope it can save others from frustration.
Pd: Sorry if my english isn't good enough, but hope you can understand it perfectly
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.
My Login-Form doesn't work on FIREFOX.
You just can't write inside the fields (or at least it appears like that).
In Chrome everything works fine and also in IE, as far as IE allows it.
Here is my fiddle:
http://jsfiddle.net/W39EA/6/
I already debugged it and found that the lines, which are causing the error in Firefox are these:
.access .form-control {
padding: 21px 15px;
margin: 10px 0px;
}
They are at the very bottom of the Fiddle.
If I remove them, Firefox works again. But I actually need them to add the necessary padding to my Input-Fields.
Has anyone a suggestion for solving this problem?
It's because you have so much padding on the input fields. You could just set the height of the input field, and then only add a bit of top and bottom padding. -
If you change the input CSS to:
.access .form-control {
padding: 5px 15px;
margin: 10px 0px;
height:40px;
}
That should fix the problem - jsfiddle.net/W39EA/7
I think this problem came beacuse Firefox uses box-sizing property for input is different from the Chrome and IE.
So that I have added "box-sizing:content-box" in your css. After that I got the same kind of results in both the browsers. You can reduce the padding size based on your requirement now.
.access .form-control {
padding: 10px 7px;
margin: 10px 0px;
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
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