WordPress 2.5 Tip: Oh Those Pesky Bullets Just Won’t Line Up!!

June 16, 2008 by Trish Jones  
Filed under Website Promotion Strategies

WordPress Blog BulletI don’t know about you, but I like consistency when I write my blog posts. 

I take the view that my blog is like my “shop front” and I like things to look neat and tidy. 

Now, before WordPress 2.5, I and the other Semiologic Pro users were blessed with a WYSIWYG editor that the developer, Denis de Bernardy customised and, I loved it.  The new text editor that comes with WordPress 2.5 is okay but in my view, it’s feels like we’ve been relegated to a 3rd division WYSIWYG editor …

There’s no table icon, no highlight, no font size change and no font style change and what’s worse, they have so say streamlined the HTML coding but in my view, it’s a headache!  Changes to the HTML code just don’t always stick and the text editor seems to have a mind of it’s own.

I’ve worked out how to make some of the changes but on one of my blogs, I put the entire page HTML code in “Notepad” (not Wordpad) and each time I want to make a change, I simply update the Notepad document and copy and paste the code into the text editor.

I know … fine if you know and understand HTML!

Well, each time I come across one of those pesky little issues, I’ll let you know about it and, since I’ve just had to tackle one, I thought I’d create the first of the blog post series …

This one relates to those pesky bullets that just won’t line up!!

I don’t want my bullets to look all sqashed up as though I have to pay for each pixel space on my blog post … I want my reader to see some white space around each bullet point so it doesn’t look like this:

  • bullet one
  • bullet two
  • bullet three

So, in times past, with the old WYSIWYG editor, you could simply go to the end of each bullet, hold down the shift key and press enter … not any more.

So what about going to the html code and adding <p> … nope, doesn’t always work.

But I want my bullets to look like this:

  • bullet one 
  • bullet two 
  • bullet three 

So, what did I do?

Okay, here is the original code:

 <ul>
 <li>bullet one</li>
 <li>bullet two</li>
 <li>bullet three</li>
</ul>

And by just adding </span> at the end of each bullet like so:

<ul>
 <li>bullet one</li></span>
 <li>bullet two</li></span>
 <li>bullet three</li></span>
</ul>

you get an extra line space between each bullet.

You do have to be in “code view” to make these changes - i.e. you have to select the HTML tab on the text editor so you expose the source code.  If you’re not at all familiar with HTML, I would suggest finding some tutorials online before you tackle this … I have actually written a HTML Code Guide For Bloggers but not published it yet … I know, gotta get my skates on!

Anyway, one more thing, generally when you make changes in code view by clicking on the html tab of the text editor, click save before switching back to the visual tab … the editor has a habit of doing strange things and you may find your code messed up.

Hope this little tip saves you from tearing your hair out!

 

You new here? If so, you may want to subscribe to my RSS feed. Thanks for visiting!

Comments

12 Responses to “WordPress 2.5 Tip: Oh Those Pesky Bullets Just Won’t Line Up!!”

  1. Seth Garrison on June 17th, 2008 5:15 pm

    Thanks Trish

    Last night I was experiencing similar frustrations with the
    wp wyswyg. The tip about saving befor switching to visual was the one that was magic for me.

    A mind of its own is right.
    Nice tip also for using for sidebar spacings

    Seth

  2. Trish Jones on June 17th, 2008 5:23 pm

    Excellent Seth,

    Pleased this worked for you.

    Another tip is that if you go back and change anything, the code can get messed up again so my suggestion is to copy and paste it into notepad … just in case.

    Perhaps there will be a fix in WP 2.5.2 since blogging is supposed to be easy but this current editor in my view is enough to make a newbie give up. :-(

    Trish

  3. James-DigitalKeyToInfo on June 19th, 2008 10:16 pm

    That last tip about save before switching back from html view will be a real saver! Why didn’t I think of that?
    I actually prefer the bullets closer together, perhaps a custom.css for the bullets would save you time. While the newer editor does lack some features compared to the older Semiologic editor, I kind of like it. It is a vast improvement for non Semiologic WP blogs, we’re just spoiled. There is a plugin that adds a lot of the missing features to the new editor, have you tried it? I haven’t had a chance to see if it works with SP yet.

  4. Trish Jones on June 19th, 2008 10:42 pm

    Hi James,

    I haven’t seen that new plugin yet but I agree, the WP users must have thought it was Christmas with the release of this new text editor.

    And, thanks for that great tip about changing the bullet preferences in the custom style sheet. That really is a time saving tip!

    Do you know what the add on plugin is called? I’d love to check it out.

    Thanks again James,

    Trish

  5. Cassie on August 2nd, 2008 6:54 am

    I find that I spend more time trying to properly format my blog posts than it takes to actually write them.

    I was frustrated with the spacing in between bullet points until I found this post, so thank you! One less thing to get annoyed about when posting in Wordpress.

  6. Trish Jones on August 2nd, 2008 8:14 am

    Cassie,

    It’s when I read comments like this that I’m reminded that I must do more of these “how to” posts. I know exactly what you mean aout taking more time to format your blog than to write it.

    Have you tried the TinyMCE Advanced plugin. If not go here to get it http://www.laptoptips.ca/projects/tinymce-advanced/

    This plugin really has eliminated most of the annoying formatting issues in WordPress 2.5.

    Best,

    Trish

  7. Cassie on August 2nd, 2008 8:26 am

    Thanks Trish! I never heard of that plugin before but I love all the extra options I have now. Can’t wait to publish my next post :)

  8. Stefan on August 23rd, 2008 6:10 am

    Or you could just add some margin in your CSS. Doesn’t that make more sense?

  9. Trish Jones on August 23rd, 2008 9:17 am

    Stefan,

    Not sure I follow since adding margins in your CSS would move everything across. I wanted vertical space. That said, I’m sure you could add some space in the CSS for that but for the folks I’ve consulted with, most of them don’t know how to access their CSS so it would be hard for them to change it.

    Thanks for the tip though.

    Trish

  10. Atlanta Window Replacement on October 30th, 2008 9:51 pm

    Great tip! But keep in mind that if you use the element, without the opening element, your code will no longer validate to current w3c web standards. However, there is another easy fix that is valid.

    Use: Something

    or, you can add the above command to your CSS file…hope this helps somebody.

  11. Atlanta Window Replacement on October 30th, 2008 9:53 pm

    alright, did not allow me to use the code so I am going to try again with the .

    Great tip! But keep in mind that if you use the element, without the span opening element, your code will no longer validate to current w3c web standards. However, there is another easy fix that is valid.

    Use: Tag: li style=”border-bottom:10px”> Something “Close Li Element.

    or, you can add the above command to your CSS file…hope this helps somebody.

  12. Trish Jones on October 30th, 2008 10:54 pm

    You’re a star!!

    Thanks for the great tip … I hadn’t realised that about the w3c complience.

    Appreciate you,

    trish

Comments: Time To Have Your Say!