У меня нет большого опыта работы с HTML и CSS, поэтому, возможно, я что-то упускаю.
У меня есть список ol li в разных таблицах, каждая таблица является продолжением предыдущий. Я работаю в Dreamweaver, где он отображается правильно, но когда я смотрю его в реальном времени в IE или Firefox, он не работает. Любые предложения о том, что я делаю не так?
Вот код:
.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>
Вот как это выглядит в IE:
Список в IE