• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 685
  • Last Modified:

CSS Table Display - Top Border Problem

Please reference the following page:

http://testing.270net.com/experts/Default.htm

When viewed in IE and FireFox there are different results as the top border in FireFox is approximately half the size as it is in IE.

Any ideas on how to make the FireFox representation similar to what is displayed in IE?
0
belly-buster
Asked:
belly-buster
  • 3
1 Solution
 
TheKyleCommented:
I'm not sure exactly why, but the top, left and right borders of your table are overlapping the edge of the page by 5 pixels each.  If you give the body 5px padding, then it shrinks the table down just enough to show the entire border of the table.
0
 
TheKyleCommented:
Here's a potential solution.  The only problem is that it works correctly in Firefox, but not in IE.  So, you could put this solution in your main stylesheet, and then create an IE only sylesheet that is included using conditional comments.

      .myClass {
            width: 100%;
            border-spacing: 0;
            border: 5px solid #ff0000;
      }
      
      .myClass td {
            padding: 0px;
            margin: 0px;
            font-size: 11px;
            font-family: verdana;
            border: 5px solid #ff0000;
            height: 28px;
            line-height: 28px;
      }

Check here if you're not sure what conditional comments are...

http://www.quirksmode.org/css/condcom.html

0
 
TheKyleCommented:
The solution above looks great in Opera and in Safari for Windows as well.
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now