I have a site that's using SCSS and Compass. I used the Compass reset at the top of my SCSS file, #import 'compass/reset'; and it's worked fine.
I now have an unordered list that I actually DO want the default bullets on. However, no matter what I've tried so far, no bullets.
.content {
padding: 10px;
ul {
list-style: disc;
li {
list-style: disc;
margin-bottom: 10px;
}
}
}
What am I missing here? How to override the reset for this list?
try to use list-style-type instead. some browsers may be able to deal with list-style though.
for me looks like you need to add left padding and list style type to your ul tag.
ul {
list-style-type: circle;
padding-left: 20px;
}
Related
I want to remove(hide) bullets (dots) with css code, but I can`t
Please tell me what I do wrong:
1) I give class name in my case: .no-bullets
2) I use this css code:
.no-bullets {
list-style-type: none;
}
this is not working for me...
Then I use this css in theme stylesheet:
ul
{
list-style-type: none !important;
}
again nothing...
Please help me with this, thank you in advance
here is my suggestion:
ul {
list-style: none;}
the list-style properties apply to elements with display: list-item only ,make sure your list elements doesnt have any other display style.UPDATE
seeing your link your style.css file is overriding your custom style with list-style-type: disc; you have to get rid of this line.
UPDATE 2use this code in your custom css .entry-content ul > li {
list-style-type: none !important;
}
this will do the job quickly.
This issue appears in Internet Explorer and I have not been able to resolve it:
#test ul li {
list-style-type: disc;
float: left;
margin-left: 10px;
font-size: 16px;
}
The code above works fine in Firefox and Chrome, but in IE7 it's not displaying the bullets.
I have tried deactivating the attribute float: left and the bullets are displaying, but the list is vertical. My list must be aligned horizontally with the bullets.
I have tried add the follow attributes:
list-style-position: inside and outside and nothing.
using display: inline makes the bullets disappear.
#test ul {
list-style-type: disc
}
and nothing
I have tried changing the margin with different values, adding padding with different values, and nothing.
You could make the lis inline and the list-style of the ul to none and then emulate the bullets using the :before pseudo element:
ul {
list-style: none;
margin: 0;
}
li {
display: inline;
}
li::before {
content: "o ";
}
Of course, instead of "o" you could use an unicode character representing a bullet.
Create the bullet with an image and set it as the background.
try with :
ul{
list-style:disc outside none;
padding:0px;
padding-left:12px;
margin-left:8px;
}
Demo
might be a bit late but including a span tag inside with display:list-item seems to fix the problem when the margin and padding adjustment fails..refer https://stackoverflow.com/a/18337398/1776573. It worked for me when the margin and padding adjustments dint solve the issue..
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
I am using yui reset:
<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css"/>
and I'm having a hard time getting my ordered lists to show with decimal.
So far I'm using this, but it still seems to be overwritten to be blank?
ol, ol li{
list-style-type: decimal;
list-style-position: outside;
}
You can un-reset these styles. See: http://noscope.com/vanilla-css
What I prefer to do it have a wrapping class for my un-reset items. This way the reset remains universal everywhere else.
/* un-reset bullets */
.bullets ul {
margin:0 1.5em 1.5em 1.5em;
}
.bullets ul li {
list-style-type:disc;
}
You can use specificity to override the reset styles by using a class or id in front of your selector.
Using your developer console in Chrome or FF should be really useful in figuring out how to overwrite or determine the cause.
If you could provide a URL I would be happy to take a look.
GL!
In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.
I want to clone the menu of a hardcoded site (edit removed link)
How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?
In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.
My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}
The last CSS rule written is the one that is used, but specificity takes priority over cascading.
An article on specificity: http://css-tricks.com/specifics-on-css-specificity/
So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.
yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).
Change it to:
#block-system-main-menu div ul li ul li.leaf {
I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.
Edit: sorry, I can see you just figured that out