WordPress.org

1. palmettostar
   Member
   Posted 2 years ago #

   Website: click here

   I am trying to fix the CSS coding for my bulleted lists, the bullets which is a right double angle quote: » shows up in Firefox but does not show up in Internet Explorer. What do I need to change in my coding in order for it show up in Internet Explorer?

   html>body .entry ul {
   	margin-left: 0px;
   	padding: 0 0 0 30px;
   	list-style: none;
   	list-style-position: inside;
   	padding-left: 5px;
   	text-indent: -5px;
   	} 
   
   html>body .entry li {
   	margin: 7px 0 8px 5px;
   	list-style: none;
   	list-style-position: inside;
   	}
   
   .entry ul li:before, .side1 ul ul li:before {
   	content: "0BB 020";
   	}
   
   .entry ol {
   	padding: 0 0 0 35px;
   	margin: 0;
   	}
   
   .entry ol li {
   	margin: 0;
   	padding: 0;
   	}
   
   .postmetadata ul, .postmetadata li {
   	display: inline;
   	list-style-type: none;
   	list-style-image: none;
   	}
   
   .side1 ul, .side1 ul ol {
   	margin: 0;
   	padding: 0;
   	}
   
   .side1 ul li {
   	list-style-type: none;
   	list-style-image: none;
   	margin-bottom: 15px;
   	}
   
   .side1ul p, .side1 ul select {
   	margin: 5px 0 8px;
   	}
   
   .side1 ul ul, .side1 ul ol {
   	margin: 5px 0 0 10px;
   
   	}
   
   .side1 ul ul ul, .side1 ul ol {
   	margin: 0 0 0 10px;
   	}
   
   ol li, .side1 ul ol li {
   	list-style: decimal outside;
   	}
   
   .side1 ul ul li, .side1 ul ol li {
   	margin: 3px 0 0;
   	padding: 0;
   	}

2. palmettostar
   Member
   Posted 2 years ago #

   Anyone? :(

3. davedotcom
   Member
   Posted 2 years ago #

   Palmettostar,

   Unfortunately :before and :after don't work in IE.

   Your best bet is to make an image of the right angle double quote and use background-image for IE.

4. palmettostar
   Member
   Posted 2 years ago #

   ^ Thank you for the reply. I ended up deleting that part of coding and adding my own bullet image which seems to work quite nicely. However, it's still spaced funny in IE but shows up fine in Firefox, I couldn't get it to show up correctly (the bullets) in the side bar in either browser so I just took the bullet coding out for the sidebar at the moment. The coding I have now is the following:

   html>body .entry ul {
   	margin-left: 0px;
   	padding: 0 0 0 30px;
   	list-style-type: disc;
   	list-style-position: inside;
   	padding-left: 5px;
   	text-indent: -5px;
   	} 
   
   html>body .entry li {
   	margin: 7px 0 8px 5px;
   	list-style-image: url(images/bullet.jpg);
   	list-style-type: disc;
   	list-style-position: inside;
   	}
   
   .entry ol {
   	padding: 0 0 0 35px;
   	margin: 0;
   	}
   
   .entry ol li {
   	margin: 0;
   	padding: 0;
   	}
   
   .postmetadata ul, .postmetadata li {
   	display: inline;
   	list-style-type: none;
   	list-style-image: none;
   	}
   
   .side1 ul, .side1 ul ol {
   	margin: 0;
   	padding: 0;
   	}
   
   .side1 ul li {
   	list-style-type: none;
   	list-style-image: none;
   	margin-bottom: 15px;
   	}
   
   .side1ul p, .side1 ul select {
   	margin: 5px 0 8px;
   	}
   
   .side1 ul ul, .side1 ul ol {
   	margin: 5px 0 0 0px;
   	}
   
   .side1 ul ul ul, .side1 ul ol {
   	margin: 0 0 0 10px;
   	}
   
   ol li, .side1 ul ol li {
   	list-style: decimal outside;
   	}
   
   .side1 ul ul li, .side1 ul ol li {
   	margin: 3px 0 0;
   	padding: 0;
   	}

   If you scroll down to the very last entry on the page you can see a bullet list, it displays the way I want it to in Firefox but weird in IE, any ideas? I've messed w/ the padding and margin and neither fixes.

5. 1dollar
   Member
   Posted 2 years ago #

   If you use id's to get to your specific lists e.g <ul id="thelist">

   You could do the following javascript, to add whatever you want to before the contents of your li tags.

   Onload it grabs the right ul tag, puts all the li into an array, we loop over them and get the text between the li tags and add whatever character you want before it.

   You could also put it in an external javascript file and load that between the coditional comments.

   <!--[if IE]>
   <script type="text/javascript">
   window.onload=function() {
   Restyle();
   }
   function Restyle() {
   lis=document.getElementById('thelist').getElementsByTagName('li');
   for(i=0;i<lis.length-1;i++){
   lis[i].firstChild.nodeValue+="» ";
   }
   }
   </script>
   <![endif]-->

6. 1dollar
   Member
   Posted 2 years ago #

   
   

Topic Closed

This topic has been closed to new replies.