Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    61
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Question Table Discrepancy: Firefox & IE

    I have this table:

    http://www.unitedfleetparts.com/mm5/...ct_Code=15-018

    The intended effect is to have 1 pixel black borders, and it shows right in FF. However, in IE, the borders are shown as 2 pixels!

    In my quest to further understand HTML & CSS, I am really interested to know why it shows right in FF and wrong in IE. Also, what modification(s) do I need to do in order to make my table borders in IE 1 pixel?

    Code:
    table.specifications {
      border-collapse: separate;
      width: 500px;
      margin: 0;
      border: 0 solid black;
      padding: 0;
      border-spacing: 1px;
      background-color: black;
      vertical-align: middle;
      margin-left: 0;
      margin-right: auto;
      text-align: center;
    }
    
    td.specifications_title {
      font-family: Arial, Helvetica, Verdana, sans-serif;
      color: white;
      font-size: 12px;
      font-weight: bold;
      font-style: normal;
      vertical-align: middle;
    }
    
    td.specifications {
      background-color: white;
      font-family: Arial, Helvetica, Verdana, sans-serif;
      color: black;
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      vertical-align: middle;
    }
    
    td.specifications_shaded {
      background-color: #cccccc;
      font-family: Arial, Helvetica, Verdana, sans-serif;
      color: black;
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      vertical-align: middle;
    }
    
    <table class="specifications">
      <tr class="specifications_title">
        <td class="specifications_title">
          Item #
        </td>
        <td class="specifications_title">
          Length
        </td>
        <td class="specifications_title">
          Price
        </td>
        <td class="specifications_title">
          Weight
        </td>
      </tr>
      <tr class="specifications">
        <td class="specifications">
          15-018
        </td>
        <td class="specifications_shaded">
          18 in.
        </td>
        <td class="specifications">
          $43.89
        </td>
        <td class="specifications_shaded">
          15 Lbs.
        </td>
      </tr>
      <tr class="specifications">
        <td class="specifications">
          15-024
        </td>
        <td class="specifications_shaded">
          24 in.
        </td>
        <td class="specifications">
          $56.68
        </td>
        <td class="specifications_shaded">
          15 Lbs.
        </td>
      </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not sure I'm seeing an issue here. The table border looks the same to me. Different browsers add default padding, margin, borders, and such to different elements. You can add a global css rule to reset, but I tried that and didnt seem to affect it.

    * {margin:-0; padding:0; border: none 0;}
    Teed

  • #3
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    61
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Yeah, I tried setting many global values to 0 and still no enchilada. BTW, I should've mentioned I'm using FF 5.0 and IE 8.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by JAG View Post
    Yeah, I tried setting many global values to 0 and still no enchilada. BTW, I should've mentioned I'm using FF 5.0 and IE 8.
    lol ok well FF5 might make a difference. I dont have it on this laptop. I do at work, but thats tomorrow, and I'm sure someone or you will figure it out by then.
    Teed

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
        <td class="specifications_title">
          Item #
        </td>
    You know we have the th element for this, right? (:


  •  

    Posting Permissions

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