Is there a border-collapse:collapse alternative for lists, where the li's are displayed as blocks with a border of 1px solid.
You can remove the top border on all but the first list item by adding:
li:not(:first-child) {
border-top: 0;
}
http://jsfiddle.net/mblase75/3h8bm/
IE8 and IE7 don't support :not. However, they do support :first-child, so a workaround is easy:
li {
border: 1px solid blue;
border-top: 0;
}
li:first-child {
border-top: 1px solid blue;
}
http://jsfiddle.net/mblase75/3h8bm/4/
IE6 doesn't support either of those, so if you're worried about that browser, you'll have to add a custom class (say, .first-child) to the first element directly.
Related
This is regarding a list and the double border effect of side by side selected and hovered elements, as pictured here.
Back in the day we called it border collapse because we were using table elements.
Here is the CSS which adds the border (which comes before the next lines in the stylesheet):
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
I got it working when the hover follows the selected list item:
li.selected + li:hover {
border-top: 1px solid transparent;
}
but this rule for some reason does not apply when the selected item follows the hover:
li:hover + li.selected {
border-top: 1px solid transparent;
}
The idea of these rules are simply that if they appear next to each other, make the top border of the second item transparent.
I checked and it is not being overwritten anywhere, and the two lis are definitely adjacent siblings. This does not work on firefox or chrome.
Does anyone know of any conflicts with using all of these selectors together?
Please let me know if I can add anything else to the post to get a good answer.
You need to set transparent border as default for li.
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
li {
border: transparent 1px solid;
}
li.selected + li:hover, li:hover + li.selected {
border-top: 1px solid transparent
}
<ul>
<li>dfsafasf</li>
<li class="selected">dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
</ul>
I'm having a problem where in IE9, 10 and 11 this happens.
What I am essentially doing is having all td's in the table have a border 1px solid gray and I am doing a 7px green border around some of the cells.
It looks correct in browsers other than IE, in IE it does this:
https://www.dropbox.com/s/q93mk7ox7jy9xpq/Screenshot%202014-07-24%2015.23.18.png
it shows BOTH the gray border AND the green one, with the gray one on top bleeding through.
This is the correct result from Chrome:
https://www.dropbox.com/s/p6u0o153917b3lm/Screenshot%202014-07-24%2015.25.18.png
Here is my CSS:
table.wirewatch2 td {
background-color: #e7f9bf;
border: 1px solid #9e9e9e;
}
table.wirewatch2 tr:first-child > td:not(:first-child):not(:last-child) {
border-top: 7px solid green;
}
table.wirewatch2 tr:last-child > td:not(:first-child):not(:last-child) {
border-bottom: 7px solid green;
}
table.wirewatch2 td:first-child {
background-color: #b9d1f4;
}
table.wirewatch2 td:nth-child(2) {
border-left: 7px solid green;
}
table.wirewatch2 td:nth-last-child(2) {
border-right: 7px solid green;
}
table.wirewatch2 td:last-child {
background-color: #d7b5b6;
}
All this is reported to work in IE9+ in w3schools and caniuse.com .
Now my project manager was doing this via a bunch of COL tags with inline styles before, and it had the same behavior (proper on anything other than IE), which leads me to believe it's not a IE feature support issue but a rendering engine issue.
Anyone ever come up against this and know how to fix it?
I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
I've got the following CSS.less
header.section-header ul {
width: 100%;
list-style-type: none;
li {
display: inline-block;
padding-right: 10px;
.bordered(0,0,0,#compcolor);
margin-right: 10px;
.font-size(12);
color: #compcolor;
}
li:first-child {
.bordered(0,0,0,0);
}
}
This is a simple horizontal list. I wish to turn the border off on the first item, but it's not showing in FF or Chrome. The item appears but doesn't have the specificity. Any ideas?
Edit:
The mixin is
//.bordered(COLOR, COLOR, COLOR, COLOR);
.bordered(#top-color: #bordercolor, #right-color: #bordercolor, #bottom-color: #bordercolor, #left-color: #bordercolor) {
border-top : solid 1px #top-color;
border-left : solid 1px #left-color;
border-right : solid 1px #right-color;
border-bottom : solid 1px #bottom-color; }
0 is not a valid color value. Perhaps you meant transparent?
li:first-child {
.bordered(0,0,0,transparent);
}
(You have to have a zero border width or a border style of none in order to actually disable the border, but it's hard to make out what exactly your .bordered() function is doing.)
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)