Welcome to WebmasterWorld Guest from 54.224.0.153

Forum Moderators: not2easy

Message Too Old, No Replies

LI Bullets not displaying on IE 9

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

Junior Member

10+ Year Member

joined:June 20, 2005
posts:46
votes: 0


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 June 18, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:June 20, 2005
posts:46
votes: 0


Fixed, used this.

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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 July 1, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:June 20, 2005
posts:46
votes: 0


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 July 1, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members