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.
Related
I am using HINT.css for tool-tipping, and I can't for the love of god get the tooltip to expand with the content. I've tried clear fixing, setting heights and what not, but to no avail. Basically I would like to be able to say:
&:after
content: attr(data-hint)
background: $defaultColor
color: white
padding: $verticalPadding $horizontalPadding
font-size: $fontSize
line-height: $fontSize // Vertical centering.
width: 150px
min-height: 10px
and then the div will just expand along with the content (basically trying to prevent out-of-bounds cases)
<div class="hint" data-hint="Some very very very very very long tooltip going past 150px and should be multilined"></div>
In the CSS file of the plugin, add the following two CSS properties to .hint class after pseudo element.
.hint:after
{
width: 150px;
white-space: pre-wrap;
word-wrap: break-word;
}
You have set a fixed width of 150px. Try using no width or if you need a minimum, use min-width.
I found the issue which was related to very domain specific code that interlaced with the way hint.css is structured. I had to rewrite hint.css to a custom solution to make it work.
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
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.
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
Hai ,
I am using a html table for my website layout .
when we press enter in one cell , the cell is resizing.
I used css for fixing the table layout. table layout is not changing .But cell is resizing.
.pageContent table
{
height:100%;
width:100%;
table-layout:fixed;
}
.pageContent table tr td
{
padding:5px 10px 5px 10px;
}
how to prevent this resizing of table cells ?
Your table is re-sizing because you are using proportional widths.
There are many ways you can control this. For example, by setting your or height in pixels:
CSS:
table td {height: 20px;}
Your cells will no longer re-size vertically.
Have you tried adding the following CSS
td { overflow:hidden;white-space:nowrap; }
tr { height:1em; } /* or set an appropriate height and width */
This will hide the overflow in the cells however, but they won't resize.
Your layout might be easier to do with semantically correct HTML, using <div> elements but would need to see the markup.
It's hard to be sure, but you haven't set a size on the td in question, only padding. So the td will be expanding to contain whatever is inside it. In some browsers this might change a wee bit with focus.
Could you try setting an explicit width and height (in ems or pixels) for the td?
.pageContent table tr td
{
padding: 5px 10px 5px 10px;
width:8em;
height:2em;
}
Could you post a bit of your markup, or let us know what the content in the cells is? (And which browsers you're seeing the problem in).