I am using the TinyMCE gem with Rails (if that even matters) to generate text on my site. All the sudden bullet points are not appearing. (They used to display just fine.)
After all the ERB is rendered, the final HTML is pretty unstyled and boring (it looks like this...)
<ul>
<li>Text here</li>
<li>More text here</li>
</ul>
There is no CSS that speaks directly to bullets (ul, li, or ol).
Looking at other StackOverflow posts (like this) you're supposed to ensure that <li> tags have the css property display: list-item, but when I look at them in the Chrome inspector, they do have this display property.
You can see the issue live here if you want to verify that this property is correct.
Other than this, I'm not sure what could be causing the issue. What else can I check for? I've never had bullets just disappear before!
As per your live issue here
overflow-x: hidden; on <li>
is hiding the bullets.
Removing it or adding
overflow-x : unset; may help
Related
Opening this simple jsfiddle in Firefox renders differently than in Chrome and other browsers.
CHROME
FIREFOX
I have actually been trying to make it look like Firefox in other browsers, i.e the bullet position follows the alignment of the text. Note that i'd also want the next list items to be centered, i.e not aligned based on the bullet position of the first one, see screenshot example. Anyone know a way?
I have seen answers using list-style-position: inside, but can't live with the side effect of the difference in the gap between the bullet and the text.
<ul>
<li style="text-align: center;">Hello I'm Centered</li>
</ul>
You could try using a pseudo element like :before instead to get the desired effect across all browsers. By setting the margin-right you can choose the spacing yourself too.
li{
text-align:center;
list-style:none;
}
li:before{
content:'•';
margin-right:7px
}
What's happening is that list-style:none hides the default bullet and by using :before you're able to add it back in as an inline pseudo element.
Traditionally browsers are rather free what exactly to do with the dot in lists. I can easily imagine situations, where Firefox’ solution results in a better rendering.
If the <li> makes trouble, move the text alignment one element farther down, i.e., add a helper element:
<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>
Disadvantage is, that you introduce an element solely for reasons of styling, but in my experience pragmatism beats purism in such an isolated case.
Sorry about the simple question..
do anyone know why my images on the button section of this page are not aligning correctly. the image on the far right seems to be pushed down. Doesn't anyone know what's causing this problem?
Link to Issue
You have a bunch of  's that aren't in tags. Looks like that seem to be the issue after removing them via Firebug. Remove them and it should line up.
There is a lot of white space after deleting it:
When I inspect the page I see extra html elements inserted into the document
</li><!-- ITEM ENDS HERE -->
<li class="item2">
The extra "nbsp"s are throwing off the alignment.
You need to remove any spaces or new line between </li> and <li>, so in the HTML mode of your CMS it should literally read </li><li> and not something like:
</li>
<li>
If that's somehow not possible, contact the developers / forum of your CMS and ask there for help.
This is not valid html. You need to fix that first. Run your page through a validator and correct the "Element div not allowed as child of element ul in this context" errors.
Lots of whitespaces above each <li>. Remove them and it should work fine. Use Chrome Developer Tools or Firebug to check 'em out.
I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it.
I have a list set out like the following
<div id="sidebar">
<h2>Our Services</h2>
<ul>
<li>Furniture</li>
<li>Kitchens</li>
<li>Bedrooms</li>
<li>Flooring</li>
<li>External Joinery</li>
<li>Commercial Work</li>
<li>Staircases</li>
<li>Tiling</li>
</ul>
</div>
But for some reason firefox doesnt render the whole list item as a link, only the text.
It works across other browsers (even IE) but not firefox.
Change
<li>Furniture</li>
To
<li>Furniture</li>
Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A
Update
You can set the style of A to display:block as mwgriffith suggested on comments.
or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery
I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.
something driver me crazy here
i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find
<ul><li>something</li><li>something</li><li>something</li></ul>
but when i write it like this i got +4 pixel i don't know from where
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them
Any solution? css maybe
::Extra info
i found that the problem comes from closing and starting li tag this worked out
<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>
any idea ?
You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.
i would start by using a reset CSS like this one
I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.
What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.
There are two options available to deal with this (in addition to your first example):
<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>
(Note that the first two </li> tags aren't closed until the following line.)
<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>
Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.
I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
You can avoid the rendering issues but keep the code maintainable like this:
<ul
><li>item 1</li
><li>item 2</li
><li>item 3</li
></ul>
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float is your friend.
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;
to your li tags to get them next to each other.