Ok strange behavior when it should work:
The problem is if I don't declare a doctype the CSS works in IE 6 & 7 but if I declare the DOCTYPE it doesn't work. Why???
jQuery:
$('tr:first-child').children().css({
'width': settings.minWidth + 'px',
'height': settings.tableHeaderHeight + 'px',
'overflow': 'hidden',
'white-space': 'nowrap',
'color': 'blue'
});
HTML w/ DOCTYPE - Please view in Firefox and IE 6 & 7 to see the table header difference
HTML wo/ DOCTYPE - Please view in Firefox and IE 6 & 7 to see the table header difference
DOCTYPE I'm declaring:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
So after a helpful comment I found that quirks mode is being used when I don't add the DOCTYPE, which is the CSS effect I want but with a DOCTYPE, Ugh!!!
any work arounds? Suggestions?
Solution, YEAH!!!
jQuery
// This adds a div tag around the table header text
// - IE white-space bug in standard mode
$('table.className tr th').wrapInner(
"<div class='ie_correct_header_whitespace'></div>"
);
CSS
.ie_correct_header_whitespace {
white-space: nowrap;
}