I want to replace a text in a menu item with an icon via CSS. The Icon should then be clickable. I tried it with the following code and it looks good in Safari and Chrome. However Firefox displays "Home" instead of the image.
Does anybody know what the solution for Firefox is?
http://codepen.io/anon/pen/vEQZLb
<ul id="menu-home" class="menu genesis-nav-menu menu-primary">
<li id="menu-item-1951" class="home menu-item ">
Home
</li>
<li id="menu-item-17414" class="menu-item">
Link 1
</li>
</ul>
.nav-primary ul.menu > li a::before {
visibility: visible;
}
.nav-primary ul.menu > li.home a::before {
content: url('images/home_icon.jpg') no-repeat;
position: relative;
bottom:-2px;
}
Thanks!
Your content declaration contains a no-repeat, which appears to be a leftover from a previously-used background declaration. It needs to be removed:
content: url('images/home_icon.jpg');
position: relative;
bottom:-2px;
Additionally, although WebKit is known for egregious spec violations, this shouldn't work in Safari and Chrome just as it doesn't work on any other browser. There is really no reason for it to — the grammar doesn't even expect a no-repeat token there. Even though the recent rewrite of css-content offers a way to concatenate replaced content with arbitrary strings, even if it's implemented in Chrome, the no-repeat token here is clearly neither a string nor any of the valid values for content, and shouldn't be treated as such.
Also, if you're looking to replace the text with an image, you will probably need to position your image absolutely, over the text, and not relatively, since that simply inserts the image before the text. How you will implement this exactly depends on your layout, but I figured it was worth pointing out.
In addition to the no-repeat problem mentioned by others, your CSS selectors are incorrect in several ways.
The refer to the class .nav-primary when there is no such class in your example, it is .menu-primary. For the rest of this answer I will correct that mistake and use menu-primary.
.menu-primary ul.menu is asking for ul.menu inside a tag of class menu-primary and so will not match your HTML. Instead, since the ul already has the class menu-primary simply refer to ul.menu-primary.
Putting that all together, its ul.menu-primary > li a::before and ul.menu-primary > li.home a::before.
The content property doesn't include the background-repeat property.
You'll have to remove no-repeat in content: url('images/home_icon.jpg') no-repeat; for that rule to be valid. My guess is Chrome is allowing the error while FF is being strict about it.
Related
If you look at the top nav menu of http://www.footballpractice.org, you'll see that I've tried to add the dashicons in there using CSS classes assigned via Wordpress menu. The dashicon looks fine in the regular state, but doesn't take on the hover effect. What's the best way to apply hover classes to a :before element?
One way to do it is by applying :hover before :before.
div:hover:before {
...
}
For your website that would be:
.dashicons-megaphone:hover:before,
.dashicons-search:hover:before,
.dashicons-groups:hover:before,
.dashicons-format-video:hover:before {
...
}
Although this is what you ask, it's not what you want. You want the icon to be included in the hover effect, and that's why it's better to set :before on a span inside the a tag.
Updated html
<li>
<a href="#">
<span>Drills</span>
</a>
</li>
Updated css
.nav-header .genesis-nav-menu li a span:before {
content: "\f488";
font: normal 18px/1 'dashicons';
margin-right: 5px;
}
That will do it, let me know if you need more help.
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;
}
This is driving me nuts. Here is some HTML and CSS that I have on a sample page. The first intent was to have LI without any markers. I have tried everything I could, but the list items will show up with standard decimal marker. I used developer tool that comes with IE9 to inspect UL and LI elements. It seems that IE does not recognize "recentAnnouncementsList" css class at all. These elements do not show the style applied on it. This whole set up works perfectly on Chrome. What am I missing?
Thanks
ul.recentAnnouncementsList
{
margin-left: 0px;
padding-left: 5px;
}
ul.recentAnnouncementsList li
{
margin-left: 0px;
padding-bottom: 5px;
list-style-type:none;
}
ul.recentAnnouncementsList li a{
color:#675DF0;text-decoration:none; font-size:0.85em;
}
ul.recentAnnouncementsList li span{
display: block;
text-indent: 0px;
text-transform: none;
}
<td>
<div>
<ul class="recentAnnouncementsList" id="recentAnnouncements">
<li>Released 1</li>
<li>Release 2</li>
</ul>
</div>
</td>
Finally I have solved this problem.
The problem was that I had added a new CSS class named "container" in the file. I am not sure if this is some bug in IE and FF, but CSS file was getting clipped at start of that style. I found this out by looking in the developer tools for IE. When i looked at loaded file in IE, it was not complete. All my styles related to my UL/LI tags were present after that class definition. After I deleted "container" class from file, everything went back to normal.
Thanks for all your input and suggestions.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both
IE 6-9 all have limit on the number of selectors declared in a CSS file. I assume that styles declared for .recentAnnouncementsList are located above the limit and completely ignored. There are tools are resources which help to split big CSS files into several parts and keep the number of selectors in a single file below the limit:
blesscss - command line tool
css_splitter - for Rails apps
gulp-bless - for NodeJS projects
currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:
Link title <img class="leaving" />
and css:
.leaving {
background-image: url("images/leaving.png");
height:10px; width:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
how do i get rid of the border?
also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.
<a href="link">
<h3>Title</h3>
</a>
a h2,h3{
color:#00264B;
text-decoration:none;
}
"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?
thanks.
you have a possible bug in your code :)
Here's what you have so far:
a h2,h3{
color:#00264B;
text-decoration:none;
}
The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)
Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:
a h2, a h3{
color:#00264B;
text-decoration:none;
}
Notice that I've added another "a" to the CSS
Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:
h2 a, h3 a{
color:#00264B;
text-decoration:none;
}
But that might not work with your existing code:
Hope this helps
It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below
<body>
Link title <span class="leaving"/>
</body>
</html>
or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below
.leaving {
background-image: url("images/leaving.png");
height:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
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?