CSS Table Display - Top Border Problem

Posted on 2007-09-28
Last Modified: 2013-12-07
Please reference the following page:

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?
Question by:belly-buster
    LVL 6

    Expert Comment

    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.
    LVL 6

    Accepted Solution

    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...

    LVL 6

    Expert Comment

    The solution above looks great in Opera and in Safari for Windows as well.
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
    SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now