Building Cross-Browser Floating Lists with CSS
(Page 1 of 4 )
Welcome to the second part of a four-part series that shows you how to build floating lists with cascading style sheets. In the first part, you saw how to float two lists in a web document, one to the left and one to the right. You also saw that this particular approach caused a minor problem in Internet Explorer. In this part of the series, we'll show you how to fix that problem, and how to improve the look and feel of the lists.
Introduction
Undoubtedly, HTML lists can be extremely useful, particularly when it comes to displaying different group of items in a truly professional fashion. In addition, they’re pretty simple to include into any web document, and can be aligned vertically and horizontally across a web page very easily.
However, this pleasant scenario can become challenging when it’s necessary to create a pair of HTML lists that must be floated to the left and right sides of a web document. This process isn’t as simple as working with lists that have to be aligned vertically or horizontally.
Luckily, constructing floating HTML lists for web pages is a procedure that can be tackled by any web designer with a minimal background in CSS. Thus, if you’re interested in learning how to build these useful and professional-looking lists in a few easy steps, then you’ve come to the right place, since in this article series, you’ll be provided with numerous hands-on examples, aimed at demonstrating how to create floating HTML lists that will be displayed consistently across most modern browsers.
If you read the first installment of this series, then it’s possible that you’ve already familiarized yourself with building floating HTML lists by using a few basic CSS styles. In that tutorial I developed an introductory hands-on example that illustrated how to create a couple of floating HTML lists, where the first one was floated to the left of a sample web page, and the second one was positioned to the right.
In this particular case, I simply used a “float” CSS property to accommodate the respective lists within the pertinent web document. This doesn't mean that all of the floating lists that you put on the web have been constructed by way of this approach.
Nevertheless, the floating lists created in the previous article will be displayed correctly by most non-IE browsers, which is good, but guess what? Yes, you’re correct! Internet Explorer does render the lists in the correct positions, but doesn’t show the bullets of the respective items. Too bad, right?
Therefore, in this second chapter of the series, I’m going to show you how to fix this IE-related issue. I'll also show you how to slightly improve the look and feel of the lists. Let’s get going!
Next: A quick review >>
More Style Sheets Articles
More By Alejandro Gervasio
