The IE border-spacing workaround (19/07/2012

Everyone knows these two HTML table tag attributes: cellpadding and cellspacing. And everyone hates the annoying necessity of these attributes in the CSS era. Well, developers, who has looked after what's up now about this issue, have learned that fortunately the cellpadding attribute is safely substitutable with the padding value of the table cells.

But what about cellspacing?

Cellspacing can also be omitted if you work with the border-collapsing model, because IE supports this model in CSS. (Or maybe not; we'll come back to this later.) Anyway, just put border-collapse: collapse in your table's style, and all the space between your table cells will be gone, and the adjacent borders will collapse to one simple border.

(For those of you who didn't fully get the picture, here is a nice illustration of the two border models.)

Problems will arise when you want to use the separated borders model. In this mode the CSS engine (browser) is expected to apply the td border styles separatedly to every single table cell, just as these were simple divs. We can think of this as the normal behaviour, and the collapsing model as a special case, if only because that the former is the initial (default) value in the CSS specs. When you're in the 'separate' model, you can control the space between your table cells with the border-spacing value of the table. You can set the horizontal and the vertical spacing.

But the problem is that IE doesn't support the CSS border-spacing attribute. Instead it puts a fixed 2px space between the cells. This is the point, where normally a developer gives up, becomes a bit melancholy, and puts back the cellspacing attribute into the HTML code. The conclusion: cellspacing can't be controlled by CSS (cross-browser).
 

Some good news

However, there is some consolation: generally you don't need that. Usually we only need to eliminate that bad looking space between the cells, and this can be achieved by CSS, even in IE. And the good news is that not only in the 'collapse' model but even in the separated!



Say, we want a table, in which all table rows have a red 1px bottom border, and a pink 1px top border (we want it to look a bit like buttons). 'Collapse' model is not an option now. This is a situation, where we have to use the 'separate' model with 0-width border-spacing between the cells.



For this the standard CSS code is as follows:


table {
border-collapse: separate;
}

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;
}

It works in the standard compliant browsers, but what about IE?



That's a Feature, Not a Bug

Thankfully, IE is so buggy, that one bug helps to fix an other. So, what to do if I want to achieve a zero-spacing separating model? Exploit the bugs in the collapsing model! IE's border collapsing works fine, but magically gets switched off, if you give a 'position: relative' style to the table cells. If you do this, the browser jumps back to the

separated model, width 0 cellspacing

! Thx, Mr. Bug.


table {
border-collapse: separate;
border-spacing: 0;
*border-collapse: collapse; /* hack is needed for IE7 also */
}

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;
*position: relative;
}

This way, you don't need any of those ugly HTML tag attributes, while working in either a collapsed, or a 0-cellspacing separated borders model. Have fun!



UPDATE

knakts noted in his comment that this workaround provides solution only to those cases in which the border-spacing value is zero. And I felt sympathy for him/her. Thus, as a matter of urgency, I researched another workaround, which brings us closer to the heaven.



Here it is:


table {
border-collapse: separate;
border-spacing: 5px;
*border-collapse: expression('separate', cellSpacing = '5px'); /* <=== THIS IS REALLY A MAGIC */
}

Still not perfect, because you can't differentiate vertical and horizontal spacing, but, as I said, one small step to the happiness.

 
Khách hàng mới nhất
Đăng ký nhận khuyến mãi
Tư vấn trực tuyến
Dịch vụ Tin học
Y!M:  
Skype:  Skype Me!
Mobile:  0903028978 (a.Long)
Dịch vụ Kế toán
Y!M:  
Skype:  Skype Me!
Mobile:  0983068614 (c.Uyên)
hoặc sử dụng trang liên hệ
CSS Font-Size: em vs. px vs. pt vs. percent (27/08/2012

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.

CSS Arrows and Shapes Without Markup (22/08/2012

Often it’s useful to show an arrow or some sort of contextual indication of what element something is related to. We see this frequently with tooltips that use arrows to point to the item that is triggering them.

The IE border-spacing workaround (19/07/2012

Everyone knows these two HTML table tag attributes: cellpadding and cellspacing. And everyone hates the annoying necessity of these attributes in the CSS era. Well, developers, who has looked after what's up now about this issue, have learned that fortunately the cellpadding attribute is safely substitutable with the padding value of the table cells.

But what about cellspacing?

The differences between the GPL, LGPL and the BSD (22/08/2011

There are a lot of different open source licences out there, and it can sometimes be a bit confusing if you're not intimate with the details of each one. So here's a quick roundup of three of the most popular licenses and the difference between them.

Just a quick disclaimer - I'm not a lawyer, so don't depend on my explanations on the licences here. All the usual disclaimers apply.

Trang: 1 2 3 ››