[Last Call] Learn how to a build a cloud-first strategyRegister Now


TD width increasing normal percentage under Safari / Chrome

Posted on 2009-02-09
Medium Priority
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 : http://cybershop.fr/shopcustcontact.asp

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

Expert Comment

by:Eoin OSullivan
ID: 23589850
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.

Author Comment

ID: 23590574
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 41

Accepted Solution

Eoin OSullivan earned 375 total points
ID: 23590957
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.

Author Closing Comment

ID: 31544476
Thanks for the tip ! ;)

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

834 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