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 want to do a portion of a form look like a spreadsheet.
There are several forms and <table> is thus not viable (though I'm not against it when you do are printing semantically tabular data, as it is the case).
So I tried to simply use a CSS2.1 layout directly with the form input elements, eg.
<div class="table">
<form class="tbody">
<div class="tr">
<label class="td">Label</label>
<input class="td" name />
<input class="td" name />
</div>
</form>
</div>
Full example in the fiddle.
But it looks like display:table-cell does not work on <input> elements!
If you check in Chrome "Computed Style" the display will be "inline-element".
But I did not find anywhere why it shouldn't:
Mozilla Dev Network CSS:display
W3C CSS 2.1 Recommendation Visual Formatting Model
W3C Tables Recommendation
Any idea?
It sounded so much better than having some <div class="cell"> around the <input> and then having to play with box-model to get it look nice...
From W3.org:
"CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further."
Sorry, but display: table-cell on input elements is treated experimental. Try to avoid it, use wrapper-elements for the positioning for example.
I've made an example with div elements. You can now have multiple forms within a table, however it only works when the form element spans full rows. Otherwise your nesting will be broken.
EDIT:
Updated the fiddle with a version where border-collapse is added to avoid double borders.
JSFiddle example
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).
Here's what I've got. I have a tree in GWT set up to process only a certain level depth of children, retrieving from the server and only updating according to which children one clicks. I am familiar with addStyleName() functions and I have used this to style the foreground color of certain tree nodes, and it has appeared successfully on previous versions of my project (without the server calls).
The question boils down to if any of you familiar with GWT know any reason why my custom CSS would be overridden on a child update of a node. So for example, when the server processes a node, it shows up in my proper CSS color, but once the server shows that it has children, it does the addItem() to that node and the CSS of the text color of the parent is reverted back to default.
This is all under the assumption that I have no removeStyleName() calls or any deleting/recreating going on. Anyone familiar with a situation like this?
Thanks!
EDIT: Here's some code I've narrowed it down to
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<p>blaghblagh</p>
<div class="Foreground1">
hey
<table style="white-space: nowrap;">
<tbody>
<td style="vertical-align: middle;">
<div style="display: inline;">
ContinuingPromise '08
</div>
</td>
</tbody>
</table>
CSS:
body{
color: black;
}
.Foreground1{
color: green;
}
If you put this code up, you'll see the ContinuingPromise as black, although it is within the foreground div which should be green. Also, the word 'hey' will appear green. Am I missing something basic? Thanks again
I'm not sure if this solved your original question, but the color problem is very likely caused by the doctype you're using. If the html page uses quirks mode, the style properties are not correctly inherited by the table. See http://reference.sitepoint.com/css/inheritance. Setting a doctype or different doctype might solve your problem. If you are using any of the GWT layout panels you need to set the doctype to <!DOCTYPE html>, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Standards
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.