0

I don't have much experience with HTML and CSS, so maybe I'm overlooking something.

I have an ol li list within different tables, each table is a continuation of the previous one. I am working in Dreamweaver, where it shows up correctly, but when I live preview it in IE or Firefox, it doesn't work. Any suggestions on what I'm doing wrong?

Here's the code:

.recept-bereiding {
 position: relative;
 margin-top: 5px;
 padding-bottom: 5px;
}

.recept-bereiding img {
 float: left; 
 padding-right: 5px;
 padding-bottom: 5px;
 clear: left;
}

.steps { 
 margin: 0;
 padding: 0;
 list-style-type: none;
 color: #9a084d;
 font-size: 0.9em;
 counter-reset: step-counter calc(var(--start) - 1);
}

.recept-bereiding td {
 height: 135px;
 text-align: left;
 vertical-align: top;
}

.steps ol {
 list-style-type: decimal;
}

.steps li {
 counter-increment: step-counter 1;
 counter-reset: none;
 line-height: normal;
}

.steps li::before {
 content: counter(step-counter);
 background-color: #7dc623;
 margin-right: 5px;
 padding: 4px 8px;
 font-size: 0.9em;
 font-weight: bold;
 color: #ffffff;
 border-radius: 100%;
}
<div class="recept-bereiding">
  <h2>Lorem Ipsum</h2>
  <table>
  <tr>
    <td><img src="img/recept-stap1.jpg" alt=""/></td>
   <td><ol class="steps">
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</li>
   </ol></td> 
   </tr>
  <tr>
   <td><img src="img/recept-stap2.jpg" alt=""/></td>
   <td><ol style="--start:2" start="2" class="steps">
    <li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
    </ol></td>
  </tr>
  <tr>
   <td><img src="img/recept-stap3.jpg" alt=""/></td>
   <td><ol style="--start:3" start="3" class="steps">
    <li>Suspendisse dapibus tincidunt purus, ut mattis massa dignissim at. Morbi elementum fermentum venenatis. Proin non lorem aliquet nibh feugiat ultricies. Phasellus condimentum maximus semper. Morbi eu posuere purus, eget hendrerit velit. Curabitur condimentum tortor nunc.</li>
   </ol></td>
  </tr>
  <tr>
    <td><img src="img/recept-stap4.jpg" alt=""/></td>
   <td><ol style="--start:4" start="4" class="steps">
     <li>Praesent convallis mauris quam. Praesent lobortis ante nec mauris iaculis, lobortis consectetur neque blandit. Vivamus leo metus, vehicula tincidunt enim ac, tempus sodales.</li>
   </ol></td>
  </tr>
  <tr>
   <td><img src="img/recept-stap5.jpg" alt=""/></td>
   <td><ol style="--start:5" start="5" class="steps">
    <li>Nam non leo mollis, fermentum dui vel, sagittis nulla. In in justo eu odio imperdiet maximus a eu dolor.</li>
   </ol></td>
  </tr>
 </table>
</div>

This is what it looks like in IE:

List in IE

dinogril
  • 3
  • 3

1 Answers1

0

I found the solution in this thread for anyone with a similar problem: https://stackoverflow.com/a/53087400/13432746

Changing style="--start:n" to style="counter-reset: step-counter n"did the job.

n being the number

dinogril
  • 3
  • 3