I am having an issue with an li tag being written as element.style { display:none; } when I have an id or div attached to it. For example:
<ul id="nav>
<li class="another">this</li>
</ul>
In this instance I could either write ul#nav {} or #nav li{} or .another{} which I could then put inside anyone of those a display:inline-block; . The problem is I do that, but the web site still recognizes is as element.style {display:none;} for some reason and I can't figure out why the CSS won't work. I've even tried to do
<li style="display:block;"></li>
but that didn't work either.
When inspecting in Chrome, element.style means that it's an inline style, ie.
<li style="display:none;"></li>
Since the original markup obviously doesn't contain it as you've tried to override it, it is likely being set by JavaScript.
I recommend looking to see if you can find where it is being set in your JS, if that fails or you can't change it, you can always use the less recommended approach and flag your style as !important which will override inline styles.
#nav li {
display:block!important;
}
Related
I always modify Bootstrap by including my custom stylesheet after the Bootstrap one, in this particular case, like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mainstyle.css" rel="stylesheet">
I have a list on the site, some of whose elements also have the class advanced-only.
The list elements have the style in Bootstrap:
.nav > li {
position: relative;
display: block;
}
And the advanced-only class in my custom stylesheet has:
.advanced-only {
display: none;
}
There are other styles such as color and border but they are not relevant here. As you see, the advanced-only elements should be hidden when the page loads, but they are displayed. When I inspect one of these elements, I see that the .advanced-only style is crossed out and the .nav li style from Bootstrap is active. When I deactivate the Bootstrap one from there, then the custom one activates and all is well.
Also, when I do
.advanced-only {
display: none !important;
}
it hides it like it should. However, this would interfere with a bunch of Javascript code (for example, show() and hide() won't work properly with !important elements) so I would like to understand why Bootstrap is overriding the custom style and what I can do about this.
The HTML looks like this:
<ul class="nav nav-sidebar">
<li>
<a>Pending Actions</a>
</li>
<li class="advanced-only">
<a>Hidden stuff</a>
</li>
</ul>
That is because the specificity of your selectors are lower than the Bootstrap selectors. Strongly suggest you reading http://www.w3.org/TR/CSS2/cascade.html#specificity.
The specificity is calculated based on many factors, not just by the order of definition.
For example, this selector .nav > li has an attribute selector and a tag selector, while your rule .advanced-only has only an attribute selector. So your rule is not making affect. Try to make your selector more specific when giving customized styles.
This is because bootstrap's styling is more specific than your custom styling.
To fix this you need to add a more specific selector, e.g:
nav .advanced-only {
display: none;
}
For more reading on CSS Specifity check out this link.
I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
I have this css:
fieldset li {
padding-bottom: 0em;
}
However, it wasn't behaving properly, and using firebug, I see that style has a line drawn through it, indicating it is being overridden. Is there a way in firebug to tell what is overriding a style?
In the style tab, this is all I see:
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
Default.CSS (line 42)
fieldset li {
padding-bottom:0;
}
Default.CSS (line 27)
Inherited fromol
fieldset ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
Default.CSS (line 23)
Inherited fromtable#ctl00_ContentPlaceHolder1_ScorecardEdit1_frmEdit
element.style {
border-collapse:collapse;
}
When I go to the computed tab, I see it has padding-bottom of 16px. How can I find out where this is coming from?
All the answers so far seem to imply I should see all the applied styles in the style tab (and I swear this is how it worked last time I used firebug), but this time I am not seeing all styles!
(I am running Firebug 1.5.2)
Solution
I'm an idiot. It was caused by this (which was staring me right in the face):
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
It was the em that threw me off. That's what you get when you copy / paste CSS from the web without understanding it.
They are sorted, so the most upper definition overrides the lower one(s).
What ever styles are above the crossed out styles are usually overriding it. If that is not the case, start clicking the disable style icons and see where the issue is.
If a CSS rule is overridden although it is the top-most rule of that property, look further down for a rule that has the !important override set.
Just locate the instance of that attribute name that isn't crossed out, that is the one overriding.
If you select the misbehaving item in question, it should give you a list of all the styles applied to it. The bottom should have the most specific styles. If you start at the fieldset li style, you should be able to scroll down until you see one that has overridden it.
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?