In my site, every post has a bottom border. I've applied a
article:last-child {border-bottom:none;}
so that the last post doesn't have a border at the bottom, but it's still showing.
What am I doing wrong?
last-child will fail if you have any element other than article so use last-of-type instead.
Because the last-child is nav on your website, CSS will look for last article child but the last child is nav hence the selector goes wrong.
Where on the other hand last-of-type will select the last article element of it's parent.
Use this instead and it will work for sure
.content-pad-left article:last-of-type {
border-bottom:none;
}
last-child is not available in IE 8. article tag can be still solved by using modernizr.
To make backward compatible, you want to use first-child -
article { border-top: 1px solid #eee; }
article:first-child { border-top: none;}
This is what your current website look like in IE 8.
Related
I've noticed that the cascade isn't always correct when using polymer custom style. From the looks of it, this could be a bug in the way the cascade is being applied to custom elements, but I'd just like to confirm that I'm not doing something silly.
Consider the following, scoped style, for my custom element:
#price ::content .price span {
display: block;
padding: 4px;
border-top: 1px solid var(--color-gray1);
}
#price ::content .price span:first-child { border-top: none; }
... but once rendered, the :first-child gets overridden by first definition, as you can see in the image below. The only way to ensure that my border: none is applied correctly, is to use !important, which I'd rather not.
I should note that I've seen this behaviour in many other places, and have opted to just use !important as a quick solution, but this starts to feel clunky.
Just adding the image of the rendered element here to show the "incorrect" top border.
From what I’ve understood, the problem comes from the CSS variables/custom properties polyfill.
It adds another class, .product-0 in this case, to scope the property where you use var(--color-gray). You probably figured this also already, but just pointing it out.
You can override that with an equally specific selector (no need to use !important), e.g. #price ::content .price.price span:first-child (notice the duplicate .price).
I don’t know if this can be fixed in the polyfill.
The first declaration is more specific than the second one. This could be the problem.
The Specification of the DOM structure is Major role to override the css.
#price ::content .price span {
display: block;
padding: 4px;
border-top: 1px solid var(--color-gray1);
}
#price ::content .price span more specific than the #price ::content .price span:first-child.
I have many SELECT elements on a page, the problem is that in IE11 they have an outline which I try to remove it using CSS :
select{outline:none;}
It works fine as long as , it is the only style element! As soon as I add more style e.g background-color to SELECT, the outline:none does not work anymore!
It should work in IE and for SELECT element. However in other browser, there is no outline applied to element by default.
thanks in advance
By using a bit CSS you can get same style across all browser.
Check the DEMO.
select{
outline:none;
border:1px solid #E4E4E4;
padding:10px;
width:200px;
background: none repeat scroll 0 0 #F7F7F7;
}
I have this CSS Script here
#social_side_links li:nth-child(3):hover {
image
}
but it does not work....my image does not show up and yes the path is absolutely right...do I need to write this like
#social_side_links li:hover nth-child(3) {
This should work fine.
http://jsfiddle.net/EeHdF/
#social_side_links li:nth-child(3):hover {
border:1px solid #000;
}
Chaining :nth-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
I know you feel the image is correct, but try another css definition like border (above) to see if it is an issue with your definition or the selector.
I have a small space in my main navigation menu at:
http://ranchocordovaeventscenter.com/
I can't seem to find any css that is causing it to do this.
Can anyone help?
Thanks in advance,
Matt
Since your setting the list elements to inline-block. It's creating spaces between each element as if it's text ( words should have spaces between them, it makes sense if you think about it ).
.nav-menu {
font-size: 0;
}
Just make sure you reset the font-size on the children or else they will inherit this size and be illegible.
I don't see the space you are talking about, but something similar happened to me earlier.
CSS Box Model Puzzle - I must be missing something
The key is is the following piece of css code:
box-sizing: border-box; /* needs prefixes for webkit/moz */
Try including this css property for the container divs you may have.
Hope this helps!
The problem is that each anchor tag <a> inside the <li> element have borders in both sides...
To solve this, add border-right-width here:
.main-navigation li a {
border-right-width: 1px solid #F9B233;
}
and remove the following property in the above selector:
border-width: 1px solid #F9B233;
To remove the right border of the last element you can do this:
.main-navigation li:last-child a
{
border-right-width: 0;
}
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.