Need help? Check out our Support site, then


WordPress.com Forums » Support

Gap Between Bulleted List Items

  1. vonhoffmans
    Member

    Hi, there. I'm new to WordPress, and I'm using it to create a blog for my 38-member paternal family. I'm trying to create a numbered/bulleted list hierarchy of each family. So, for example:

    Beth -

    * Glenn -
    o Darren -
    + Carla -
    o Lauren -

    (Beth is my blood-related aunt, Glenn is her husband, Darren and Lauren are her children, and Carla is Darren's wife)

    I want to maintain this hierarchy so it's clear that Carla married into the family, and isn't Beth and Glenn's daughter. But the problem is when I try to add Lauren as a bullet below Carla, left aligned like Darren is, there's a large gap between Carla and Lauren. This is quite frustrating, since I pasted that bit directly from the "visual" view when editing the page, so as you can see, it looks fine there, but it's coded wonky so that the gap appears whenever I add another bullet and try to "cinch it in." Here's the code in my page:

    1. Beth -
      • Glenn -
        • Darren -
          • Carla -
        • Lauren -

          • I would normally post the link to my page, but I've made the whole site private, as it has lots of personal info about my family. I'm sure I can change that if it's necessary to have my question answered, however.

  2. raincoaster
    Member

    Do you know HTML coding? I think you're going to have to code it by hand, not use the Visual Editor icons.

  3. vonhoffmans
    Member

    Whoops, thought I was posting in plain text. Maybe this will work?

    1. Beth -
      • Glenn -
        • Darren -
          • Carla -
        • Lauren -

  4. vonhoffmans
    Member

    Well that's a bit silly--I can't delete my own post? Hrm.

    Anywho, I have been playing with the HTML code for about an hour now, but all the tags are closed, or deleting them only changes the alignment of Lauren so she's lined up with Carla--it doesn't ever close the gap.

    The coding seems to be mad when I try to "go up a level" after a descending order of Beth, Glenn, Darren, Carla.

  5. raincoaster
    Member

    If you want to post code for us to look at, post it between backticks, which are the things on the same key as the ~

  6. vonhoffmans
    Member

    Just noticed that line...eep!

    At least you can see in my above post where the gap is coming in.

    <li>Beth - June 26th, 1951
<ul>
	<li>Glenn - April 17th, 1949
<ul>
	<li>Darren - July 13th, 1976
<ul>
	<li>Carla - July ??, 19??</li>
</ul>
</li>
	<li>Lauren - October 24th, 1984</li>

  7. devblog
    Member

    Your HTML seems wrong... unless, of course, you didn't paste all of it. Does yours look something like this:

    <ul>
	<li>Beth
		<ul>
			<li>Glenn
				<ul>
					<li>Darren
						<ul>
							<li>Carla</li>
						</ul>
					</li>
					<li>Lauren</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

    Hopefully my code will display as it should...

  8. vonhoffmans
    Member

    No, there's no "sideways V." And that's all the code for the Beth-Lauren bulleted list.

    I've done ton of other bulleted lists successfully on other pages, but none of them have the sideways V--they're all left aligned.

    I typed the bulleted list into the visual view, and then when I switched over to the code view, that's what it presented me with.

    I'm using the Ocean Mist theme--perhaps there are known problems with it?

  9. vonhoffmans
    Member

    I just input your code and there's still the gap between Carla and Lauren--although everything's aligned correctly according to the hierarchy!

  10. devblog
    Member

    hmm, maybe the theme's CSS is messing things up.

    I don't know, for this kind of list, have you consider using definition lists instead? It could give you a better result.

  11. devblog
    Member

    BTW, what's the URL of your blog? I'd like to see the source code in your blog, if it's not set to private, that is.

  12. vonhoffmans
    Member

    It is set to private, since it has a lot of personal info about my family members. The source code of the bulleted list that I'm having trouble with is listed above (Post #6).

  13. devblog
    Member

    yeah, post #6 is the code I gave you... Make sure whatever is inside the li tags is text only and doesn't have any html elements that might be defined in your CSS, thus, messing things up. Otherwise, Give using definition lists a thought, or try changing themes, that might fix the gap problem.

    Best!

  14. vonhoffmans
    Member

    I think the issue here is that whenever I use these tags:

    </ul>
</li>

    The code turns it into a blank line. That same code exists between all the gaps in my list (though I want all the other gaps to stay). Is there a way to code it so that I can shove the "Lauren" line over to be in alignment with the "Darren" line without using those codes next to each other?

  15. devblog
    Member

    Those are closing tags and those are necessary. Leaving them out is bad practice and it's frowned upon.

    Without being able to see what you see and the source code to check what other elements might be messing things up, I can only do so much. As a developer, I need to see the problem to find the solution, but here I'm just guessing...

    <u>Have you consider the other options I suggested?</u>

    Otherwise, let's try this:
    a) Tell me what theme you're using
    b) Do you have the CSS upgrade?
    c) If you do, Have you change any ul definitions in your CSS that might be affecting the way they're being displayed?
    d) Can you give me a mockup of what you're trying to post so that I can try to replicate this problem myself?

    If you give me this information, I cant' promise to work on it tonight but maybe tomorrow after work or Saturday. If that's okay with you, I'll see what I can do.

  16. vonhoffmans
    Member

    Of course I've considered your other options. I just want to really see this through and see if I can make the bullets work. I think the visual representation of the little circles is quite nice, and if I can make them work, I'd be delighted.

    This is my source code for the entire list:

    <div id="content" class="narrowcolumn">

    		<div class="postwrapper" id="post-6">
			  <div class="title">
				<h2>Birthdays</h2>

			  </div>
			  <div class="page">
				<div class='snap_preview'><p>Dad/Grandpa - Mom/Grandma -</p>
