Answers.Body: <p>There are a few things going on here. The spacing issue is likely being caused by the presence of block elements inside list elements&mdash;the headers are probably getting bumped onto their own line, apart from the start of the list item. If you're starting with the toc.xhtml of an epub file, you'll need to lose any elements inside the Table of Contents list (which must be in a <code>&lt;nav&gt;</code>) other than <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, or <code>&lt;ol&gt;</code>. You've got a couple other minor problems that are probably from typing stuff in here, but to hit them quickly:</p>
  
  <ul>
  <li>The closing <code>&lt;b&gt;</code> tags don't have a "/", making them opening tags</li>
  <li>The first list item ends before the list inside it begins</li>
  <li>The first <code>&lt;b&gt;</code> ends before the <code>&lt;h3&gt;</code> containing it ends</li>
  </ul>
  
  <p>Try out the following:</p>
  
  <pre><code>&lt;nav id="toc" epub:type="toc"&gt;
      &lt;ol class ="customBullet"&gt;
          &lt;li class="tier1"&gt;&lt;a href="item1.xhtml"&gt;Item&lt;/a&gt; &lt;!-- 1st tier --&gt;
              &lt;ol class="customBullet"&gt;
                  &lt;li class="teir2"&gt;&lt;a href="item1.xhtml#part1"&gt;Sub-item&lt;/a&gt; &lt;!-- 2nd tier --&gt;
                      &lt;ol class="customBullet"&gt;
                          &lt;li class="teir3"&gt;&lt;a href="item1.xhtml#part1_1"&gt;Sub-sub-item&lt;/a&gt; &lt;!-- 3rd tier --&gt;
                              &lt;ol class="customBullet"&gt;
                                  &lt;li class="teir4"&gt;&lt;a href="item1.xhtml#part1_1_1"&gt;Sub-sub-sub-item&lt;/a&gt;&lt;/li&gt; &lt;!-- 4th tier --&gt;
                              &lt;/ol&gt;
                          &lt;/li&gt; 
                      &lt;/ol&gt;
                  &lt;/li&gt;
              &lt;/ol&gt;
          &lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>You could as easily give the class definition to each <code>&lt;ol&gt;</code>, and then have the CSS point to <code>ol.tier3 li { color: blue; }</code> or whatever styling you want&mdash; might be easier to read the code that way.</p>
  
  <p>Hope that's useful!</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-09T05:52:16.973Z
