Table td width 2px more than designated - html

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.

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.

written Border vs shown Border

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

CSS on table not loading until I refresh

I have a table with a padding of 25% on the th and td.
However; the padding does not apply unless I refresh the page with CTRL + SHIFT + R. How come?
Example CSS:
table.foo {
border: 0;
margin: auto;
color: #545454;
margin-top: 30px;
}
th, td {
text-align: left;
padding-right: 25%;
}
th:last-of-type, td:last-of-type {
padding-right: 0;
}
It's the padding-right: 25% that I use for getting some horizontal space between the cells.
Why is this happening? Is padding not the correct way of doing this?
UPDATE: After testing to keep refreshing the page, I noticed that the spacing changes each time..? Like it's setting itself on a spacing from 0 - 25%
Padding percentages "refer to the width of the containing block". As you cannot set the width of a tr, it doesn't work. Even if it seems to work it is not cross-browser solution. I suggest to set the cells padding in px or to use a div inside cells and set padding in percentages to it.
Just to be clear is your doubt based on the CTRL+SHIFT+R, or just simply refreshing?
For the latter, I believe to my knowledge, CSS will not produce its changes dynamically. That is, as mentioned in your problem, you will have to refresh the page every time you make a change in your CSS coding.
Hope this is the answer you are looking for.

CSS: 100% is larger than page width?

I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:
font-family: 'Champagne';
font-size:20px;
display: block;
z-index: 1000;
bottom: 0;
width: 100%;
background: #0193CF;
text-align: right;
padding: 0 2em;
margin: 0;
text-transform: capitalize;
But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.
Does anyone have any experience with this?
The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.
I would suggest using the box-sizing properties in your CSS, like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.
box-sizing:border-box...
This basically takes into consideration the margin and padding when calculating the size.
A more detailed explaination on the box-model is outlined for you here:
http://css-tricks.com/box-sizing/
Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".
many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"
Here is one of the more popular ones:
http://meyerweb.com/eric/tools/css/reset/
But this site reviews a lot of them:
http://www.css-reset.com/
If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.
My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.
width sets the content width which does not include padding nor margins.
Try removing padding or changing the box sizing.

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.