I've just discovered <center> is obsolete in HTML5, but it works fine in IE9 with <!DOCTYPE html>:
http://www.w3.org/TR/html5/obsolete.html#obsolete
The alternative is to use CSS text-align, but I get conflicting results:
<body>
<table style="text-align:center">
<tr>
<th>Column</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
<p style="text-align:center">Text</p>
</body>
Any suggestions on how to center both the table content and the p content within the page? (I can't see what's so bad with <center> anyway).
I've just discovered is obsolete in HTML5 (...) I can't see what's so bad with (it) anyway
If it isnt in the spec, or is marked obsolete then how it is interpreted and whether it is supported becomes increasingly up to the vendor.
As of Oct 28th 2014 center appears under
Elements in the following list are entirely obsolete, and must not be used by authors
You may being using center now and it 'works', but in the next version of your browser, all support may be droppped, leaving you with a page that doesnt render as intended.
text-align:center will center your text, in exactly the same way. However any additional styling applied to the center element by browsers (each has a default set of CSS styles often derived from the w3c recommendation) will not be present.
The conflicting results you note arent due to the use of center vs text-align they are because the text is being aligned within elements of varying widths. If you set the width of your table to 100%, the alignments will be similar.
I'm trying to put the colspan, valign and align in the following piece
<td style="background-color:#000333" colspan="4" valign="middle" align="center">
all inside the style="...", to have something like:
<td style="background-color:#000333;colspan:4;valign:'middle'; align:'center'>
Is there any way to do this?
You will be unable to achieve colpan results with CSS I stand corrected, you can in CSS3. But text-align:center will get and vertical-align:middle for vertical alignment.
With that said, please consider using proper CSS rather than stuffing things into the style tags, that will make your (and everybody else's) job much easier in the future. That is as simple as saying
<td class='myclass'>
and then inside your CSS file
td.myclass
{
text-align:center;
vertical-align:middle;
}
You cannot do that because there is no way in CSS to do the job of colspan (except in a special case where its value equals the total number of columns, and even then only using a proposed CSS extension that does not work consistently across modern browsers, not to mention old browsers).
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
I have a situation that I am looking at where certain CSS properties will not be inherited. This revolves around tables and IE8. Using the sample HTML below I cannot get the text within the table to inherit the green colour.
This works in Firefox and Chrome, but not IE8 and from reading up this seems to have always been a problem in IE but was meant to be working in version 8 from what I read.
I have tried to specify the inherit value everywhere possible, but to no avail so the question is whether the CSS inheritance support in IE8 is buggy, or am I missing something?
I don't want answer changing inline CSS to be classes and I certainly dont wan't any comments on tables as this all stems from building and designing HTML emails where inline CSS and tables are essential.
<html>
<head></head>
<body>
<table style="color: green;">
<tr>
<td>
<span>Span</span>
<p>Paragraph</p>
<div>Div</div>
<table style="color:inherit;">
<tr>
<td>Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're right, this is pretty odd, although I find that adding a valid doctype solves the problem. http://jsbin.com/etuti/2
I've never had a problem with inheritance in any of the IEs. I usually have problems with lack of selector and property support, as well as positioning bugs etc.
Could it be you don't have the correct specificity with your selectors? I'm pretty sure they go in this order (from most specific to less)
Inline style attribute (style="color: green;")
Id selector (#bob)
Class selector (.jill)
Element selector (body)
If that all fails, could adding !important help? I'd use this as a last resort, as usually you can just give specificity by providing a more specific selector.
What CSS should I use to make a cell's border appear even if the cell is empty?
IE 7 specifically.
If I recall, the cell dosn't exist in some IE's unless it's filled with something...
If you can put a (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?
Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default).
Another way of making sure there is data in all cells:
$(document).ready(function() {
$("td:empty").html(" ");
});
If you set the border-collapse property to collapse, IE7 will show empty cells. It also collapses the borders though so this might not be 100% what you want
td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
border: 1px solid red;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
<td />
</tr>
</table>
The question asked for a CSS solution, but on the off-chance an HTML solution will do, here is one:
Try adding these two attributes to the table element: frame="box" rules="all"
like this:
<table border="1" cellspacing="0" frame="box" rules="all">
I just found the following. It's standards compliant but it doesn't work in IE. sigh.
empty-cells: show
I happened across this question and haven't seen any answers that really addressed the issue.
The problem results because IE7 does not see any internal content for the cell; in programming terms the cell is resulting as a null and like most things, you cannot border a null or perform any action on it. The browser needs an element/object that has a layout, in order to apply a border/layout.
Even empty <div></div> or <span></span> do not contain content, thus there is nothing to render, resulting in that null case again.
However, you can trick the browser into thinking the cell has content, by giving the empty div/span layout properties. The easiest way is to apply the CSS style zoom:1.
<table>
<tr><td>Foo</td>
<td><span style="zoom:1;"></span></td></tr>
</table>
This workaround is better than using a , since it doesn't unnecessarily mess up screen readers, and isn't misrepresenting the value of the cell. In newer browser you can use the empty-cell:<show|hide> alternative.
Note: in lieu of Tomalak's comment, it should be understood that hasLayout has nothing to do with null, it was merely a comparison of how the browser interacts and renders hasLayout similarly to how a database or programming language interacts with nulls. It is a strech, but I thought it might be easier to understand for those programmers turned web designers.
Ideally, you shouldn't have any empty cells in a table. Either you have a table of data, and there's no data in that specific cell (which you should indicate with "-", or "n/a/", or something equally appropriate, or - if you must - , as suggested), or you have a cell that needs to span a column or row, or you're trying to achieve some layout with a table that you should be using CSS for.
Can we have a bit more detail?
This question's old, but still a top result in Google, so I'll add what I've found:
Simply adding border-collapse: collapse to the table style fixed this problem for me in IE7 (and didn't affect the way they're displayed in FF, Chrome, etc).
Best to avoid the extraneous code of adding an or other spacing element when you can fix with CSS.
I guess this can't be done with CSS;
You need to put a in every empty cell for the border to show in IE...
empty-cell only fixed Firefox (YES I really did have this issue in Firefox) IE 7 & 8 were still problematic..
This worked for me in both Firefox 3.6.x, IE 7 & 8, Chrome, and Safari:
==============================
table {
*border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
==============================
Had to use the * to make sure the table style was only applied to the IE browser.
Try this if you can't use non-breakable space:
var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);
I create a div style that has the same font color as the background of your cell and write anything (usually a "-" "n/a" or "empty") to give the cell content. It shows up if you highlight the page, but when viewed normally looks how you want.
I use a mix of html and css to create cross browser table grids:
html
<table cellspacing="1" style="background-color:#000;" border="0">
css
td{background-color:#fff;}
I haven't seen any issues with any browsers so far.
"IE" isn't a useful term in this context anymore now that IE8 is out.
IE7 always does "empty-cells:show" (or so I'm told ... Vista).
IE8 in any of its "Quirks" or "IE7 Standards" modes always does "empty-cells:hide".
IE8 in "Standards" mode defaults to "empty-cells:show" and supports the attribute via CSS.
As far as I know, every other browser has correctly supported this for several years (I know it was added in Firefox 2).
I'm taking this from another website but:
.sampletable {
border-collapse: collapse;}
.sampleTD {
empty-cells: show;}
Use for the CSS for the table and TD element respectively.