Skip to content

The BIG Reason

Music, opinions, and portfolio of Mark Eagleton, musician and web developer in Northern CA.

Internet Explorer 8 display:inline li Bug

I’ve been going through a bunch of websites that I maintain in the newly released IE 8, and I stumbled uppon a inconsistently documented bug with the line item element. This is a brief summary of my findings. 

The footer navigation of the ground(ctrl) system (the hosted fan club service I maintain), is made up of two unordered lists. The design of the client build I am currently working on calls for each child line item element of these lists to display inline, so I specified the following rule in my style sheet:

#footer li { display: inline; }

Which gives us the desired result in compliant browsers:

IE 8 refused to obey:

My solution was to set the line items in question to display inline-block:

#footer li { display: inline-block; }

Of course, this isn’t going to fly in older versions of Firefox, but this is a concession I am willing to make for this particular site.