XHTML strict vs HTML 4.01 strict DOCTYPE

wac

10-27-2006, 06:25 PM

This is a bit too subtle for me. I've got a web page with a fixed header, scrolling body table (a single table, not a composite), which works fine in IE with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"-->

However, we've got a company mandate to use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

and now the header is not fixed in IE. Firefox, of course works without problems. I used a CSS hack I got from http://www.alistapart.com/articles/zebratables/ a long time ago. Can't pretend to understand it, but unfortunately I need to now.

==CSS==
/* this is the only style required by CSS2 compliant browsers to make the table body scrollable
* while the header remains fixed
*/
.scroll_table > tbody
{
overflow: auto ;
overflow-x: hidden ;
height:100% ;
}

/* pretty stuff */

.scroll_table
{
border: 2px outset activeborder ;
width: 100% ;
}

.scroll_table thead th
{
background-color: activeborder;
border-left: 2px groove activeborder;
font-weight: normal;
padding: 2px ;
text-align: left
}

.scroll_table td
{
border-left: 2px outset activeborder ;
padding: 2px ;
}

/* fix issues with vertical scrollbar obscuring content in non IE browsers */
.scroll_table tbody > tr > td
{
padding-right: 15px ;
}
===IE specific CSS===
.scroll_container
{
border: 2px outset activeborder ;
overflow: inherit ;
overflow-y: auto;
/*
* (IE quirk)
* when width:100% is used, div is slightly wider than page,
* causing horizontal scroll bar. Don't know why.
*/
width: 98% ;
}

.scroll_table
{
border: none ;
}

.scroll_table thead tr
{
position: relative
}
.scroll_table thead th
{
position: relative
}
===== sample table =====

<table class="scroll_table" tabindex='0' cellpadding="0" cellspacing="0" width="100%" >
<thead >
<tr><th colspan="2" style='border-bottom:2px groove activeborder'>Span 2</th><th style='border-bottom:2px groove activeborder'>Span 1</th></tr>
<tr>
<th width="50%" style='border-left:none'>Tree</th>
<th width="20%" >Col 1</th>
<th width="30%" >Col 2</th>
</tr>
</thead>
<![if gt IE 100]>
<%-- only non-IE (eg firefox) --%>
<tbody style='height:150px'>
<![endif]>

<tr id='test1' ><TD >stuff0</TD><TD >col 2</TD><td >col 3</TD></tr>
<tr id='test1' ><TD >stuff1</TD><TD >col 2</TD><td >col 3</TD></tr>
<tr id='test2' ><TD >stuff1</TD><TD>col 2</TD><td>long text 0 1 2 3 4 5 6 7 8 9 q w e r t y u i o p</td></tr>
<tr id='test3' ><td >stuff2</TD><TD>col 2</TD><td>col 3</TD></tr>
<tr id='test4' ><td style="padding-left:40px">child 21</TD><TD>col 2</TD><td>col 3</TD></tr>
<tr id='test5'><td > stuff 22 with long text a a a a a a a a a a a a a a a a a</TD><TD>col 2</TD><td>col 3</TD></tr>
<tr id='test6' ><td >stuff23</TD><TD>col 2</TD><td>col 3</TD></tr>
<tr id='test7' ><td >stuff3</TD><TD>col 2</TD><td>col 3</TD></tr>
<tr id='test8' ><td >stuff2 with long text</TD><TD>col 2</TD><td>long text 0 1 2 3 4 5 6 7 8 9 q w e r t y u i o p</TD></tr>
<tr id='test9' ><td >stuff3</TD><TD>col 2</TD><td>col 3</TD></tr>
</tbody>
</table>

Arbitrator

10-28-2006, 02:57 AM

I’m guessing that with the old doctype declaration code, Internet Explorer was displaying in backward-compatibility (quirks) mode since the declaration should not have two hyphen-minus characters at the end.

/* this is the only style required by CSS2 compliant browsers to make the table body scrollable
* while the header remains fixed
*/
.scroll_table > tbody
{
overflow: auto ;
overflow-x: hidden ;
height:100% ;
}

[…]

/* fix issues with vertical scrollbar obscuring content in non IE browsers */
.scroll_table tbody > tr > td
{
padding-right: 15px ;
}I would refrain from using CSS exploits as exploits such as these are not forward compatible. For example, Internet Explorer 7 now recognizes the child selector and those rules will be read by that browser. Using conditional comments to serve IE-only code is a safer bet.

wac

10-30-2006, 03:18 PM

Oh, the --> at the end of the DOCTYPE was my cut/paste typo. I had one doctype commented out when trying the other and during copy/paste I missed removing that part. The original document does not have that.
The CSS IE6 specific hacks are only loaded via IE conditional comments.
I load a different CSS when the browser is not IE6

wac

10-30-2006, 08:41 PM

Apparently Arbitrator was correct. I don't think the --> was the problem cause that wasn't in the original code, but there were some other things that a validator barfed on. When I cleaned them up, the code works in IE XHTML strict.dtd. Thanx for forcing me to double check my stuff...

Beagle

11-02-2006, 07:31 AM

There is much discussion over whether to use XHTML or HTML.

I've been using HTML 4.01 strict mostly because IE 6 doesn't know how what to do with documents of the type text/xml which is how you're supposed to be serving XHTML documents, according to the standard. Which basically means you can't adhere to the standard and still have your pages render in IE6 (yes you can use the XHTML doctype in IE, but you can't serve pages the way they are supposed to be as defined in the standard)

Because of this, many professional web developers are using HTML 4.01 strict instead of XHTML.

Bill Posters

11-02-2006, 08:45 AM

Because of this, many professional web developers are using HTML 4.01 strict instead of XHTML.

At the risk of kicking up the dust…

I know that many of those developers will go on at length, imploring the use of XHTML markup as text/html, largely on account of there being so few, if any, tangible benefits to doing so, in their opinion.
But one question which doesn't really seem to get asked of them, or answered by them: what are the benefits of using HTML 4.01 (as text/html) over XHTML 1.0 (as text/html)?

In real terms, the parsity of tangible benefits afforded by XHTML as text/html don't seem to be addressed by 'reverting' to HTML 4.01.

(* The only perceivable 'benefit' demonstrated by some would be the sense of self-satisfaction at somehow managing to be that bit more pure, which supposedly leads them to consider themselves as superior. Ironically, this too often shows itself in the form of condescension, when the XHTML backlash largely seems to have risen out of a reaction to the condescension voiced by some XHTML (as text/html) users who looked down their noses at those 'still using HTML 4.01'.

I'm certainly not accusing you of these traits, Beagle. I'm glad to see that you seem more than comfortable making your remarks without bloating them with back-handed and partisan condescensions.)

(Fwiw, I'm one of those who do feel that there are small, but worthwhile benefits to working with XHTML markup, even if defaulting to text/html when served.
To turn the argument, I feel that there are no tangible benefits to using HTML 4.01 (as text/html) in preference to XHTML 1.0 (as text/html).)

rpgfan3233

11-02-2006, 07:43 PM

I use XHTML because I like to have control of my markup. I know exactly what is closed and what is left open. The P element in HTML makes no sense to me, honestly. It isn't an empty element, yet you can omit the end tag like BR or HR.

<P>Hello World!
<BR>

In XHTML, it would be closed as "<p/>Hello World!", which would mean "Hello World!" would just be text, without the p element containing it properly. But it is "<p>Hello World!</p>" actually, which makes sense, making the HTML version make no sense. :-P

Simply put, I know what my elements are doing in XHTML.