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
Related
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.
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;
}
I'm not able to get CSS property "margin-top" to work consistently across all broswers (IE, FireFox, Chrome).
.navmenu { list-style: none; padding: 0px; margin-top:16px; }
This works fine in FireFox and Chrome, but does nothing in Internet Explorer.
An example can be seen here : http://www.pogocheats.net/template.php
Nav CSS can be found at : http://www.pogocheats.net/styles/test.css (starting at line : 276)
Is there an easy fix for this?
Rules for list-based menus:
1) Use a CSS reset
2) Don't style the LI, other than position: float: or display:
3) Put all styling on the A-tag and use display:block
4) Clear your floats (if using them)
See my list tutorial: preview.moveable.com/JM/ilovelists
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?
I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.
I am working with the standalone 1.6 version of the accordion plugin.
The basic structure :
<div class="sidebar">
<ul id="navigation" class="ui-accordion-container">
<li><a class="head" href="#">1</a>
<ul class="sub">
<li>1a</li>
<li>2a</li>
</ul>
</li>
</ul>
</div>
and the script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.
Maybe the problem is in the CSS I have a background image in each of the sub menus:
#navigation{
margin:0px;
margin-left: 10px;
padding:0px;
text-indent:0px;
font-size: 1.1em;
width:200px;
text-transform: uppercase;
padding-bottom: 30px;
}
#navigation ul{
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li{
list-style:none outside none;
}
#navigation li ul{
height:185px; overflow:auto;
}
#navigation li ul.sub{
background:url('../images/sub.jpg') no-repeat;
dispaly: block;
}
#navigation li li a{
color:#000000;
display:block;
text-indent:20px;
text-decoration: none;
padding: 6px 0;
}
#navigation li li a:hover{
background-color:#FFFF99;
color:#FF0000;
}
Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.
-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.
I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:
jQuery('body').addClass('js');
This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.
There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:
#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }
... and then re-open before applying the accordion on dom.ready.
EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
I faced this very problem a week ago. I set the container to display:none and then used jQuery to make it show up at the appropriate time:
$(".accordion").show();
$(".accordion").accordion();
Code inside jQuery.ready() doesn't run until the DOM is ready — so it's normal for elements that will eventually be hidden to stay visible for a while. Accordion is set up this way partly for ease of use and partly for the sake of graceful degredation: content won't be missing (hidden) if JavaScript is disabled.
If you're willing to risk a page that breaks without JavaScript, go ahead and set your elements to be hidden. Then, immediately before .accordion(), show() them.
Here's an idea to maintain compatibility. It has been minimally-tested and is open to comment.
Leave your CSS alone, but add this to the top of your JavaScript (outside jQuery.ready()):
document.styleSheets[0].addRule(".yourclass", "display:none");
That way, as the page is being constructed, a CSS rule will be set up to hide your hidden elements. Then, inside jQuery.ready(), call $(".yourclass").show() to bring them back before initializing the accordion.
Do your .accordion binding directly in a <script> just below the accordion elements instead of waiting for document ready.
They'll then activate as soon as possible, rather than waiting until the page is ‘ready’ (which can take a long time especially on IE, which doesn't support the DOMContentLoaded event, so jQuery has to wait for onload, which only fires after all the images and everything are loaded).
You could set the accordion parent element to ‘visibility: hidden’, and then restore it to ‘visible’ manually when the script initialises. But then browsers with JavaScript off won't see the content at all, which isn't ideal.
be careful using this with regard to accessibility:
body {
display: none;
}
If for whatever reason javascript is turned off, then nothing will be displayed ;)
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I tried to hide the elements in the
CSS to keep them from appearing while
loading but all that achieved is in
having them always hidden.
Why don't you try making it hidden in the css, and then do this:
jQuery('#navigation').show().accordian...
I have hundreds of jQuery elements (tabs, sliders & accordions) across many portal sites. Setting hide/show styles for each isn't a realistic option.
Simple solution, hide the body until jQuery is ready and has built the elements, then show the body.
In my master stylesheet:
body {
display: none;
}
In my master javascript file, at the bottom of jQuery.ready():
$(document).ready(function() {
$("body").show();
}
I have been using css solutions like the one Tim suggested, but these would mean to hide content for people with javascript disable (or devices with no javascript support). I much prefer the solution provided by Jerph, thanks for sharing.
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}