Building Cross-Browser Floating Lists with CSS - Styling list bullets
(Page 3 of 4 )
As I said in the course of the previous section, it would be pretty convenient to improve the visual appearance of the floating lists that you saw before, to make them look slightly more attractive and professional.
Therefore, I’m going to style the bullets corresponding to the items of each floated list, in this way improving (at least basically) its visual presentation.
Do you think that this process is hard to accomplish? Not at all! To demonstrate what I’m saying, below I coded a brand new (X)HTML file, which now styles the bullets of each floated list. Here’s the definition of the file in question:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on building floating lists</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#listcontainer{
width: 70%;
}
ul.leftlist{
float: left;
list-style-position: outside;
list-style-type: square;
}
ul.rightlist{
float: right;
list-style-position: outside;
list-style-type: square;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists</h1>
<div id="listcontainer">
<ul class="leftlist">
<li>This is the list item 1, floated to the left.</li>
<li>This is the list item 2, floated to the left.</li>
<li>This is the list item 3, floated to the left.</li>
<li>This is the list item 4, floated to the left.</li>
<li>This is the list item 5, floated to the left.</li>
</ul>
<ul class="rightlist">
<li>This is the list item 1, floated to the right.</li>
<li>This is the list item 2, floated to the right.</li>
<li>This is the list item 3, floated to the right.</li>
<li>This is the list item 4, floated to the right.</li>
<li>This is the list item 5, floated to the right.</li>
</ul>
</div>
</body>
</html>
As you can see, now the previous (X)HTML file incorporates some additional CSS styles, aimed specifically at improving the look and feel of the bullets of each floated list. Basically, these improvements are reduced to creating some square bullets, as well as specifying their respective positions with reference to each list.
Obviously, in this particular case I decided to style the bullets in this basic way, but you can apply other styles to these list elements, in accordance with your personal preferences.
Besides, you can get an idea of how these new styles affect the visual aspect of each floated list, if you look at the following screen capture:
Well, at this point I went one step further and demonstrated how to improve the visual appearance of each floated list, certainly a process that shouldn’t be hard for you to grasp. The problem is, even though the bullets of each list item now look more appealing, Internet Explorer simply won’t display them!
However, don’t fear because all is not lost. Actually, it’s possible to fix this IE-related issue by modifying the position of the list bullets. As you saw earlier, I specified that these elements should be displayed outside of each floated list, but if they’re shown “inside” instead, IE hopefully will render them correctly.
To see how this small correction will be introduced into the previous (X)HTML file, jump forward and read the next few lines.
Next: Displaying floating HTML lists in a cross-browser fashion >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