<ol>
<li>Beth - June 26th, 1951
<ul>
<li>Glenn - April 17th, 1949
<ul>
<li>Darren - July 13th, 1976
<ul>
<li>Carla - July ??, 19??</li>
</ul>

</li>
<li>Lauren - October 24th, 1984</li>

    This is what the code looks like when it's implemented:

    1. Beth - June 26th, 1951
      • Glenn - April 17th, 1949
        • Darren - July 13th, 1976
          • Carla - July ??, 19??
        • Lauren - October 24th, 1984

          • I just want to preserve the bullets, have Lauren and Darren lined up with each other, and close the vertical gap between Lauren and Carla.

          Thanks in advance! I'll be working on this blog for at least a few more weeks before I "unveil" it to my family, so there's plenty of time for a solution to hopefully surface.

  17. devblog
    Member

    Great. Now, can you please tell me what theme are you using? I wanna replicate this myself.

    Thanks.

  18. vonhoffmans
    Member

    I'm using the Ocean Mist theme. It's so pretty--I hope I don't have to ditch it.

  19. devblog
    Member

    Thank you.

    Yeah, it's the theme's CSS what's causing this. I made a test on one of my blogs, please check it out: http://dolfint.wordpress.com/2007/11/30/ulol-test/

    In order to make it look like that, you'd need to purchase the CSS upgrade and modify the rules for the ul/ol elements.

    The code I'm using to list your data is:

    <ol>
	<li>Beth - June 26th, 1951
		<ul>
			<li>Glenn - April 17th, 1949
				<ul>
					<li>Darren - July 13th, 1976
						<ul>
							<li>Carla - July ??, 19??</li>
						</ul>
					</li>
					<li>Lauren - October 24th, 1984</li>
				</ul>
			</li>
		</ul>
	</li>
</ol>

    I'd like to suggest you to use it.

    If you decide to purchase the CSS upgrade, let me know and I'll give you the CSS code and further instructions on how to implement it.

    Once you've seen my example, please let me know so that I can delete it from me blog.

    Thanks.

  20. vonhoffmans
    Member

    Thanks for your help. Unfortunately, purchasing the CSS upgrade isn't an option right now. But perhaps I can suggest that the theme be tweaked by the developer to make sure the ul/ol behavior is modified to behave correctly, if this is not what he intended.

    That post can be deleted--thanks for explaining the root of the problem!

  21. timethief
    Member

    But perhaps I can suggest that the theme be tweaked by the developer to make sure the ul/ol behavior is modified to behave correctly, if this is not what he intended.

    If you wish to make that suggestion to staff then there is a "support" button on the top right hnad corner of any admin side blog page you can use. Support hours are Monday-Friday 8-4PM Pacific time.

  22. vonhoffmans
    Member

    Yep, just sent them off a message.

    By the way, I've seen a lot of your helpful posts on the forums and must say that I'm very impressed! Great to see people using the Internet to make a positive impact on other people :)

  23. timethief
    Member

    Thanks for the praise but please don't forget that devblog deserves your praise too. After working all day as a web developer, he helps bloggers who have paid wordpress.com for css upgrades, without any benefit issuing to himself at all. :-)

  24. devblog
    Member

    Thank you, TT :)

  25. timethief
    Member

    You're most welcome. In my book you're a prince* :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags