New options instead of <dl compact> that are not outdated

One feature I remember fondly from Internet Explorer is the ability to create compact definition lists using code like this:

<dl compact>
    <dt>f</dt>
        <dd>Firefox</dd>
    <dt>i</dt>
        <dd>Internet Explorer</dd>
</dl>

Here is how it used to look:

https://i.sstatic.net/VBain.png

Unfortunately, none of the current browsers support this feature anymore. Even MDN does not list the element as deprecated.

Now, Firefox displays the definition details below the term instead:

https://i.sstatic.net/dydNF.png

I attempted a CSS solution like this:

dl>dd {
    margin-top: -1em;
}

Although it almost works, the term and details don't align perfectly:

https://i.sstatic.net/4bn0N.png

Is there a CSS (or alternative) solution that can replicate the appearance of the Internet Explorer <dl compact> without relying on tweaking margins?

htmlcss

Answer №1

One creative method to style a concise description list while ensuring vertical alignment (even with terms of varying widths) is by utilizing CSS Grid and establishing guidelines for organizing the terms and descriptions within their respective columns. This technique is effective even for lists that feature terms with multiple descriptions.

dl.compact {
  display: grid;
  grid-template: auto / auto auto;
  width: fit-content;
  column-gap: 1em;
}
dl.compact dt {
  grid-column-start: 1;
}
dl.compact dd {
  grid-column-start: 2;
  margin: 0;
}
<dl class="compact">
  <dt>Name</dt>
  <dd>Jean-Luc Picard</dd>
  <dt>Rank</dt>
  <dd>Captain</dd>
  <dt>Postings</dt>
  <dd>USS Reliant</dd>
  <dd>USS Stargazer</dd>
  <dd>USS Enterprise-D</dd>
  <dd>USS Enterprise-E</dd>
  <dt>Sons</dt>
  <dd>Thomas Picard</dd>
  <dd>Matthew Picard</dd>
</dl>

Answer №2

Here's an answer focusing on floats.

This method can handle multiple instances of <dt> followed by a single <dd>, as well as a single <dt> followed by multiple <dd>.

If there is less than 1em of space between the <dt> and <dd> on the same line, it will create a line break accordingly.

I cannot guarantee that this solution will work perfectly in every scenario, but it does support nesting at least one level deep. It has been tested with both default box-sizing and box-sizing: border-box.

dl[compact] dt {
    clear: both;
    float: left;
}
dl[compact] dd {
    float: right;
    width: calc(100% - 40px);
    margin-left: 1em;
}
dl[compact]::after {
    content: '';
    clear: both;
    display: block;
}
<p>ZZ</p>
<dl compact>
    <dt>AA</dt>
    <dd>lorem ipsum dolor</dd>
    <dt>BBB</dt>
    <dd>lorem ipsum dolor</dd>
    <dt>CC</dt>
    <dd>lorem ipsum dolor</dd>
    <dd>lorem ipsum dolor</dd>
    <dd>lorem ipsum dolor</dd>
    <dt>DDDDDDDD</dt>
    <dd>lorem ipsum dolor</dd>
    <dd>
        lorem ipsum dolor
        <dl compact>
            <dt>EE</dt>
            <dd>lorem ipsum dolor</dd>
            <dt>FFF</dt>
            <dd>lorem ipsum dolor</dd>
            <dt>GG</dt>
            <dd>lorem ipsum dolor</dd>
            <dd>lorem ipsum dolor</dd>
            <dd>lorem ipsum dolor</dd>
            <dt>HHHHHHHH</dt>
            <dd>lorem ipsum dolor</dd>
            <dd>lorem ipsum dolor</dd>
            <dd>lorem ipsum dolor</dd>
            <dt>LL</dt>
            <dt>MMMMMMMM</dt>
            <dt>NN</dt>
            <dd>lorem ipsum dolor</dd>
            <dt>PPPPPPPP</dt>
            <dt>RR</dt>
            <dt>SSSSSSSS</dt>
            <dd>lorem ipsum dolor</dd>
        </dl>
    </dd>
    <dd>lorem ipsum dolor</dd>
    <dt>TT</dt>
    <dt>UUUUUUUU</dt>
    <dt>VV</dt>
    <dd>lorem ipsum dolor</dd>
    <dt>WWWWWWWW</dt>
    <dt>XX</dt>
    <dt>YYYYYYYY</dt>
    <dd>lorem ipsum dolor</dd>
