Firefox Not Displaying Bullet Lists on Website
-
- Posts: 3
- Joined: January 25th, 2009, 12:24 pm
Firefox Not Displaying Bullet Lists on Website
Hi! Forgive me if this is in the wrong place but I'm having issues with Firefox properly displaying bulleted lists. I run a website hosted by DreamHost and use WordPress for the news section. I've been trying to get my site to look the way I want it and I have several bullet lists on different pages of the site. However, they don't show up for me. I've double and triple checked that I've used the correct codes and this is how it looks on my computer (Using Firefox 3.0.5 with Adblocker Plus and Secure Login):
However, when I asked another member of the staff to help me with this, she said she can see the bullet list just fine:
I did verify with another Firefox user about if she can view the bullet list and she can see it. Is there a way to fix this so that I may be able to see it? I can't keep running a site when things don't show up on my browser that do on others. I wouldn't think it'd have anything to do with ABP but I don't understand what else it could be.
Any help in this matter would be greatly appreciated!
However, when I asked another member of the staff to help me with this, she said she can see the bullet list just fine:
I did verify with another Firefox user about if she can view the bullet list and she can see it. Is there a way to fix this so that I may be able to see it? I can't keep running a site when things don't show up on my browser that do on others. I wouldn't think it'd have anything to do with ABP but I don't understand what else it could be.
Any help in this matter would be greatly appreciated!
- RobertJ
- Moderator
- Posts: 10880
- Joined: October 15th, 2003, 7:40 pm
- Location: Chicago IL/Oconomowoc WI
Re: Firefox Not Displaying Bullet Lists on Website
Have you tried viewing it in safe-mode?
FF 92.0 - TB 78.13 - Mac OSX 10.13.6
- a;skdjfajf;ak
- Posts: 17002
- Joined: July 10th, 2004, 8:44 am
Re: Firefox Not Displaying Bullet Lists on Website
Is this a private site ? Provide a link so others can verify...
-
- Posts: 3
- Joined: January 25th, 2009, 12:24 pm
Re: Firefox Not Displaying Bullet Lists on Website
Sorry - link is http://www.touchedbytwilight.net and I just tried it in Safe Mode and it still does not show.
- a;skdjfajf;ak
- Posts: 17002
- Joined: July 10th, 2004, 8:44 am
Re: Firefox Not Displaying Bullet Lists on Website
While I am not much help, I can confirm there are no 'bullets' showing using the latest 'test-build' of Firefox, that will be 3.2 at some point in time...
You might have a mod move this into the the webdev forum, where the experts can take a look at your code.
You might have a mod move this into the the webdev forum, where the experts can take a look at your code.
- steviex
- Moderator
- Posts: 28902
- Joined: August 12th, 2006, 8:27 am
- Location: Middle England
Re: Firefox Not Displaying Bullet Lists on Website
Moving to Web Development....
Only two things are infinite, the universe and human stupidity, and I'm not sure about the former. -Albert Einstein
Please DO NOT PM me for support... Lets keep it on the board, so we can all learn.
Please DO NOT PM me for support... Lets keep it on the board, so we can all learn.
- jscher2000
- Posts: 11734
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Firefox Not Displaying Bullet Lists on Website
Thank you page: http://www.touchedbytwilight.net/?page_id=152
Place your <li> (list item) elements inside a <ul> (unordered list) element. Then you can style that to have the presentation you like. Simply inserting <li> elements into other types of structures is going to give you random results.
Place your <li> (list item) elements inside a <ul> (unordered list) element. Then you can style that to have the presentation you like. Simply inserting <li> elements into other types of structures is going to give you random results.
-
- Posts: 3
- Joined: January 25th, 2009, 12:24 pm
Re: Firefox Not Displaying Bullet Lists on Website
Ok, that does work, now it appears like this on both my browser and my friends browser:
That's still incredibly odd to me that it won't show unless I have a <ul> in the code but it'll show up for everyone else without it. However, I also set up this page:
And didn't use a single <ul> on that page:
So how does it work on one page, and not another? And besides...one's circles, and one's squares. My OCD doesn't allow that. I really am sorry, I'm just trying to understand this.
That's still incredibly odd to me that it won't show unless I have a <ul> in the code but it'll show up for everyone else without it. However, I also set up this page:
And didn't use a single <ul> on that page:
So how does it work on one page, and not another? And besides...one's circles, and one's squares. My OCD doesn't allow that. I really am sorry, I'm just trying to understand this.
- Omega X
- Posts: 8225
- Joined: October 18th, 2007, 2:38 pm
- Location: A Parallel Dimension...
Re: Firefox Not Displaying Bullet Lists on Website
Lexiani wrote:
So how does it work on one page, and not another? And besides...one's circles, and one's squares. My OCD doesn't allow that. I really am sorry, I'm just trying to understand this.
jscher2000 explains the random results further up.
Also, ITs square because your stylesheet specifies that <ul> is square.
Code: Select all
ul { list-style-type: square; }
Use <ul> inside of <li> and its always consistent.
- jscher2000
- Posts: 11734
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Firefox Not Displaying Bullet Lists on Website
Did I mention "random results"?
Okay, the answer is: in the first case, there is no space for the bullet, because Firefox draws the bullet in the left margin of the <li> and unlike a <ul>, the container on that page reserves no space for it. In the second case, because the <li> text is centered, there is a sufficient blank area for the bullet to be drawn.
Okay, the answer is: in the first case, there is no space for the bullet, because Firefox draws the bullet in the left margin of the <li> and unlike a <ul>, the container on that page reserves no space for it. In the second case, because the <li> text is centered, there is a sufficient blank area for the bullet to be drawn.
- RobertJ
- Moderator
- Posts: 10880
- Joined: October 15th, 2003, 7:40 pm
- Location: Chicago IL/Oconomowoc WI
Re: Firefox Not Displaying Bullet Lists on Website
I suggest you read the HTML 4.01 Specification, in particular Section 10 Lists. You will find that the correct syntax for an unordered list is
While you may get away with leaving out the </LI> end tag for a transitional DOC TYPE, you won't for a strict DOC TYPE which will generate a warning in a syntax checker. It is better to be as unambiguous as possible so the browser rendering engine doesn't have to "guess" at what you intended. Bounding the list with the <UL> .... </UL> tags is required.
.
Code: Select all
<UL>
<LI>information</LI>
<LI>more information</LI>
<LI>even more information</LI>
</UL>
While you may get away with leaving out the </LI> end tag for a transitional DOC TYPE, you won't for a strict DOC TYPE which will generate a warning in a syntax checker. It is better to be as unambiguous as possible so the browser rendering engine doesn't have to "guess" at what you intended. Bounding the list with the <UL> .... </UL> tags is required.
.
FF 92.0 - TB 78.13 - Mac OSX 10.13.6
-
- Posts: 2
- Joined: May 21st, 2009, 8:39 pm
Re: Firefox Not Displaying Bullet Lists on Website
I am having the same problem.
My html code is:
<div id="left-content">
<ul>
<h2>Awards!</h2>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
</ul>
<ul>
<h2>News</h2>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
</ul>
<ul>
<h2>Articles</h2>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
</ul>
</div>
<!--end div #left-content----------------------------------------------------->
My css code is:
#left-content {
padding: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 400px;
float: left;
}
#left-content ul {
color: #067861;
font-family: "Century Gothic", Arial, sans-serif;
font-style: italic;
font-weight: normal;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 50px;
}
#left-content ul li {
color: #003333;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
list-style-position: inside;
list-style-type: disc;
margin-left: 50px;
}
I don't have this problem in Google Chrome, Safari, or Internet Explorer. I'm also using Windows Vista. Help will be greatly appreciated.
EWright
My html code is:
<div id="left-content">
<ul>
<h2>Awards!</h2>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
<li>Award article text, text, text, text, text</li>
</ul>
<ul>
<h2>News</h2>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
<li>News article text, text, text, text, text</li>
</ul>
<ul>
<h2>Articles</h2>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
<li>Article text, text, text, text, text</li>
</ul>
</div>
<!--end div #left-content----------------------------------------------------->
My css code is:
#left-content {
padding: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 400px;
float: left;
}
#left-content ul {
color: #067861;
font-family: "Century Gothic", Arial, sans-serif;
font-style: italic;
font-weight: normal;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 50px;
}
#left-content ul li {
color: #003333;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
list-style-position: inside;
list-style-type: disc;
margin-left: 50px;
}
I don't have this problem in Google Chrome, Safari, or Internet Explorer. I'm also using Windows Vista. Help will be greatly appreciated.
EWright
- jscher2000
- Posts: 11734
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: Firefox Not Displaying Bullet Lists on Website
Test without the float to see whether that is causing any issues.
Note that "list-style-position" and "list-style-type" probably should be applied to the <ul> and not its <li> elements.
Also, to avoid potential problems, only use two consecutive hyphens in a comment at the beginning and two at the end.
If none of that helps, can you post a link to a live page?
Note that "list-style-position" and "list-style-type" probably should be applied to the <ul> and not its <li> elements.
Also, to avoid potential problems, only use two consecutive hyphens in a comment at the beginning and two at the end.
If none of that helps, can you post a link to a live page?
-
- Posts: 2
- Joined: May 21st, 2009, 8:39 pm
Re: Firefox Not Displaying Bullet Lists on Website
First I tried removing the extra hyphens in the comments. That did it. It works properly now. Thank you!!!
EWright
EWright