I cannot figure out how to implement a bullet list in the menu on this page. So far I have attempted these CSS rules for <ul> elements:
list-style-type: disc !important;
list-style: disc !important;
list-style-position:inside !important;
list-style-image: url("http://ils.unc.edu/~ferrerih/web-dev-project/li-red-bullet-smaller.png") !important;
When I inspect the relevant elements in the browser (Chrome) I get no indication that any of these rules are being overridden by anything; none of them are faded or crossed out. They simply do not have any visible effects. The page uses Bootstrap; I am not sure if this has anything to do with it.
For whatever reason, the ul element with class .dropdown-menu has a number of CSS styles that mean your entire menu cannot be seen.
Here are the offending styles that should each be removed entirely from your CSS file or updated to be some other value:
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
}
Related
I have an imported set of CSS styles. One of those styles is the list-style-type: none; that you can see in the screen-shot.
I'm implementing a component right now where I need numbered list items for an <ol>. No big deal, I just write a CSS style that's more specific than the imported style, right?
Except for some reason, even though the imported style is overridden, it's still effecting the list when I load the page! Once I disable it in dev-tools, the numbers appear just how I want them, but dev-tools shows that the imported style is crossed out and shouldn't have any effect in the first place.
How is it, that a CSS style that's clearly being overridden is still somehow effecting the element it's targeting?
Any ideas or insights would be very much appreciated. Thanks!
The style which sets list-style-type: none is applied to ol elements and li elements.
You are overriding it with a more specific selector for the ol element, but the li element has its defaults overridden so doesn't inherit from the parent ol.
This example shows how that works:
ul,
li {
list-style-type: none;
}
ul {
list-style-type: number;
}
.b {
list-style-type: inherit;
}
<ul class=list>
<li>aaa
<li class="b">bbb
</ul>
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
I have a CSS problem on this page: http://www.fastclickad.com/ask-for-your-free-seo-analysis/
For some reason, bullets still show although I inserted in the style sheet several instructions so the list styles don't inherit from the theme.
When I "inspect element" with google Chrome everything seems to go smooth, except the bullets still show!
Can you help me?
You have a border specified which, if removed, prevents the arrow:
.aritclecontent ul li::before, .sidebarwidget ul li::before {
border-left: solid #0473B2;
}
So you'll need to do something like:
.gform_body ul li:before {
border-left:none!important;
}
The !important could be frowned upon, so you might wish to analyse your styles and refactor accordingly to remove the need for using it, if indeed it is necessary.
try this ..
list-style-type: none;
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
I'm using *{margin:0; padding:0;} and this is the first time that it breaks me in something. List paddings and margins are 0 too, so the indentation is lost. and I would like to reset them to their original state, how is this possible?
I've tried this with no success:
ul,ol{
margin :auto; /* This Works */
padding:auto; /* This Not :( */
}
So how should I fix this?
The point of a reset is to eliminate variations due to browser defaults. In other words, there is no definitive way to "unreset" because different browsers may have different defaults.
However, you can choose your own default values, and I think that's what you're trying to do here.
A good way to do this is to look at a browser's default stylesheet (you should be able to find how to do this by doing a search). For example, you can see the Firefox default stylesheet with this URL: resource://gre/res/html.css
There is no way to restore default values, but changing padding of 'ol' or 'ul' and 'li' it will look fine. This works for me..
ol{
padding: 0 25px;
}
ol li{
padding-left: 0px;
}
As you can see if you play with the snippet below, the initial value for list padding-left is 0. My point is regarding your statement:
I would like to reset them to their original state
what I'm trying to illustrate and what #jdigital was kind of saying in his answer is that there is no original state for CSS properties, all of them are dependent on their browser implementation, e.g. default browser stylesheets.
ul {
outline: 1px solid coral;
list-style: none;
padding-left: 48px;
}
li {
outline: 1px solid lightseagreen;
}
ul {
padding-left: initial;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
You have to keep in mind when you reset padding and margin such as *{padding: 0; margin: 0;}. The ul tag have some padding as padding-inline-start: default_value;.
The following these steps you can get rid of this list-style-position: outside; issue :
First of all to find out the default value of padding-inline-start open your browser developer tools and select your ul tag.
In the styles tab below or aside to the Element tab (depending on the resolution of Developer tools you have opened) scroll and find the ul tag styles from user agent stylesheet it will look like this
As you have seen the styling of padding-inline-start in my browser its value is 40px. Now note this value.
Then goto your favorite code editor where you are coding and set the style of specific ul such as ul{padding-inline-start: 40px}
Don't forget to remove the comment we have make at the start to see the effect while resetting the margin and padding
Hope this will work for you.
revert is what you are looking for. It will basically revert any styles made BY YOUR STYLESHEET and not the user-agent/browser stylesheet.
ol, ul, li, {
margin: revert;
padding: revert; /* Padding is what gives the indentation */
}
Reference:
revert in CSS MDN Docs
What is Style Origin
If I understand the question correctly, you could try adding !important; as in the following:
ul, ol {
margin : auto;
padding: auto !important;
}
Normally, it overrides all earlier predefined values.