Answers.Text: Thanks so much for this. That seemed to have gotten the more weirder spaces solved ! The text still appears displaced one line down of the bullet, should I work that out with margins and padding ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-10T08:23:31.263Z
Answers.Text: That's strange--the text shouldn't be displaced at all. You're certain there are no elements inside the `<li>` other than the `<a>`? I would suggest against trying to move the text up a line with negative margins or anything--that will almost certainly not end well: various devices will inevitably treat that stuff just differently enough to make it look a shambles. The old KF7 format, for example, doesn't support negative margins at all.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-11T08:55:52.543Z
Answers.Text: Actually, I am sorry, I should have been more precise. It comes out perfect with an ordered list, but I wanted to use a custom image for bullets so I tried this same code with an unordered list while including an image for a custom bullet.
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T06:33:19.077Z
Answers.Text: Hello Tom, I just created an xhtml practice file for this and was wondering if its possible to create a custom bullet using the ol tag if an ul tag is not allowed (I looked around and it seems like its not). Or if its not possible does that mean there is no way one could use a custom image bullet for an ebook's table of contents ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T06:39:27.703Z
Answers.Text: I haven't tried this, so I don't know for sure if it'll work or not, but you might try something like `<li><span class="image" /><a>Text</a></li>` with a corresponding `span.image { background-image: image.jpg }` in the CSS. That said, images in the TOC seem a little strange. What is it that you're trying to do? EDIT: The other thing to do, if images are a must, is to create a file purely for the graphical TOC, and leave the toc.xhtml and toc.ncx as the logical TOCs only.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T06:59:31.870Z
Answers.Text: Ah, thanks so much! Will try using that tag! Mostly wanna include images for aesthetic reasons, also I want to do this thing where I can expand/collapse one of the sub-headings (might chuck that idea out if its not possible in kindle) . Are images usually not appropriate in a table of contents file ? Could you please explain the graphical TOC part, I am kind of confused, as far as I've read isn't toc.ncx the only file that acts as a logical TOC ? I thought toc.xhtml was the one that appeared to the user at the beginning, can it be used as a logical TOC ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T07:05:46.183Z
Answers.Text: The toc.nxc is the logical TOC for epub 2.0.1; the toc.xhtml is the logical TOC for epub 3.0. The toc.xhtml is also intended to be the graphical TOC, but it has a number of limitations (like only allowing `<li>`, `<a>`, and `<span>` tags) that mean that really graphically intensive works will sometimes still require a graphical TOC file (such as the cookbook I've been working on lately). As far as expanding and collapsing goes: most reading systems will do that automatically if you've nested your TOC as illustrated above.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T07:11:36.347Z
Answers.Text: Ah, ohkay, thanks for clarifying that, so there is no ncx file in epub 3.0 ? When you say a graphical TOC are you referring to another xhtml file created specifically for graphical purposes or some other special file format ?
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T07:28:02.583Z
Answers.Text: In epub 3.0, the ncx file has been superseded by the toc.xhtml, which requires some special formatting (see http://www.idpf.org/epub/30/spec/epub30-changes.html#sec-new-changed-nav ). And yes, the graphical one is purely for presentational purposes; no special formatting for it.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-18T07:59:05.277Z
Answers.Text: let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/13675/discussion-between-qptr-and-tom)
Answers.UserDisplayName: QPTR
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-08T17:46:47.280Z
Answers.LastActivityDate: 2014-03-08T17:46:47.280Z
Answers.UserDisplayName: Tom
Body: <p>I am creating an ebook for Amazon's Kindle in HTML, and then later use KindleGen to convert it into the Kindle's MOBI version. </p>
  
  <p>The problem I am currently having is with custom bullets for nested unordered lists that I am using for the ebook's Table of Contents. Initially I was using an image in the list-style-image property to create a custom bullet. This was the CSS I was using:</p>
  
  <pre><code>ul.customBullet
  {
      list-style-image: url('images/bulletPointImage.png');
      margin:1.3em;
  }
  </code></pre>
  
  <p>And this was the html:</p>
  
  <pre><code>&lt;ul class ="customBullet"&gt;
  &lt;li&gt;&lt;b&gt;&lt;h3&gt;Text 1&lt;b&gt;&lt;/h3&gt;&lt;/li&gt; &lt;!-- 1st tier --&gt;
         &lt;ul class="customBullet"&gt;
           &lt;li&gt;&lt;h4&gt;&lt;b&gt;2:&lt;b&gt;&lt;/h4&gt; &lt;1-- 2nd tier --&gt;
               &lt;ul class="customBullet"&gt;
                  &lt;li&gt;&lt;h6&gt;Text 3&lt;/h6&gt; &lt;!-- 3rd tier --&gt;
                      &lt;ul class="customBullet"&gt;
                         &lt;li&gt;&lt;h3&gt;&lt;a href="#chap1"&gt; Text&lt;/a&gt;&lt;/h3&gt;&lt;/li&gt; &lt;!-- 4th tier --&gt;
                      &lt;/ul&gt;
  
  
                  &lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li &gt;&lt;b&gt;3: &lt;b&gt;&lt;/li&gt;
          &lt;li &gt;&lt;b&gt;4: &lt;b&gt;&lt;/li&gt;
          &lt;li &gt;&lt;b&gt;5: &lt;b&gt;&lt;/li&gt;
          &lt;li &gt;&lt;b&gt;6: &lt;b&gt;&lt;/li&gt;
          &lt;li&gt;&lt;b&gt;7: &lt;b&gt;&lt;/li&gt;
  
         &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I was having problems with aligning the bullets with the text. The text appeared one line below the bullet and a little to the left and not alongside as it should (in Firefox). When I previewed the MOBI created with KindleGen in KindlePreviewer, the image of the bullet was coming out tiny (and not proportional to the image file) and the same problem of the bullet not positioned in the same line as the text. </p>
  
  <p>Also, the bullets appear differently in each of the different kindle models (Kindle Paperwhite, Kindle Fire, etc.), the size of the image varied and with different sort of spacing between the bullet and the text. </p>
  
  <p>I then read somewhere online that Kindle does not support the list-style-image tag. Kindle's official supported CSS tags also do not include it. So I created a simple bulleted list without the CSS but with the same html code above. The problem is the same with the spacing. And different shaped bullets appear on each tier. For example a hollow circular one on the first, a squarish one on the second and so on. </p>
  
  <p>So, my question is , is there a way (any lines of code) to make streamlined bullets in html for kindle's ebook without all these variations in different versions, and also without all these unneeded space insertions, and a proper sort of positioning. Bullets that stay the same no matter which version of kindle is being used. Hope I have explained myself properly. </p>
  
Tags: <kindle><html><css>
Title: custom bullets html ebook kindle
UserDisplayName: QPTR
ThreadText: # custom bullets html ebook kindle
  
  (Asked by: username_0 on 2014-03-08)
  
  I am creating an ebook for Amazon's Kindle in HTML, and then later use KindleGen to convert it into the Kindle's MOBI version. 
  The problem I am currently having is with custom bullets for nested unordered lists that I am using for the ebook's Table of Contents. Initially I was using an image in the list-style-image property to create a custom bullet. This was the CSS I was using:
  ul.customBullet
  {
      list-style-image: url('images/bulletPointImage.png');
      margin:1.3em;
  }
  
  And this was the html:
  
  Text 1 
         
           2: <1-- 2nd tier -->
               
                  Text 3 
                      
                          Text 
                      
  
  
                   
              
          
          3: 
          4: 
          5: 
          6: 
          7: 
  
         
  
  
  I was having problems with aligning the bullets with the text. The text appeared one line below the bullet and a little to the left and not alongside as it should (in Firefox). When I previewed the MOBI created with KindleGen in KindlePreviewer, the image of the bullet was coming out tiny (and not proportional to the image file) and the same problem of the bullet not positioned in the same line as the text. 
  Also, the bullets appear differently in each of the different kindle models (Kindle Paperwhite, Kindle Fire, etc.), the size of the image varied and with different sort of spacing between the bullet and the text. 
  I then read somewhere online that Kindle does not support the list-style-image tag. Kindle's official supported CSS tags also do not include it. So I created a simple bulleted list without the CSS but with the same html code above. The problem is the same with the spacing. And different shaped bullets appear on each tier. For example a hollow circular one on the first, a squarish one on the second and so on. 
  So, my question is , is there a way (any lines of code) to make streamlined bullets in html for kindle's ebook without all these variations in different versions, and also without all these unneeded space insertions, and a proper sort of positioning. Bullets that stay the same no matter which version of kindle is being used. Hope I have explained myself properly.
  
  **Tags:** kindle, html, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-03-08. Score: 7 | Accepted answer
  
  There are a few things going on here. The spacing issue is likely being caused by the presence of block elements inside list elements—the headers are probably getting bumped onto their own line, apart from the start of the list item. If you're starting with the toc.xhtml of an epub file, you'll need to lose any elements inside the Table of Contents list (which must be in a ) other than , , or . You've got a couple other minor problems that are probably from typing stuff in here, but to hit them quickly:
  
  The closing  tags don't have a "/", making them opening tags
  The first list item ends before the list inside it begins
  The first  ends before the  containing it ends
  
  Try out the following:
  
      
          Item 
              
                  Sub-item 
                      
                          Sub-sub-item 
                              
                                  Sub-sub-sub-item 
                              
                           
                      
                  
              
          
          Item
          Item
          Item
          Item
          Item
      
  
  
  You could as easily give the class definition to each , and then have the CSS point to ol.tier3 li { color: blue; } or whatever styling you want— might be easier to read the code that way.
  Hope that's useful!
  
  > **Comments:**
  > **username_0**: Thanks so much for this. That seemed to have gotten the more weirder spaces solved ! The text still appears displaced one line down of the bullet, should I work that out with margins and padding ?  
  > **username_1**: That's strange--the text shouldn't be displaced at all. You're certain there are no elements inside the `<li>` other than the `<a>`? I would suggest against trying to move the text up a line with negative margins or anything--that will almost certainly not end well: various devices will inevitably treat that stuff just differently enough to make it look a shambles. The old KF7 format, for example, doesn't support negative margins at all.  
  > **username_0**: Actually, I am sorry, I should have been more precise. It comes out perfect with an ordered list, but I wanted to use a custom image for bullets so I tried this same code with an unordered list while including an image for a custom bullet.  
  > **username_0**: Hello username_1, I just created an xhtml practice file for this and was wondering if its possible to create a custom bullet using the ol tag if an ul tag is not allowed (I looked around and it seems like its not). Or if its not possible does that mean there is no way one could use a custom image bullet for an ebook's table of contents ?  
  > **username_1**: I haven't tried this, so I don't know for sure if it'll work or not, but you might try something like `<li><span class="image" /><a>Text</a></li>` with a corresponding `span.image { background-image: image.jpg }` in the CSS. That said, images in the TOC seem a little strange. What is it that you're trying to do? EDIT: The other thing to do, if images are a must, is to create a file purely for the graphical TOC, and leave the toc.xhtml and toc.ncx as the logical TOCs only.  
  > **username_0**: Ah, thanks so much! Will try using that tag! Mostly wanna include images for aesthetic reasons, also I want to do this thing where I can expand/collapse one of the sub-headings (might chuck that idea out if its not possible in kindle) . Are images usually not appropriate in a table of contents file ? Could you please explain the graphical TOC part, I am kind of confused, as far as I've read isn't toc.ncx the only file that acts as a logical TOC ? I thought toc.xhtml was the one that appeared to the user at the beginning, can it be used as a logical TOC ?  
  > **username_1**: The toc.nxc is the logical TOC for epub 2.0.1; the toc.xhtml is the logical TOC for epub 3.0. The toc.xhtml is also intended to be the graphical TOC, but it has a number of limitations (like only allowing `<li>`, `<a>`, and `<span>` tags) that mean that really graphically intensive works will sometimes still require a graphical TOC file (such as the cookbook I've been working on lately). As far as expanding and collapsing goes: most reading systems will do that automatically if you've nested your TOC as illustrated above.  
  > **username_0**: Ah, ohkay, thanks for clarifying that, so there is no ncx file in epub 3.0 ? When you say a graphical TOC are you referring to another xhtml file created specifically for graphical purposes or some other special file format ?  
  > **username_1**: In epub 3.0, the ncx file has been superseded by the toc.xhtml, which requires some special formatting (see http://www.idpf.org/epub/30/spec/epub30-changes.html#sec-new-changed-nav ). And yes, the graphical one is purely for presentational purposes; no special formatting for it.  
  > **username_0**: let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/13675/discussion-between-qptr-and-tom)  
  
  ---
  
  