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.
Related
I'm using the most recent version of Wordpress in combination with a theme.
On that theme there is some css code I don't need/want and which makes my customized page look bad. This would be one example:
#content table {
border: 0;
margin: 0 0px 24px 0;
text-align: left;
width: 100%;
vertical-align: top;
}
#content tr {
vertical-align: top;
}
So far I always commented out such parts directly on the style.css of that theme. But like that I'll always loose my changes whenever I update that theme.
Now I've started to bring all my changes into the custom css directory of that theme. This works good for changes, however I have no idea how to remove the part I'm usually commenting out.
Any idea how to do that?
This question aims also to such changes where I'm commenting out parts of that style:
#content tr td {
border-top: 1px solid transparent;
/*
padding: 6px 24px;
vertical-align:top;
*/
}
Hopefully you understand what I mean :)
You need to create a child theme and then import the functions.php and style.css in it.
Then add your changes here.
You will never lose it whenever you will update your theme.
Please let me know if you want code too...
Since you are using a separate custom css file, commenting will obviously not work as your main css file will still contain some of the same style sets. So, to remove a style set entirely do the following on your custom CSS file.
#content table {
display:none!important;
}
You can do this for each style set or add them all together, separating them with a comma. i.e.
#content table, #content tr {
display:none!important;
}
In regards to the second part of your question, you can't remove just part of a style set but you can overwrite it by continuing to use the !important declaration and using opposite values such as changing padding from 24px to 0px if you don't want any padding. You will need to realign to your preference or set it to baseline which is the default. (Again, this goes in your custom css file)
#content tr td {
padding: 0px 0px!important;
vertical-align:baseline!important;
}
Notice that I didn't include border-top: 1px solid transparent; because your main CSS will still apply this part of the style so you only need to overwrite anything you don't want or wish to change on your custom CSS being that there is no way for you to comment style sets in the same manner as you would using a single CSS file.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
I am trying to fix a couple of problems when you view this web page in IE7.
(the web page looks great in iE8 and iE9)
I have uploaded the single web page onto a test site:
http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html
When the page has loaded, scroll down to view. You will see the prices on the right hand side. The small duplicated full stops should line up with the prices and food description.
Any advice would be greatly appreciated
SO your code has a with the dots underline on it as a repeating background and within that there is a wrapper div floated left with the food item name and nested within a that a class .bar_font_bold_med which is 'float: right'.
Two possible ways of getting to a solution.
1\ Why not have the price i.e. the in its own instead. That will sort out the positioned-on-the right goal. It will also allow you to use or middle or top etc on the price to independently adjust its vertical position in relation to the food item. Also use CSS to supply the dotted underline. Eg consider using a border-style on the lefthand thus.
border-bottom: 5px dotted #fff
How you attach the style is up to you. Perhaps a CSS classname on the relevant s is the best way i.e.
<td align="left" width="565" height="xxx"
bgcolor="#000000" background="images/yellow_dot.jpg"
... becomes...
<td class="foodItemCol" height="xxx">
...and you have the CSS styles
.foodItemCol {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
Or if you go with my suggestion of having another for the price then use this CSS selelector which means you will not have to bother adding a classname
#bar_menu_text table td {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
#bar_menu_text table td + td {
border-bottom: none;
width: auto;
background-color: #000000;
}
What the second style selector is saying where the second or subsequent sibling appears after the first then overwrite the styles that where applied in the '#bar_menu_text table td' rule above i.e. so the price column does not have a dotted underline.
PS You have used a WYSIWYG editor to generate the code for this page haven't you? I have modified my answer baring that in mind as I guess you aren't used to coding HTML /CSS by hand.
PPS you don't need the z-index:5 or any z-index's at all whatsoever...they are only useful when the element the are applied to is position: relative or position: absolute etc.
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
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.
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