Building Cross-Browser Floating Lists with CSS - Displaying floating HTML lists in a cross-browser fashion
(Page 4 of 4 )
In the section that you just read, I improved the visual appearance of the floating lists by styling their bullets. Sadly, this process in its current state is rather pointless, since these elements still won’t be displayed by Internet Explorer.
To solve this specific issue, below I coded a brand new (X)HTML file that changes the positions in which list bullets are shown, by assigning to them a value of “inside.” Here’s the signature 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 (works in most browsers)</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: inside;
list-style-type: square;
}
ul.rightlist{
float: right;
list-style-position: inside;
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, the only relevant modification that I introduced into the above (X)HTML file concerns the positions of the bullets corresponding to each floated list. In this concrete case, the bullets will be displayed “inside,” instead of outside the respective lists, but the major advantage in changing this CSS property is that now IE will display the pertinent bullets in the correct way.
The image below shows how IE now renders the floated lists:
Don’t you feel a bit happier? You should, because at this moment you’ve learned how to build floating HTML lists that will be displayed consistently by most modern browsers. As always, feel free to use all of the code samples included in this tutorial to acquire more practice in creating these kinds of lists.
Final thoughts
That’s all for the moment. In this second chapter of the series, I taught you how to build a couple of floating HTML lists that will be displayed consistently by most modern browsers. As you learned previously, developing this cross-browser approach for showing the pertinent lists only required us to play a bit with bullet positions, and nothing else.
In the upcoming article, I’ll be teaching you more useful things regarding the construction of floating lists with CSS. You'll learn how to adjust their padding and margin values, and the indentation of each list item.
Now that you’ve been warned about the topics that will be discussed in the next part, you won’t want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
