I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
Related
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
With CSS, I'm trying to add 5px padding to tables which do not have the border attribute set to "0". To do this, I'm able to select these tables like this, and test it by making the background color of them red:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
background-color: red;
}
Also, this works to make all tables have padding:
td,th
{
padding: 5px;
}
However, I only want tables with borders to have padding, and this does not work:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
padding: 5px;
}
Does anyone see an issue here? Thanks in advance.
EDIT: I see the code I posted above actually works, I didn't realize that I left out code that broke it, but this is what I tried to get working:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
border: 1px solid rgba(0,0,0,.25);
border-collapse: collapse;
padding: 15px;
}
The border-collapse:collapse; property seems to be causing this problem. Is there any way to have single borders between cells and padding at the same time?
A <table> always has a <tbody> if you don't specify one explicitly in the HTML.
(It would be different in XHTML, but this is HTML, not XHTML.)
Solution: also specify the tbody in the CSS selectors.
table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td
{
padding:15px;
}
See fiddle
By the way, you could remove the middle selector (ending in tr) from the rule, because it doesn't do anything. You can't give padding to table rows.
You say it does work with the first example in your post, but that isn't entirely true. Only the first selector works, giving the whole table the red background, and the other two are ignored, so the cells remain transparent.
Oh, and it's best to not use the border attribute any more. There was a dispute between the WHATWG and the W3C about whether it was still valid, but they finally agreed that it was obsolete.
I'm very inexperience with html and only know the basics for my Tumblr blog. My question is probably very simple but I'm very pissed off at it and I'm losing sleep because I will not sleep without fixing it. So waaay in the beginning of my code, I have:
.post img { width: 100%; }
and then waaay later in the code, I have:
div class="asker-info"><img src="{AskerPortraitURL-24}" alt="" class="asker-avatar" /> {Asker}></div>
My problem here is that whenever someone asks me a question, their avatar appears 20x literally the size it should be. I've checked it out on Google Chrome's "inspect element" and found that the .post img part of my code cancels out with the width part in this section:
.asker-avatar {
float: left;
width: 24px;
margin: 5px 10px 5px 10px;
}
I'm so goddamn pissed off and nothing makes sense
Could you try this and tell what happens ?
Here you create a css class with the image size you want. You set the width what you want, and the height auto, it must pick a good value depending on height
.asker-avatar
{
width: 24px;
height: auto;
margin: 5px 10px 5px 10px;
}
Another question, can you put here the asker-info class you use in the div ? Could be that class the problem with your img ? And maybe you could try to remove the .post img {width:100%} because can make the img to resize to the 100% width of the div
And here you can practise with images sizes and resizes, and you can read some explanation about the img attributes, it's an useful page:
HTML_IMAGES W3SCHOOL
I fixed it!! Oh my god, am I relieved! I noticed that my own avatar was not affected by the .post img so I looked over the class and found out that by simply adding an id="_", you can change it!!
It's not working because the CSS selector .post img is "more specific" than the selector .asker-avatar.
Since .asker-avatar appears lower in the style-sheet that .post img, it will be enough to make that selector as specific as the one you want to override.
I'm not an expert on CSS specificity (this guy is), but try changing the .asker-avatar selector to img.asker-avatar (note - no space between img and .).
I'm working with Vaadin, a GWT like framework for developing rich web applications.
Now I want to set the padding of a generated HTML-tag element in my markup and I'm having big problems with it...
This is how the markup looks taken from Firebug:
The tags
v-formlayout-captioncell
v-formlayout-errorcell
v-formlayout-contentcell
all have padding-top: 12px and padding-bottom: 12px, I would really like to change this padding to 2px, but I can't seem to get it to work.
I've already tried these combinations among others:
.v-formlayout-captioncell td {
padding-top: 2px;
padding-bottom: 2px;
}
v-formlayout-row td {
padding-top: 2px;
padding-bottom: 2px;
}
.v-formlayout-row th,
.v-formlayout-row td {
padding-top: 2px;
padding-bottom: 2px;
}
But none of them does any impact on the padding... could someone with better knowledge about CSS and HTML than me please take a look at this and give their opinion on how a CSS class should be written to do what I want. If you want me to provide more information then please ask! =)
Thanks in advance!
EDIT: Thank you Taryn East for your nice and graspable answer, it definitely taught me something new about CSS syntax! However, it seemed like the biggest problem I was having was that the padding parameters I was adding was overridden by the browser. But by using the !important CSS flag and writing the class as such it was fixed:
.v-formlayout-row td {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
If the class is in the td, then it should be:
td.v-formlayout-captioncell
the css here is saying is "find a td with the class 'v-formlayout-captioncell'"
By comparison, your css is saying: "find a td that is a descendant of something with the class 'v-formlayout-captioncell'"
Edit:
The reason why the formatrow isn't working is because CSS always picks the innermost style ie for
<tr class="a"><td class="b"></td></tr>
then anything in class b will override anything similar in class a.
In your case - the per-td padding was being set by an outside class, and you weren't overriding it with your 2px padding on the td... and any padding you were putting in the tr was simply being overridden by the outside-defined class on the td.
"important" fixes that because that gives it a priority to the tr styles that overrides the innermost-td style despite them being "more inner" - because they only have normal priority. However - this is kind of a bit of a hack that is unnecessary in your case.
The better-practise fix is just to use the td.v-formlayout-captioncell class
Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?
Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?
Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.
I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:
http://jsfiddle.net/J5PLf/
I'm thinking about something like:
body {
line-height: 0;
}
p {
line-height: 1.2em;
}
But I guess it's a bit risky, what if there will be some free text not within tags?
Don't mess with the line-height propety, and set display:block at the images.
Fiddle: http://jsfiddle.net/J5PLf/1/
#example1, #example2, #example3 {
width: 200px;
float: left;
}
img {
display:block;
}