CSS Border-collapse in conjunction with dotted border

Question

I'm working on the following website which uses a dotted border (applied to table cells) to contain most of the website content.

It works fine overall, but there's a small issue in Chrome where the two collapsed dotted borders sometimes make up one solid border (Fig 1); an example of this can be found on the Signatories page at the bottom.

A similar effect applies to Internet Explorer also, however it's more consistent and rather than the line being solid, it seems like every n ^th dot is doubled up (Fig 2).

Is this a known issue that has an easy enough to implement solution?

---

Fig1:

Fig2:

---

Note on me using tables for this

Please don't spam me with "you shouldn't use tables for layouts" - I'm fully aware of that.

There are a few prime reasons that I'm doing this:

1. The site is built in Business Catalyst (a content-management system) and the client needs to be able to easily add cells for extra content, etc using the WYSIWYG editor in the system.
2. This particular project has extremely tight deadlines and thus needs to be built as quickly as possible (tables make it a little quicker, especially with all the pages with all the varying cell amounts, widths, heights, etc etc).

Answer 1

border-collapse is your culprit.

I ran into this issue with a dotted bottom border is a table (that was actually a table, not a layout).

First, set "border-collapse: separate;"

Anything with a border, set the border;

Then set the border width to 0px for anything that did not have a border.

That should get you there for Chrome.

Answer 2

Jon P makes a good point you really shouldn't use tables for layout. That being said I understand that sometimes it's necessary.

From the looks of it the problem in chrome lies with the colspan of the td's which are even more evil for tables layout.

Recommendation:

Don't use colspan on the bottom just style a specific border-left: none; For the first person create a new table and set the width on that table to the same as the original table, set the width of the last column on both the new table and the original and then make sure that you set border-top: none for the first row of the original table.

Or better yet convert to a div layout. If you interested in converting let me know I am pretty sure I could work it up in about 20-30 minutes.

As for IE everything looks good in IE9 in default mode, in compatability mode (IE8) it looked like there was a problem with the first colspan on the bottom.

/ --- EDIT --- /

If you are allowing the client to modify the code(perfectly acceptable) then you really only have a couple of options since this is a render problem with the browsers.

1. Add a javascript file to the site or add a javascript code to the .js file on the site that parses the DOM and adds a style to any td with the attribute colspan which handles the border;
2. Create a token for anytime the client want's to use a colspan (not ideal);
3. Let them know what the problem is and switch to a solid border;
4. Don't use borders use a sprite style dotted border image

I don't think that any of these solutions are truly ideal but when you let the customer modify the site you limit yourself when problems arise.

Answer 3

Set up border-top and border-left to be dotted 1px, and right and bottom to be none. Then add right and bottom borders to container.

ps: don't use tables for layout, unless you are laying out a true table! it has very bad effects on rendering speed, its NOT cross-browser (contrary to what most people think and say) and its hard to maintain.