TD width increasing normal percentage under Safari / Chrome

Posted on 2009-02-09
Last Modified: 2013-12-07

I got a light problem but which is very "strange". Here it is :

I got a table with 3 columns : left and right have a width of 23% each while the middle column having the remaining space. Everything looks good under IE, FF, Opera.

But for some reason, under Safari 3.2.1 & Chrome, my right column has a wider space than it normaly must have ! In fact, it expand and take the space of the middle column which normaly is my main part of the site. Anoying...

Even better ; I tried to fix it with javascript solutions after the page has loaded and it didn't work either.

You can check that at this address :

Does anyone ever faced this problem ? Have you solved it ?
Question by:humer2000
    LVL 39

    Expert Comment

    Looking at the CSS .. I note that if you change the width of #columnRight from 23% to 200px, then it adjusts properly.  This would imply that the % division of columns is not completely valid.

    I see that in the top row of the table  .. you have td#columnTop .. which has a Colspan = 2.

    This double width column at the top of the table (with no fixed width or %) .. has the effect of messing up the columns that come beneath.
    LVL 1

    Author Comment

    Yes, that's true for the fixed width, I've done it.

    There's normally no problem with the td#columnTop colspan="2" as it is equal to td#columnMid & td#columnRight.

    But, is percentage a recursive problem under Safari &/ Chrome ?

    Sure, it solve my problem but I'm always trying to make a website easily updated ; if I want to change de width of my mainpart, I only have to change 1 setting. Putting fixed values is not going on this direction...
    LVL 39

    Accepted Solution

    Safari & Chrome use the WebKit rendering engine which differs from the ones used by Firefox, IE and Opera (each of these also has their own particular flaws too).

    % widths can be tricky when you use colspan or rowspan in the same table.

    Either add a Chrome/Safari CSS rule to set a width in pixels .. or consider using a slightly different layout with nested tables.
    LVL 1

    Author Closing Comment

    Thanks for the tip ! ;)

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Now-a-days, indirectly, postal services have been replaced by email services. Yes, whenever we hear the word "email" a lot of people only think of gmail. Some people still think that email and gmail are one and the same thing :-). Let's see some …
    Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
    How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

    754 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

    23 Experts available now in Live!

    Get 1:1 Help Now