Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

HTML list item background image disappears on IE

1 min read

I recently faced the problem that the background images that have been added to an HTML li tag over CSS disappeared on Internet Explorer (on Firefox and Webkit browsers everything worked fine).

What I noticed is that the problem just happens when the text is wrapped to a new line. The following figure shows when it's working correctly
and if you then decrease the size of the browser window (or on a computer with a lower screen resolution) you'll get this result
Note that the icon is missing on the last list entry. The solution is to add the "position:relative" to the ul tag, either directly or over the corresponding CSS class
<ul style="position:relative">
<li>...</li>
<li>...</li>
</ul>

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus