#1
  1. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,306
    Rep Power
    785

    Border Collapse in IE making border dissapear!


    Hello,

    The border-collapse style works perfectly in FF but in IE the bottom border dissapears entirely. This is not the desired effect - I'd like just the bottom border produced by the last table data cell to be collapsed into the table border. The help online seems to think I want this - have a hard time specifying this exact case.

    Here is the code that generates the cells based on a number of questions:

    php Code:
     
    <table border="0" cellspacing="0" cellpadding="3" style="margin-top: 50px; border: 1px solid #808080; border-collapse: collapse;" width="50%">
      <tr>
        <td colspan=5 id="thinBorder" style="font-size: 10pt; background-color: #909090; color: #ffffff;"><b>CSI Question List</b></td>
      </tr>
     <?php for ($i = 0; $i < count($aQuestions); $i += 2): ?>
      <tr>
       <td valign="top" style="border-bottom: 1px solid #808080; font-weight: bold; width: 30px;">Q<?php echo ($i + 1); ?></td>
       <td valign="top" style="border-bottom: 1px solid #808080;"><?php echo ($aQuestions [$i]); ?></td>
       <td style="width: 40px; border-bottom: 1px solid #808080; border-collapse: collapse;">&nbsp;</td>
       <?php if (isset($aQuestions[$i + 1])): ?>
         <td valign="top" style="border-bottom: 1px solid #808080; font-weight: bold; width: 30px;">Q<?php echo ($i + 2); ?></td>
         <td valign="top" style="border-bottom: 1px solid #808080;"><?php echo ($aQuestions [$i + 1]); ?></td>
       <?php endif; ?>
     </tr>
     <?php endfor; ?>
    </table>
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  2. #2
  3. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,306
    Rep Power
    785
    Any suggestions? I want to try and avoid a test for the last row and then programatically adding or removing the border. I feel like this should have a css solution.
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,003
    Rep Power
    376
    you could do tr:last-child (use the css pseudo code: :last-child) or you may use Jquery/JS to attach a css rule to the last row,

    having said that, i tried this with sample data and the table looks SAME in both IE & FF
  6. #4
  7. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,306
    Rep Power
    785
    Does your data-set have 7 questions? Heres what mine looks like in IE - the attached "table.png"

    Also having issues still using last child - for some reason IE blows away the right border - this is all very confusing.

    Here is some styles and new table after trying the last-child - image result is "table-lastchild.png"

    php Code:
     
      table.qtable {
        width: 50%;
        margin-top: 50px;
        border-collapse: collapse;
        border: 1px solid #808080;
      }
     
      tr.borderbottom td {
        border-bottom: 1px solid #808080;
      }
     
      table.qtable tr:last-child td {
        border-bottom: none;
      }
     
     
    <table class="qtable" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td colspan=5 id="thinBorder" style="font-size: 10pt; background-color: #909090; color: #ffffff;"><b>CSI Question List</b></td>
      </tr>
     <?php for ($i = 0; $i < count($aQuestions); $i += 2): ?>
      <tr class="borderbottom">
       <td valign="top" style="font-weight: bold;">Q<?php echo ($i + 1); ?></td>
       <td valign="top"><?php echo ($aQuestions [$i]); ?></td>
       <!-- <td >&nbsp;</td> -->
       <?php if (isset($aQuestions[$i + 1])): ?>
         <td valign="top" style="font-weight: bold;">Q<?php echo ($i + 2); ?></td>
         <td valign="top"><?php echo ($aQuestions [$i + 1]); ?></td>
       <?php endif; ?>
     </tr>
     <?php endfor; ?>
    </table>
    Attached Images
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  8. #5
  9. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,306
    Rep Power
    785
    Anyone have any ideas? Still struggling with this. Help will be appreciated!
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Since you asked me to look at this in a PM, I'll explain why I hadn't posted a reply to this question. While this may be a bug in IE, I think that a <table> is not the best way to mark up the content, so I have not felt like spending the time to find a workaround for this issue. To me an <ol> or a <dl> would be more appropriate. Using either of those, you could even use "CSS Generated Content" to show the "Q1", "Q2", etc. (assuming the numbers start at one and are completely sequential, which seems to be the case).

    What's the oldest version of IE that you want to fully support?

    Code:
      <tr>
        <td colspan=5 id="thinBorder" style="font-size: 10pt; background-color: #909090; color: #ffffff;"><b>CSI Question List</b></td>
      </tr>
    That is just plain poor markup. At the very least, the <td> and <b> could be replaced with a <th>. However, a better option would be to use the <caption> element or to use a heading (e.g. <h2>) before the table.
    http://reference.sitepoint.com/html/caption
    https://developer.mozilla.org/en-US/...lement/caption
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Recovering Intellectual
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2006
    Location
    Orange County, CA
    Posts
    1,306
    Rep Power
    785
    The markup was done by another developer - so I had thought this could be done by using css on the existing HTML. But you are probably right, better markup would definitely make it easier to comprehend.

    I believe the earliest version we are trying to support is IE8 - unfortunately I've discovered the last:child psuedo selector is not supported in IE8. So that leaves me here. I can try working something up using an ordered list as you've suggested.

    I appreciate you taking a look and did not expect a work-up of a work-around - just some direction on why this is happening and what I could try to fix it myself.
    Bugs that go away by themselves come back by themselves
    Beware - your loyalty will not be rewarded
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    You're welcome.

    I had forgotten, but "border-bottom: hidden" would be better than "border-bottom: none". More info: http://reference.sitepoint.com/css/border-style

    Table oddities aren't something I spend much time dealing with. I've actually had a thought, though, of a possible solution to this table border issue. Why not use a top border instead? IE8 does support ":first-child", if you need it. (However, I still recommend using better markup.)

    The markup was done by another developer [...]. But you are probably right, better markup would definitely make it easier to comprehend.
    Mixing code from three (or more) languages like that is best avoided.

    I believe the earliest version we are trying to support is IE8 - unfortunately I've discovered the last:child psuedo selector is not supported in IE8.
    IE8 supports very few CSS3 features, none of which are ":last-child", as you've seen. MS focused on improving CSS2.1 support in IE8 and then adding CSS3 features in IE9.

    Comments on this post

    • Matt1776 agrees : Thank you - found the solution using orderd list
    Last edited by Kravvitz; April 23rd, 2013 at 07:56 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo