RE: [WSG] display inline question

[Drake, Ted C.]

Hi Nathan I had actually just removed the data from a table, cutting the code by 40% and removing over 1,000 images.  This was an enormous page!   I will probably play around with variations of the dl to get a nice separation from parent dl and child dl elements.   Ted         Hi Ted, I have had a similar experience with the same issue. The two solutions I had were:   1. Accept the current limitations of Definition lists until support for CSS3 is strong and have the definition term above the definition details. But to make things look a bit more attractive, why not style the DT to have a soft gradient background and bold the text with possibly a bit more height than normal. Then for the DD just reduce the left hand padding somewhat, add a border at the bottom and then some bottom margin to create a nicely separated list.   2. Use a table! Obviously a DL is the most semantic option for a list of terms, but if it MUST be in columns then tables can also be a semantic solution (although not as semantic). So effectively if you use tables the TH's for the two columns become the DL and DD. Using borders will also create a good visual association from term to the details to avoid your "shot with some cartoon version of a shotgun" issue.   I personally would always learn towards option 1, but if your client demands columns then I'm sure you won't get an ear bashing by the web standards gods.   Regards,   Nathan ----- Original Message ----- From: Drake, Ted C. To: 'wsg@webstandardsgroup.org' Sent: Wednesday, September 14, 2005 3:36 AM Subject: [WSG] display inline question   My mind is not working very well today.   I've got a question for you.   I was asked to create a nested definition list with the nested dl's looking like simple lines of text.   i.e. instead of this   definition term             definition data   It would look like this: definition term definition data.   I originally did this by floating the dt and dd elements and applying widths and margins to create columns.  All was peachy. But sometimes the dd's are long or the dts are long and the columns start looking like they were shot with some cartoon version of a shotgun.   So, the request was to allow the dt and dd to wrap onto two lines if needed.   I tried to add display inline, but the following dt will also appear on the first line until they just look like one big happy paragraph.   I tried adding combinations of display:inline and display:inline-block, to no success.   I tried using display:inline-table in the faint hope of success... none so.   Has anyone come across a solution for this?   The requester actually made the suggestion of removing the dt/dd and just making them all dt elements.  A shocked look from me and she immediately said, no that wouldn't be semantic and we wouldn't have the future flexibility.  Ah yes, I do hear the doves of peace and joy somewhere.   Ted www.tdrake.net