</dl>
<p>ZZ</p>
<dl compact>
    <dt>AA</dt>
    <dd>lorem ipsum dolor</dd>
    <dt>BBBBBBBB</dt>
    <dd>lorem ipsum dolor</dd>
</dl>

Answer №3

If you're looking to update the style, consider changing them from block to inline elements.

dl[compact] dt,
dl[compact] dd {
  display: inline;
}


/* This adjustment creates a break between items */

dl[compact] dt:before {
  content: ' ';
  display: block;
}
<dl compact>
  <dt>f</dt>
  <dd>Firefox</dd>
  <dt>i</dt>
  <dd>Internet Explorer</dd>
</dl>

Answer №4

Another way to approach this would be by utilizing a grid system.

dd {
  margin: 0;
}

dl {
  column-gap: 1rem;
  display: inline-grid;
  grid-template-columns: auto auto;
  width: auto;
}
<dl>
  <dt>f</dt>
  <dd>Firefox</dd>
  <dt>i</dt>
  <dd>Internet Explorer</dd>
</dl>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a carousel-style menu list with navigation buttons for moving forward and backward

I'm running into some trouble while attempting to create a carousel. Firstly, the issue I am facing is that when you continuously click on the Next button, the function keeps working even after reaching the last item. I'm not sure how to make th ...

javascripthtmljquerycss

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. Check out the JSFiddle Example C ...

htmlcsslayoutborder

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: My goal is to keep the first two links in their original position and move the third link all the way ...

htmlcssflexboxcss-grid

Validation is not being enforced for the input field labeled as 'name' in the form

Can anyone assist me with a form validation issue I'm encountering while working on my project? The validation is functioning correctly for email and institution fields, but it seems to be ignoring the name field. Any suggestions or help would be grea ...

javascripthtmlformsvalidation

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this: https://i.sstatic.net/TSDEy.png However, my current output looks like this: https://i.sstatic.net/rQhYc.png I'm puzzled as to why the tooltip is floating there, ...

htmlcssbootstrap-4

Insert text into the cursor location within Summernote using JQuery

Currently, I am working on a flutter application where I have implemented the summernote editor using JQuery. ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain); String txtIsi = data.text .replaceAll("'", '\&bsol ...

javascripthtmljqueryflutterwebview

Writing CSS rules for generating HTML code when sending emails through the command line in Go

When trying to compose HTML with CSS for email delivery using Go command line execution, errors related to CSS properties are popping up. For instance, it's showing "not found" error in the terminal for properties like background: rgb(255, 255, 255) o ...

htmlcssemailgo

Incorrect placement of navigation in HTML/CSS dimensions

I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...

htmlcss

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

jqueryhtml

How about this: "Designing a Pop-Up Window

Currently working on my own customized modal, here's the unique CSS I came up with: .custom-modal{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(o ...

htmlcssless

There seems to be a disconnect between the CSS and HTML files

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="c ...

htmlcss

Converting MS Access databases

My latest project involves the conversion of an existing MS Access 2007 application into a web-based application. Currently, all data is stored in a SQL Server 2005 database. Given my limited web development experience, I am approaching this task with caut ...

jqueryhtmlweb-servicesms-accessreporting-services

Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

I've managed to create a circle animation that is working well, but now I'm looking to switch from solid lines to dotted lines. Can anyone provide guidance on how to accomplish this? Here is the current appearance: #loading { width: 50px; ...

javascripthtmlcss

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

javascripthtml

Is there a way to identify a null dynamic source in Html5 audio?

The HTML5 audio element in my code does not point directly to an mp3 file, but rather to an action in a controller. This action returns either an mp3 file (FileResult) or null, which can take up to 1 minute to retrieve. To handle this delay, I have impleme ...

jqueryhtmlasp.net-mvcgoogle-chromehtml5-audio

Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Struggling with aligning elements on my simple search page. The goal is to center the company name above the search input and have buttons centered under it with some spacing in between. https://i.stack.imgur.com/FdadF.png <div class="backgroundWh ...

htmlcssbootstrap-5

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js

Error encountered during GSTIN validation in the Polymer JS console

I'm currently working on a Polymer JS code that validates GSTIN: <dom-module id="gst"> <template> <div> <label for="gstid" class="gstlabel">GSTIN</label> <input type="te ...

htmlpolymer