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?
Related
When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:
.box {
outline: 1px solid black;
}
.box.selected {
outline: 5px solid blue;
}
Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675
Has anyone experienced this issue and been able to solve it?
That’s how it works for the safari browser but you can try changing the style for .box from outline to border
.box {
height: 75px;
width: 100px;
border: 2px solid black;
margin: 0px 5px;
background: red;
}
.box.selected {
outline: 5px solid blue;
}
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'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}
.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)
my following css code does not work in msie.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}
In msie, only the right border will be displayed correctly. The bottom border is totally invisible. Other browsers work fine.
can anybody help me, to make it display correctly in msie as well?
demo website is http://mmjd.com (mouse move over the text on the very right side)
The anchor in question is being displayed inline. IE does not recognise the full width and height.
Setting display:block; resolves this.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
display:block;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}