written Border vs shown Border - html

I've got a Problem with simple plain html/css Borders.
If i do something like that:
#demoDiv {
border: solid 1px black;
background-color: green;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
This cssText will style the div-element with the ID "demoDiv" to a green box with black border. The Box should be 102 px heigh and 102 px width, right?
But now comes my Problem.... Firefox tells me, that this box is 101,6px heigh and width.
The only border-width, that is working is "0" - the others had to be multiply by 0.8.

This is because you didn't set the box-sizing: border-box to your page. By default all Html pages content-box set in the box-sizing which simply means that it calculates the all sizes from the margin box to content area box. Make sure to learn more about it as it will useful for in the future.You learn more about border-box from the Mozilla- Mdn.

I found the solution here:
What could make Firefox render an incorrect border width? to sum it up: Firefox renders the border-width on zoom.Thanks for responding

Related

Fractional border width sometimes causes a 1px "padding", how to fix?

To create a rounded rectangle with a 3D-like effect, I have a div inside a div, as follows:
* {
box-sizing: border-box;
}
body {
font-size: 0.948px;
}
.outer {
font-size: inherit;
width: 20em;
height: 26em;
background: #fc6;
border: 1.4em solid #bad9d9;
border-radius: 3.98em;
line-height: 20.8em;
text-align: center;
}
.inner {
font-size: 8.64em;
height: 87%;
background: #fff;
border-radius: 2.844px;
}
<div class="outer">
<div class="inner">768</div>
</div>
In this code, I am trying to create this, but depending on the exact value of div.outer's font-size (set via JavaScript), a 1-pixel padding sometimes develops at the top and/or sides of the outer rectangle, as shown here. I believe this is caused by the browser rounding the fractional border width up for positioning elements, but rounding it down when drawing it on the screen. This effect (bug?) occurs in Chrome and Edge, but not Firefox.
Edit: I would like to clarify that almost all the styles are dynamically updated via JavaScript (this is part of a larger project). The border-width could shrink to 0em or expand to 4em, and I am looking for a workaround to this bug (I believe it is a rendering bug) that works for any border-width.
My question: is there a way to fix this without
Using JavaScript to convert from em values to rounded px values?
Using a third element to draw the border (pseudo- or otherwise)?
Gallery:
- original
- at 500% zoom
- with the border-width at 1.0em
- with the border-width at 0.8em (what I want)
- with the border removed
(all screenshots scaled up using Chrome's trackpad pinch-zoom)
This is a known and reported issue, but currently this is considered low priority by the Chromium development team, so there's not much hope this will be fixed any time soon, if ever.
Here's the change that causes this: Use floor instead of round for decimal border widths; here's an explainer for the change.
Adding your case and a reproducer to that issue might help.
I would prefer not to mix different types of Units use em everywhere.
In addition, make the inner width 100% so it always fills the outer and does not have extra space of the outer visible.

Why are my some element borders fainter than others? [duplicate]

I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;

Table td width 2px more than designated

I have a table with the following CSS:
width: 100%;
border-spacing: 0px;
table-layout: fixed;
I then have 3 columns specified with the following classes:
#UsedColumnWidth: 26px;
#DeleteColumnWidth: 18px;
.UsedCountColumn {
width: #UsedColumnWidth;
}
.DeleteColumn {
width: #DeleteColumnWidth;
}
.CapabilityColumn {
/*width: #ContainerWidth - #UsedColumnWidth - #DeleteColumnWidth;*/
/*width: 100px;*/
}
I noticed when looking in chrome developer tools that the width's of my UsedCountColumn and DeleteColumn is 2 more pixels than I have specified and I cannot figure out why this occurring. I thought that maybe border-spacing was messing it up, but I have that set to 0. Any ideas on why this is happening?
This is why its adding the padding without showing it. I take it that you´re using LESS :)
If we are talking about the "browser default css" then there are some padding and margin for sure.
The reason people are making reset.css documents is because browers have different "default css values".
Eg. some browsers have a more gray/yellow´ish background, where others are totally white.
In order to ensure a better layout and that it look the same in other browsers, you would need to do a css reset.
example.
* {
margin: 0;
padding: 0;
/* ect styles */
}
And ofc..
total visual width = padding + width + border
total fill width = padding + margin + width + border
same goes for height ofc :)
I'm guessing this is because you have a 1px border, adding a total of 2px to the element. If this is the case, you can still keep the border, but should either add box-sizing or use outline instead.

CSS HTML issue - Toolbar extends too far

This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.

Firefox/Safari setting height as [specified height - padding - border] for input[type=button]

When I use the following CSS:
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
with this HTML:
<input type="button" value="Foo" />
I expect to see this, so the total height becomes 36px:
1px border
7px padding
20px content (with 15px text)
7px padding
1px border
But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)
Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border
Does anyone have any idea why this happens?
(Even if it's expected behavior, what's the logic behind it?)
Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.
To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.
You can disable this behaviour with:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)
The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.
A few things you can try:
Set the doctype of the document (<!DOCTYPE html>)
Set the input to be display:block or display: inline-block
Use a reset stylesheet.
It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.
I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element.
I Also set the line-height, font-size and the font-family.
worked on FF,IE,safari and chrome :D