Is there any way to control the order of which the GridView control renders it's thead, tbody and tfoot child elements?
According to W3C, the correct order is:
thead
tfoot
tbody
The GridView control renders out:
thead
tbody
tfoot
I am extending the GridView control, and I'm using the "first column controls the width of all columns" approach. But if the W3C specifications are not met (thead -> tfoot -> tbody) all hell breaks loose.
I've been reading up on this issue, and it seems that the GridView control has no support for this yet--it's planned though. Even so; I bet there must be some way to counter this sketchy implementation.
Any and all help apreciated.
If you need strict W3C Validation of your HTML (you must have a valid reason), you better not use ASP.net server controls, because you don't have any control on the HTML they generate.
I bet that this little problem is just the tip of the iceberg of the problems that you will find later.
I would imagine that any HTML generated by a Microsoft class will 100% definitely break validation and only work with it's Internet Explorer.
Write your own implementation - or find some Open Source class that will take care of it properly.
This is not yet possible. Although Microsoft is planning this feature for a future release.
Related
Ok so I need to add a background color to the last row in the all the tables except the last table where I need to add a background color to the last three rows.
table tbody tr:last-child
table:last-child tbody tr:nth-last-child(-n+3)
How do I make this work in IE7 and IE8?
Preferably a CSS-only solution. Will a solution like Modernizr solve this? I prefer not to travers the dom with jQuery and add custom classes/styles with my own script.
short answer: no to a css-only solution;
modernizr isn't going to give the css engine in old ie any additional features. Your best bet is to either a) add classes to the rows you want styled differently or b) do it with javascript. If you are generating the tables dynamically (with php, for example) then adding classes there is easier.
CSS-only solution not possible, you are dealing with browsers that are way too old. On the upside, you don't need your own script as Selectivzr does just this, or alternatively the all-in-one solution that is IE9.js (fixes a ton of other IE bugs, not just add new selectors).
Does XHTML have an 'opinion' regarding the use of <thead>, <tfoot> and <tbody>?
Is there a case where they should be used?
Thank you.
They allow you to add semantics to your table, and also allow you to style the head and the foot of the table without introducing redundant classes/ids.
I can't think of a situation where you have to use it, although I know some jQuery plugins use the head & foot to control behaviors.
If your tabular data needs headings and summary rows, use them, if not don't
The thead, tbody, and tfoot elements
in HTML are used to group table rows
into logical sections based on their
content. There are two main reasons
you'd want to do this:
To allow the body to be scrolled independently of the header and/or
footer
To make it easier to apply different style rules to the
different sections of the table.
as stated here What is benefit of <thead>
If you are using tables to make layout then don't use these. If you are showing tabular data then use it.
And if you don't have anything to put in tfoot then don't add this.
You will find some good answers here also What is benefit of <thead>
The only rules, that I'm aware of, is that the thead (if used) must be defined first, and the tfoot (if used) before the tbody (somewhat counter-intuitive, to my mind, but them's the rules).
I think that the purpose of thead is partially for print purposes, allowing columns printed on a second page to have the thead repeated, in order that the data makes more sense.
In theory it could also allow for a scrolling tbody in the case of long tables, with fixed headers:
This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.
Source: http://www.w3.org/TR/html401/struct/tables.html#edef-TFOOT
This does not, however, work currently (without using at least two tables, I think).
The largest benefit, though, as #Glenn Slaven notes, seems to be semantic.
body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.
I have a aspx page that looks something like this:
<table runat="server" id="tblTEst">
<tr id="trHeader" runat="server">
</tr>
<tr id="trRow1" runat="server">
</tr>
<tr id="trRow2" runat="server">
</tr>
</table>
When I write my JQuery to say get a count of s, I need to do:
alert($('#' + strTableId).children('tbody').children('tr').length);
My question is when does the TBODY get added? When I do a InnerHTML, I do see the TBODY. I was wondering if this is something ASP.NET does?
EDIT
Thanks for the answers. If it's added by the browser, do I need to worry about testing the code in multiple browsers to ensure compatibility of JQuery? I was under the impression, JQuery is compatible with all browsers and I would'nt have to worry about testing the code on different browsers.
It's neither ASP.Net nor jQuery, it's your browser. jQuery accesses the DOM of your page which is built by your browser based of the HTML code generated by ASP.Net. For tables, when it is not explicity declared, a TBODY element is added to hold "body" rows (TR) of a table.
It's something the browsers do, as part of the process of cleaning up the HTML while building the DOM. The standard specifies that TR elements must occur within a TBODY, THEAD, or TFOOT element, and since you specified none of those, the browser helps you out by adding one for you.
If you wish to ignore this, you can re-write your expression as:
alert($('#' + strTableId).find('tr').length);
...But, you would do well to explicitly wrap your rows in TBODY so as to avoid confusion in the future.
The best thing would be to properly construct your table with a tbody on the server side. Then, you wouldn't have to worry about inconsistencies between browsers.
I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.