开发者

List item bullets disappearing in IE6 and IE7

I have created a list of items using <ul> and <li>. It's works fine in Firefox but in Internet Explorer 6 and 7 I cannot see the list bullet.

Here is what I've done:

I have a global ul , li reset value. After that I have created two column list using two <ul> block. I am overwriting the ul li global style value none in CSS to list style as disc. when I do this I can see the bulleted list item, but when I set the ul's width as some specific value the li bullets disappear in IE.

Even if I use list style as list-style-image: url(bullet.gif) that also does not appear in IE 6 and 7.

Here is the HTML code. Please have a look on this and let me know which way I can archive bulleted list in all the browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List Sample</title>
<style>
* { padding: 0; margin: 0; }

body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helveti开发者_C百科ca, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}

#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>

</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>


For native disc bullets you need some margin, padding.. try with

ul li { margin:0 0 0 15px; padding:0 0 0 15px; }

And keep decreasing the left for either of those until you've gained consistency ( I forget which browser uses which - you might be able to just rely on one of those alone ). If you want to use an image use:

ul li { background:url(/images/bullet.gif); zoom:1; }

The zoom is to counter-act IE-oddities, sometimes it creates oddities though. Don't forget to set the background position depending on your design.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