homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
LI Bullets not displaying on IE 9
jshpik1

5+ Year Member



 
Msg#: 4327604 posted 12:31 am on Jun 18, 2011 (gmt 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!

 

jshpik1

5+ Year Member



 
Msg#: 4327604 posted 1:49 am on Jun 18, 2011 (gmt 0)

Fixed, used this.

<style TYPE='text/css'>
li { list-style-position: inside; }
</style>

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4327604 posted 2:15 am on Jun 18, 2011 (gmt 0)

Hi jshpik1, and that's a property/value where browser defaults differ, but it is often forgotten - so thanks for letting us know.

jshpik1

5+ Year Member



 
Msg#: 4327604 posted 3:15 am on Jul 1, 2011 (gmt 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?

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4327604 posted 2:04 pm on Jul 1, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved