Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal List Disappearing Discs in IE7

         

mattch80

3:39 pm on Jul 9, 2010 (gmt 0)

10+ Year Member



I've changed this a bunch of different ways, and I can't get the discs to display in IE7. If I remove the float the list goes vertical and the discs are there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&amp;3.1.1/build/cssreset/reset-min.css" />
<style type="text/css">
body {
margin: 20px;
}
h1 {
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
}
#nav {
background-color: #115ae2;
font-size: 12px;
font-weight: bold;
color: #FFF;
padding: 0px;
float: left;
padding: 10px 0px 10px 10px
}
#nav ul {
}
#nav li {
list-style-position: inside;
list-style-type: disc;
float: left;
padding-right: 10px;
margin-right: 0px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<h1>Horizontal List Separated By Discs</h1>
<div id="nav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<br class="clear" />
</div>
</body>
</html>

Super_Chunk

4:09 pm on Jul 13, 2010 (gmt 0)

10+ Year Member



This kind of browser quirk can be really annoying. One way around this would be to add the discs as a background i.e. :

#nav li {
list-style-type: none;
float: left;
padding-right: 10px;
padding-left: 12px /* Enough so the text doesn't go over the background image */
margin-right: 0px;
background: url('url-to-disc-image.gif') center left no-repeat;
}

Where 'url-to-disc-image.gif' is am image you have made of a white disc on a blue background.