Why are definition lists so hard to style?
They are proving very problematic on current browsers. I uderstand that <dl> and <dd> are block level tags while <dt> is inline. However they do not behave at all as expected when styled.
For example can anyone solve this issue regarding Definition Lists: Table display as shown on MaxDesign.com.au. At first glance it looks bullet proof but it can easily broken by having more text in the <dt> than the <dd>. I have tried making the <dt> block and clearing.
Does anyone know of a fix?
Johan De Silva / Portfolio
Share: 
Johan, when I added more text via Firebug, the list still displayed nicely; am I missing something?
Share:
Yeah I missed something. You have to use IE6 or IE7. Fixed in IE8. That still sucks considering most people use IE7 and IE6.Johan De Silva / Portfolio
Share:
Ah, now I see what you mean.
I have a fix for you, but it's horrible. I mean, like, perhaps you should consider this after sacrificing your first-born child or something. It involves adding a property with a CSS expression as its value to the .table-display dd selector, preferably in a separate IE-only stylesheet. Brace yourself:
| Code: |
| margin-bottom: expression(
this.previousSibling.offsetHeight - this.offsetHeight > 0 ? this.previousSibling.offsetHeight - this.offsetHeight + "px" : 0 ); |
So that you know what it's doing, let's take this step by step—it's actually very simple. The problem is that the dd element is aligned to the bottom of the dd element immediately above it rather than at the level of the preceding dt. The simplest way to fix this is to add a margin to the bottom of the above dd that will push down the dd underneath by the right amount. This margin must be equal to the difference in height between this dd and its adjacent dt, but only if the dd is smaller than the dt.
Thus, the expression calculates the difference in height between the two elements, and sets the top margin to be equal to that if it is positive, zero otherwise. In a more condensed (but less readable) single-line format, it looks like this:
| Code: |
| margin-bottom: expression(this.previousSibling.offsetHeight - this.offsetHeight > 0 ? this.previousSibling.offsetHeight - this.offsetHeight + "px" : 0); |
Share:
Jordan, how you managed to find the problem is quite remarkable. IE’s CSS “expression” looks quite powerful and not something I have looked into before and I wounder if one could be used in a IE conditional to forced more standard compliant rendering. For example I also know “legend” tags need -6px margin in IE7 or less.
Many thanks.
Johan De Silva / Portfolio
Share: