Help aligning table borders

Posted on 2007-10-02
Last Modified: 2012-05-05
Please visit the following site and look at the border around the bottom table. You will see that the right border does not quite line up with the right-borders of the tables above it. I've tried several things, but none have worked. How can I fix this so that the right borders line up? Thanks.
Question by:isaacr25
    LVL 8

    Accepted Solution

    the following site?

    Author Comment

    Sorry... here it is:
    LVL 8

    Expert Comment

    you shouldn't mix % widths with pixel widths in most cases. in the upper tables, you are using %100 for the table width, and in the bottom table, you use 766 pixels. that makes the difference, as the upper tables are not required to be 766 pixels wide. also, when you give a width to a table, the cell widths will be in the second plan. they can increase the width of the table, but not decrease.

    so begin with a new, simpler design, make all the tables 766 pixels wide, with no % widths. after that, watch the page in every step to see if the addition breaks the table widths. you can for example, make a table with xxx pixels wide, and put a table in it using %100 width. but don't mix different type of values in one table.
    LVL 70

    Assisted Solution

    by:Jason C. Levine

    Mr. Robot is right.  Another tip would be to get Firefox and the Web Developer extension for it.  With that, you can outline every table on the page and use that to see where something has gone rogue and is taking your design in the wrong direction.

    When I used it on your site, I notice that there is something next to the footer table that is one or pixels wider than the rest of the elements.  That's what causing the break.
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    759 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

    11 Experts available now in Live!

    Get 1:1 Help Now