Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

LI Bullets not displaying on IE 9

   
12:31 am on Jun 18, 2011 (gmt 0)

5+ Year Member



Hello,

These bullets will show correctly in Firefox and Chrome. However Internet Explorer you have to hit the "compatibility view" button in order for them to show. I've tried various solutions that I've found using Google and none have fixed the issue. I don't understand this because it's only the CSS on one page. Other pages are displaying correctly. Here's the CSS:


body { font-family:'Verdana'; font-size:10px; }
#wrap { width:980px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#666; margin:0 auto; }
#header { height:56px; width:301px; position:relative; color:#000; margin-bottom:3px; float:left; padding:0; }
#header h1 { text-indent:-10000px; margin:0; padding:0; }
#header h1 a { display:block; background:url(images/logo.gif) no-repeat left top; height:56px; }
#search { margin-top:30px; float:right; padding:0; }
input#searchsubmit { background:#fc6; border:2px solid #f93; color:#333; font-size:13px; }
a:hover { text-decoration:none; color:#555353; border:none;}
.left { float:left; width:200px; border:3px solid #f3f3f3; margin:10px 0; padding:10px; }
.right { float:right; width:170px; border:3px solid #f3f3f3; margin:10px 0; padding:10px; }
.right img { border:0; display:block; margin-left:auto; margin-right:auto; }
.middle { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; font-size:11px; }
.middle h2 { font-size:16px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle img { border:4px #eee solid; }
.ads { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #f3f3f3; text-align:center; padding:10px; }
.ads img { border:0; text-align:center; }
img.wp-smiley { border:0; padding:0; }
#footer { width:980px; margin-top:20px; text-align:center; clear:both; padding:10px; }
div.hr { height:3px; background:#fff url(images/hr.gif) repeat-x scroll center; clear:both; }
div.br { height:10px; background:#fff url(images/br.gif) repeat-x scroll center; clear:both; }
.alignright { float:right; }
.alignleft { float:left; }
.gcomment { border-left:none; vertical-align:middle; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#F7F7F7; padding:3px; }
.ucomment { border-left:none; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#fbfbf1; padding:3px; }
input#submit { background:#fc6; border:2px solid #f93; color:#fff; font-size:13px; }
ol.commentlist { margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; }
ol.commentlist li.commenthead h2 { margin:0; }
span {}
.addthis { float:right; clear:both; }
a:link,a:active,a:visited { text-decoration:none; color:#416e90; border:none; }
.left h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.left ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.left ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.left ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.left ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.left ul li ul li :hover { border-bottom:#ccc 1px solid;}
.right h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.right ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.right ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.right ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.right ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.right ul li ul li :hover { border-bottom:#ccc 1px solid;}
div.hr hr,div.br br { display:none; }
.middle2,.middle3 { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:237px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; }
.middle2 h2,.middle3 h2 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle2 :hover,.middle3 :hover { background:#fafafa; }
.ucomment img,.addthis img { border:0; }


Thanks!
1:49 am on Jun 18, 2011 (gmt 0)

5+ Year Member



Fixed, used this.

<style TYPE='text/css'>
li { list-style-position: inside; }
</style>
2:15 am on Jun 18, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi jshpik1, and that's a property/value where browser defaults differ, but it is often forgotten - so thanks for letting us know.
3:15 am on Jul 1, 2011 (gmt 0)

5+ Year Member



I'm having another issue this time with ul. Here's my CSS:


.left h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.left ul,.right ul { list-style-position: inside; list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.left ul li,.right ul li { list-style-position: inside; list-style-type:none; margin:0 0 20px; padding:0; }
.left ul li ul,.right ul li ul { list-style-position: inside; list-style-type:square; margin:0; padding:0 3px; }
.left ul li ul li,.right ul li ul li { list-style-position: inside; list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.left ul li ul li :hover { border-bottom:#ccc 1px solid;}
.right h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.right ul,.right ul { list-style-position: inside; list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.right ul li,.right ul li { list-style-position: inside; list-style-type:none; margin:0 0 20px; padding:0; }
.right ul li ul,.right ul li ul { list-style-position: inside; list-style-type:square; margin:0; padding:0 3px; }
.right ul li ul li,.right ul li ul li { list-style-position: inside; list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.right ul li ul li :hover { border-bottom:#ccc 1px solid;}


Looks correct in Chrome and Firefox. In internet explorer it looks like:

* [2 spaces] Link
* [2 spaces] Link
* [2 spaces] Link

Should look like:

* Link
* Link
* Link


How do I fix the additional space in Explorer?
2:04 pm on Jul 1, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi jshpik1, I assume you mean the nested li's that have the background-image applied?

If so the issue is due to using list-style-position:inside. The recommendations do not specify how the browser should lay out the marker and the following text, and although you have set list-style-type:none, that is still affecting things. Given the different ways browsers treat padding and margins on list-items probably easiest to set the list-item display back to outside.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month