SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question force IE to use CSS2?

    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?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    maybe to simple leave bottom border out ?

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

  3. #3
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    they have different borders.
    the table is a light thin line and the rows have a dotted line between them.

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by zcorpan; May 24, 2005 at 15:23.
    Simon Pieters

  5. #5
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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:
    1. if a browser is capable enough to parse xhtml1.1 properly,
    2. 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?
    Last edited by jbot; May 24, 2005 at 19:14. Reason: additions

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    1. if a browser is capable enough to parse xhtml1.1 properly,
    2. 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.
    Simon Pieters

  8. #8
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could check "<objRef>.nodeType==1".

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

    So everybody ignored my link?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i didnt ignore it, i just didnt understand the relevance of the link.
    what's it for?

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is more specific. Perhaps you will see the relevance now.

    http://dean.edwards.name/IE7/compati...ast-child.html
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)
    Simon Pieters

  15. #15
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  16. #16
    SitePoint Enthusiast jbot's Avatar
    Join Date
    Apr 2005
    Location
    New York, NY
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now THOSE links make more sense! thank you for showing me that. i'll investigate it further.
    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •