css
#inchannel li{
width:179px;
height:40px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 50%,url(img/back_line.png);
}
.ichn0{
width:179px;
height:123px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;
}
html
<ul id="accordion">
<li>
<ul id="inchannel">
<li class="ichn0"><img src="facebook/41403_1434825607_37944358_q.jpg"></li>
<li><img src="facebook/48983_615523712_8495_q.jpg"></li>
<li><img src="facebook/41621_717814907_4472_q.jpg"></li>
</ul>
</li>
</ul>
I want to apply css on only one class but it isn't applied to one class it seems like inchannel css covers all.
can any body tell me how to apply css on only one class?
Any thought?
Thank you.
use higher specificity
#inchannel li.ichn0{
width:179px;
height:123px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;
}
#inchannel li has much more specificity tham the class .ichno.
There are several ways to combat this.
Add !important to the properties of .ichn0
This is bad practice because you can overwrite user stylesheets like this, which are used for things like screen readers, etc.
Add an ID to the first li.
This is OK, but not the way I'd go about it, personally.
#inchannel:first-child
This is how I would go about it. In my eyes this is easiest to maintain across multiple pages.
Add a class per Damen's answer.
There's absolutely nothing wrong with this approach, either. I'm just a sucker for :psuedo selectors.
#inchannel li — Applies to all li elements inside the #inchannel element (all of them, in your case.
.ichn0 — Applies to li elements with ichn0 class, regardless of what element they are inside. There is only one of these.
The reason why the first is taking precedent over the .ichn0 CSS is because of CSS specificity. The #inchannel li selector is more specific and therefore overrides the less-specific .ichn0 settings.
Changein .ichn0 to #inchannel li.ichn0 should fix your problem.
Related
If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:
HTML
<ul class="sideNav">
<li>History</li>
<li>Mission</li>
<li>Associations</li>
<li>Careers</li>
</ul>
CSS
.sideNav {
margin:0;
padding:0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:216px;
background-color:#017dc6;
}
.sideNav li {
list-style-type:none;
text-align:center;
text-transform:uppercase;
width:180px;
}
.sideNav li a {
border-bottom:1px solid #80bee3;
width:180px;
color:#ffffff;
text-decoration:none;
display:block;
padding:18px;
}
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:
:first-child
li { border-top: 1px solid red; }
li:first-child { border-top: none; }
:last-child
li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }
+ selector
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
Use :not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
Demo
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
You can also use in-line CSS to correct this problem.
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
Please Check the attached image
ul li{
width:100px;
height:200px;
float:left;
border:10px double #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
<ul>
<li><img src="image.jpg"/></li>
</ul>
I find the best way to reduce these inconsistencies is to use a CSS reset (a quick Google search will bring many results). What this does it pretty much set everything to 0 within your stylesheet.
From there, everything you define in your styles is how you want it to be displayed. It of course isn't 100% perfect, but it does a good job of getting you on your way.
1 of many CSS resets out there
May be you have to write display:block or vertical-align:top; in your IMG tag.
for example
img{display:block}
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.
I just received this awesome help:
Is there a way to extend background color of unordered list items to go behind bullets?
and then I was dealing with the text-indent property to again line up the wrapped text in this unordered list, but lo and behold it looks like IE and FF are handling the padding differently enough to really mess with the layout. Any solution?
Firefox (good)
(source: mbira.me)
IE (bad)
(source: mbira.me)
The css for the list:
.registerbox ul{
}
.registerbox ul li.light{
list-style-type:disc;
list-style-position:inside;
margin:2px 0px 2px -20px;
padding:2px 30px;
background-color:#FFFFB0;
text-indent:-12px;
}
.registerbox ul li.dark{
list-style-type:disc;
list-style-position:inside;
margin:2px 0px 2px -20px;
padding:0px 30px;
text-indent:-12px;
}
In order to fix this, I ended up making a png of the bullet and got rid of the default bullets.
I have an <li> element on the page that I want to look a certain way. Changing the css affects all the <li> elements.
here is the element I want to change
<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>
here is my css for the <ul><li>
ul li {
/*font: normal 17px Helvetica;*/
color: #a9a9a9;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
overflow: hidden;}
The commented out font portion and the color is what I want to affect this <li> and not any others.
How would I do this? Thank you!
If you can set a id or a class on the LI, then it would be trivial..
ul li {
color: #a9a9a9;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
overflow: hidden;
}
ul li.special {
font: normal 17px Helvetica;
}
<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>
Aside from that, there is no simple way to do this cross-browser with css alone.
Basically, you just need to give it an extra identity/attribute so you can have a CSS selector to style that li tag. Example:
/*using class*/
ul li.different {font: normal 17px Helvetica;}
/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}
/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}
Or use an inline style, STYLE= on the LI itself:
<li style="font: Helvetica; color: #a9a9a9;">...</li>
On a side note you should probably think about adding additional fallback sans-serif fonts to that rule aside from Helvetica. I'm a big fan of that typeface, but most people don't have it on their computers.
EDIT: Someone posted my same answer while I was writing this one. I'll keep the sidenote though because its useful.
As previously said, either a class or id will do it - depending whether you're going to be using this particular style uniquelly for this list item, or plan to use it elsewhere (though you can only use an id once on a page, you can reuse an id on another page).
You can mix and match classes and ids within one list, so that even if you want different styles for each list item in your list you can do it using different classes and ids.
For example, you can have your style that styles your list by default, so that items with no class or id inherit the default style, and then any number of classes and ids that can control the individual items...
<code><pre>
<ul>
<li>blah blah blah</li>
<li class="special">blah blah blah</li>
<li class="special">blah blah blah</li>
<li id "extraspecial">blah blah blah</li>
<li>blah blah blah</li>
</ul>
</pre></code>