box-shadow is not working in Chrome.
I have a table layout in which I have to use display property as table-row-group.
I am trying to put box-shadow in tbody and it's failing.
Please see it here - JSFiddle.
It's working perfectly fine in FF but not in Chrome. I looked on other questions/suggestions and it looks like we can do it in display: block property.
Any workaround for display: table-row-group?
You could create a div within the th or tr tag as a workaround and assign a box-shadow to the div instead. I've implemented this in this JSFiddle to the first th element.
Try this:
tbody {
-webkit-box-shadow: 5px 5px 3px green;
-moz-box-shadow: 5px 5px 3px green;
box-shadow: 5px 5px 3px green;
display: block
}
It works.
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
The default behaviour of inline HTML elements with a border is, that at the the end and the beginning of a line at a linebreak, there is drawn no border. Like
span {
border: 1px solid black;
}
See result at: http://jsfiddle.net/yuszuv/ft7waga3/1/
Is there any way to draw the "missing" borders, so that each line seems to be contained in a box?
I am afraid you cannot make each line contained in a rectangle using border on a display:inline element.
But, a workaround that works is to use a box-shadow instead.
span {
line-height: 32px;
box-shadow: 0 0 0 1px black;
}
jsfiddle
Below a screenshot from FireFox:
As jan said, a better approach is to use box-decoration-break
According to canIuse, this should work for all latest browsers, except IE:
span {
border: 1px solid black;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
updated jsFiddle
I am trying to add shadows using the following code
-moz-box-shadow:0 1px 3px #B8B8B8;
-webkit-box-shadow:0 1px 3px #B8B8B8;
box-shadow:0 1px 3px #B8B8B8;
I am able to create this effect on sidebars,widgets,footer,etc.
However when I try to put this around the main content area,the shadow on the bottom only comes.In the other sides,theres no shadow.
I am trying to find the reason since past 2 days.Today after some googling,i thought there might be some div with a higher z-index around,but,i believe theres no div.
Google chromes inspect element has a stike on the css and reveals an error of unknown property name.Can anyone please help me.
Here is my blog.
You have overflow:hidden on .blog-posts.hfeed and #main-wrapper remove those, or put margin: 3px on .post
I show box-shadow with this CSS code.
img {
box-shadow: 2px 2px 1px #888;
}
I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,
<img ... class="noborder">
#noborder
{
box-shadow: 0px 0px 0px #888;
}
However, I still have the shadow with the `class="noborder">code, what might be wrong?
Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .
Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.
I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.
.shadow
{
box-shadow: 2px 2px 2px #888;
}
.noShadow
{
2px 2px 2px transparent
}
.noShadow.none
{
box-shadow: none;
}
And here's a jsfiddle demo to show you how it works.
try replacing #noborder with .noborder, you want it to be a class, not an ID.
Additionally, box-shadow: none is a neater alternative to remove the box shadow
Use box-shadow: none to remove the shadow completely.
<div>test</div>
<div class="noborder">test</div>
div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}
Demo
I have a button element where I apply a css class which adds border color to the various sides of the button.
This worked in the previous IE versions, but not in IE 9
HTML:
<button class="hello-button">Hello, World</button>
CSS:
.hello-button {
border-width: 2px;
border-style: solid;
border-color: #eee #a9a9a9 #a9a9a9 #eee;
}
Is this a known issue and are there workarounds besides of the border-style: outset;
I have tried various combinations but it seems like you can not any longer style the borders of the button element.
Edit: formating
If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders
Works:
.hello-button {
border-top: 2px solid #eee;
border-right: 2px solid #a9a9a9;
border-bottom: 2px solid #a9a9a9;
}
Doesn't Work:
.hello-button {
border-top: 2px solid #eee;
border-right: 2px solid #a9a9a9;
border-bottom: 2px solid #a9a9a9;
border-left: 2px solid #eee;
}
Unless there's a valid (or at least spec'd) reason for this behavior, it looks like a bug to me...
This one is weird. It actually works if you don't specify border-style. IE9 will then give you a solid border, but other browsers will do all kinds of different things.
But it goes back to working if you specify border-radius (in addition to border-style).. So go on and treat yourself to some modern CSS styling :)
Of course this is not ideal if you want a perfectly square button, but you can set a low value for the radius (double check how it looks, though).
It does look like a bug. Can you define a document compatibility mode for an older version of IE?
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Looks like a bug. Since I controll the server I solved it by setting a X-UA-Compatible response header to IE=EmulateIE8
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#Servers