• 0

DMS 1 Add <ul> tag before <li> removes bullets


Question

Posted · Report post

On the page below, I have a Hero section which contains an unordered list that with a few list items. However, when I add <ul> tags around the list items all of the bullet points disappear. If I remove the ul tags, the the bullets will disaply, but I don't think this is valid HTML.

 

Any suggestions would be appreciated

 

http://blog.abodo.com/apartment-search-app/

 

Wordpress 3.9.1

PageLines v1.1.8

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

OK, this is because by default the list styling comes from the .hentry class which is in most sections, but isn't there for the Hero so the it uses the basic styling for <ul> or <ol> which is set to list none.

 

So if you want to use a list in a Hero section, you will need to give the <ul> a class and add some basic styling or use the following:

 

.section-hero ul {
list-style-type: disc;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

On the page below, I have a Hero section which contains an unordered list that with a few list items. However, when I add <ul> tags around the list items all of the bullet points disappear. If I remove the ul tags, the the bullets will disaply, but I don't think this is valid HTML.
 
Any suggestions would be appreciated
 
http://blog.abodo.com/apartment-search-app/
 
Wordpress 3.9.1
PageLines v1.1.8

I had this issue awhile back and had to add padding or margin left CSS to move the bullets over so they were visible. Start with something like 1% and play with it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

atcdomainsolutions thanks for that feedback... but I was actually asking a different question. my list items are displaying correctly, but only if I DON'T include the <ul> tags. It's my understanding that ul tags are appropriate and required fro cross-browser compatibility. However, if I add them the bullets disappear.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

<ul> tags should be the indicator to your browser that the list is an unordered list and should come before <li> 

 

i can see on your site you have http://screencast.com/t/yclegVXyCaW

 

Seems to be working - did you manage to fix this? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies, I understand the purpose of ul tags. As I noted above, the problem was that when I included ul tags before the li tags, the bullets disappeared. They did appear when I removed the ul tags, but that would be invalid HTML.

 

It is working properly now because I switched from a Hero section to a MediaBox to work around this issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What code did you use, can you provide it in your reply please and also you added your list code to a Hero section, which caused the bullets to disappear ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny yea, I don't have exact code, because I rebuilt the section. But it looked like this:

 

<ul>

<li>first list item</li>

<li>second list items</li>

<ul>

 

when I included the ul tags, the bullets did not display.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny thanks 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Regarding the above, I figured it out.  Also discovered the html tag for bullet point: "&bull;" which can be inserted just like the non-breaking space "&nbsp;"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now