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;
}
Related
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
How can I make the border only appear on the top when I hover over it?
Code:
a:hover {
border-top: 3px white;
border-style: solid;
}
It makes the border still appear on all sides, but I want it to appear only on top.
You can also use:
a:hover {border-top: 3px solid white; border-right: 0; border-bottom: 0; border-left: 0;}
If the regular state of your link uses all four borders, then use 0 for the right, bottom, and left borders if you want only the top border on :hover.
a:hover {
border-top: 3px white;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
Fixed it. Only appears on the top now. :)
Please try the below code.
border-style: solid;
border-top: thick double green;
border-left:0;
border-bottom:0;
border-right:0;
I think when you use solid it draws border on al sides. The above code will actually get rid of the border from all three sides but not the top.
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'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);
}