force IE to use CSS2?

**jbot** · May 24, 2005 12:37

I have a table that is styled with CSS.
each row's TD has a border-bottom, and the entire table has its own border.

The last row collides with the bottom border of the table. I'm using CSS2 to fix this:

Code:

table>tr:last-child td{
border:none;
}

now, as you can guess, i'm running into issues with IE. (SURPRISE!)

so i have a solution where i manually tag the last LI with something like .lastItem

Since this page will be the template for most pages in a CMS, I dont want to leave it to the editor (either the content person or the CMS itself) to remember to put the class on the last item. Also, I'm trying to avoid the issue of an edit to the classes where another item is added to the table.

Does anyone know of a method to fool IE into behaving? I started to write some DOM scripting that began to work, but I ran into issues identifying the rows.
any other ideas?

**all4nerds** · May 24, 2005 12:46

Hello

maybe to simple leave bottom border out ?

table{
border-style: solid;
border-color: #39c;
border-width: 1px 1px 0px 1px;
}

**jbot** · May 24, 2005 12:48

they have different borders.
the table is a light thin line and the rows have a dotted line between them.

**zcorpan** · May 24, 2005 15:45

If you use text/html, table>tr doesn't match anything because there is a TBODY in between (even if you don't have the tags in the markup).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>:last-child in IE (and Opera)</title>
  <style type="text/css">
   tr:last-child td { background:lime; }
   tr.last-child td { background:lime; }
  </style>
  <script type="text/javascript">
   window.onload = function(){
    var tbodies = document.getElementsByTagName("tbody"), i = tbodies.length;
    while(i--){
     var trs = tbodies[i].getElementsByTagName("tr");
     trs[trs.length - 1].className += " last-child";
    };
   };
  </script>
 </head>
 <body>
  <table>
   <tbody>
    <tr><td>foo</td><td>bar</td></tr>
    <tr><td>baz</td><td>quux</td></tr>
    <tr><td>thud</td><td>grunt</td></tr>
   </tbody>
  </table>
 </body>
</html>

Edit:

Oh, and :last-child is CSS3.

**jbot** · May 24, 2005 20:10

Thanks! great post, i'll try to apply it tomorrow.

The page is written in XHTML1.1; I'm serving capable browsers application/XML and the rest text/html.

i wrote an almost identical script, but seemingly more complicated since i tried to walk down the XML tree using the XML nodes: childNodes/lastChild, etc.

