Styling inline definition lists

Hello,

I’m trying to style definition lists to use them as a simple form view but I’m having trouble with dd’s containing multi-line elements :

As you can see, the mult-lined text doesn’t line-up corrected with the other dds.

I’ve searched around but to no avail. Any ideas?

Many thanks,

WS

Hi,

Its not valid to put an hr between the dt and the dd as all content in a dl must be inside the dt or dd tags. That’s what makes a dl list quite awkward to work with.

You will need to give a width to the dt so that it lines up with following dt’s and then use calc to work out the remaining width.

Here’s a rough example:

1 Like

Beat me to it :smiley:
I tried using % widths:-

Hmm IE8 doesn’t support calc(). I’ll have to see what the fallback looks like (yes some clients still use IE8) but if it looks like my initial version that’s not too bad.

Many thanks!

The % width version should be fine in IE8.

I still get a tiny minority of IE8 visitors. I have stopped caring about them getting exactly the same look as modern browsers do. If the site displays and the content is readable, that’s enough as far as I’m concerned.
If they don’t see round-corners, shadows, css columns, or see standard inline-blocks in place of fancy flex-box layouts, it’s not the end of the world.
If you work too hard to accommodate them, they will never upgrade! :smiley:

1 Like

Yes I would use widths as a fallback for IE8. Juts place the normal width before the calc width.

e.g.

width:70%;/* or whatever*/
width:calc(100%- 160px;)

Yes good demo :slight_smile:

Percentage widths are actually easier than my example but I don’t like the fact that small percentage widths get too small very quickly. It’s probably not an issue in this example but if you have a long data term then it will wrap into many lines.

On a similar note the reason I put the border on top is that you will never run into the following issue where the dt is taller than the dd and thus overlaps the border you placed at the bottom.

<dt>Problem if his text runs to more lines than the rest then the line will overlap especially with percentages in the mix and lines wrap sooner</dt>

You can never know if the dt is taller than the dd so placing an absolute border from the bottom of either cannot be guaranteed to work. However both the dt and dd will always start on the very first line so you can always be sure the border won’t get overlapped by text if you place it at the top.

A minor issue I know and probably not relevant here but I do like to have code that will work irrelevant of content stipulations. :slight_smile:

Hmm. My issue with this is that the dl is containing in a div with varying width. I’ll suppose I’ll just set the dd width to the minimum for IE8 and it simply won’t expand to take up all the horizontal space…

Now I just need to force a new line after each dd. As it stands, with the dd set to the minimum width I end up with multiple dt/dd pairs per ‘row’. :frowning:

Many thanks both of you!

I’m not sure what you mean by this exactly?

Do you mean that the data terms (dt) will be of varying length? That seems a little awkward and subsequent rows won’t match up with alignment and indeed if there is a lot of text on the dt then it would spread all the way across the line.

Both the above examples do not have this issue as each pair always fills a row.

Perhaps an illustration of your desired result would help:)

@PaulOB, This is the post with a screenshot that was posted at the end of the previous thread.

Trouble with css table layout - #15 by wsqueers

Thanks Ron:)

Hmm that seems to be more or less what the code I posted does.

What I mean is that if I were to apply a fixed pixel width for IE8 it would look like this :

What it means is that you have not tried Paul’s or Sam’s code as it is because they both adapt to changing widths in IE8 without any substitutions on your part.

I wrote a version that floats the dt and it adapts to changing widths in IE8, too.

Don’t change code that works if you don’t know what you are doing. We’ll help you fit it into your page, but we’ll need to see the surrounding code to do that.

@wsqueers, Here’s a challenge for you.

Can you tell that this rendering of Paul’s code is in IE8 at 400px?

 
And can you tell that this wide rendering of Paul’s code is in IE8 at more than 960px?

 
Both images are screenshots of the same code.

Why do you think you need to change this code?

1 Like

I did try Paul and Sam’s code. Paul points out :

small percentage widths get too small very quickly

In my edited version, I was trying to simulate the min and max width of the dl in my use case and see whether a fixed width dt could work in order to avoid this. I commented out the calc()s in order to force the IE8 rendering as I don’t have anything that could emulate IE8 currently installed. It turns out that Paul’s original percentage based version will work fine so problem solved!

My thanks to you all for you help with this issue :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.