I did run into problems with IE finding TBODY instead of the TR, as you stated, and also had issues with FF finding that the last 2 children were text nodes (i'm assuming the line-breaks in the code.)

So, according to your post i would have to modify the script you gave me to test for capable browsers or simply test for the existence of TBODY:

Code:

if (document.getElementsByTagName("tbody")){ 
      //html
     var tbodies = document.getElementsByTagName("tbody");
}else{
     //XML 
     var tbodies = document.getElementsByTagName("table");

} 
var  i = tbodies.length;
while(i--){
     var trs = tbodies[i].getElementsByTagName("tr");
     trs[trs.length - 1].className += " last-child";
};

I havent tested it because the files are at work, (tomorrow)
now, this addresses the issue of the browsers, sort of.

I'm assuming that:

if a browser is capable enough to parse xhtml1.1 properly,
it should ALSO understand CSS3 rules.

I don't really know if thats true!

I would like to cover all my bases, but i also dont want to add a className to a page that is obeying the CSS rule in the first place; I'd like to leave advanced browsers alone

any ideas?

**Kravvitz** · May 24, 2005 22:36

http://dean.edwards.name/IE7/

**zcorpan** · May 25, 2005 00:41

You could short it down to this:

Code:

var tbodies = document.getElementsByTagName("tbody") ? document.getElementsByTagName("tbody") : document.getElementsByTagName("table");
var i = tbodies.length;
while(i--){
     var trs = tbodies[i].getElementsByTagName("tr");
     trs[trs.length - 1].className += " last-child";
};

...or simply add <tbody> to the markup.

I'm assuming that:

if a browser is capable enough to parse xhtml1.1 properly,
it should ALSO understand CSS3 rules.

I don't really know if thats true!

It's not true. A UA may support XHTML fully, but no CSS at all (like Lynx, it has good support for HTML4 but has no use of CSS at all). Likewise, another UA may support much of CSS3 but no XHTML.

I would like to cover all my bases, but i also dont want to add a className to a page that is obeying the CSS rule in the first place; I'd like to leave advanced browsers alone

any ideas?

If you only wanted to target IE you could use conditional comments, but since Opera also don't support :last-child, you might want to run the script there as well. Firefox users won't even notice.

**jbot** · May 25, 2005 11:30

ok, this solved my problems with FF and IE, but not with Opera.

in FF, the tertiary switch passes 'table', which then resolves to 0 when its length is measured, barring it from the loop.
I'm not that familiar with Opera, but judging by the header and the way the JS worked its reading the XHTML 'properly'.

but since Opera also don't support :last-child, you might want to run the script there as well.

SO, now the first hurdle was reached, i guess i need to run the script for XHTML, factoring in the issues i had yesterday with the line-breaks and whitespace.

How would I go about this?

**Kravvitz** · May 25, 2005 12:01

You could check "<objRef>.nodeType==1".

http://www.w3schools.com/dom/dom_nodetype.asp

So everybody ignored my link?

**jbot** · May 25, 2005 12:03

i didnt ignore it, i just didnt understand the relevance of the link.
what's it for?

**Kravvitz** · May 25, 2005 12:17

This is more specific. Perhaps you will see the relevance now.

http://dean.edwards.name/IE7/compati...ast-child.html

**jbot** · May 25, 2005 12:23

so, i'm gathering that you're telling me that ie7 is coming out soon, and it will support advanced selectors?
is that what you're getting at?

I'm not sure how this helps me now.

I'm sorry if i'm still not getting the point of your post, you'll have to provide more than a link.

**Kravvitz** · May 25, 2005 12:27

*sigh*

It's a JavaScript patch to make IE act like it supports more CSS2 and CSS3 things than it normally does.

http://dean.edwards.name/IE7/intro/
http://dean.edwards.name/IE7/overview/

I assume it was named IE7 during the time that Microsoft had claimed that IE6 was the last major version.

**zcorpan** · May 25, 2005 12:34

Hmm... That's strange. For XHTML in Opera, it seems like you have to use:

HTML Code:

<body onload="lastChildren();">

And then:

Code:

function lastChildren(){
 var tables = document.getElementsByTagName("table"), i = tables.length;
 while(i--){
  var trs = tables[i].getElementsByTagName("tr");
  trs[trs.length - 1].className += " last-child";
 };
};

(You don't have to check for TBODY, this works aswell.)

**jbot** · May 25, 2005 12:40

OK, i think i got it working on most broswers, I didnt test on my mac (she's a little under the weather).

Code:

var tbodies = document.getElementsByTagName('tbody').length ? document.getElementsByTagName('tbody') : document.getElementsByTagName('table');
var i = tbodies.length;
//alert("tbodies="+i);
while(i--){
   var trs = tbodies[i].getElementsByTagName("tr");
   trs[trs.length - 1].className += " last-child";
   //alert( trs[trs.length - 1].className);
        }

basically, i modified zcorpan's code by adding '.length' to the tertiary conditional.
I'm not really sure why, but FF and OP eval 'document.getElementsByTagName('tbody')' as true, and grab tbody, instead of table. i put .legth in there to test to see if tbody REALLY exists.
It seems to work for IE OP and FF.

I'll try to modify the code to include removing the border from the first/last list-item in a horizontal navbar, or similar instance. I'd rather not place 'class="first"' into my code, in the event that the defacto browser behaves properly, I'm not going to go thru all my content pages and remove it.

zcorpan, doyou see any issues with this approach?

**jbot** · May 25, 2005 12:43

Originally Posted by Kravvitz

http://dean.edwards.name/IE7/intro/
http://dean.edwards.name/IE7/overview/

now THOSE links make more sense! thank you for showing me that. i'll investigate it further.
thanks

User Tag List

Thread: force IE to use CSS2?

Thread Tools

Display

force IE to use CSS2?

Bookmarks

Bookmarks

Posting Permissions