Submit buttons CSS margin collapsing when positioned side by side - css

I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.

If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine

Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Related

Insert a shadow on a header image

I would like to put a shadow on the header image but it didn't work.
URL: http://testjeanschwartz.weebly.com/
I already try something like this:
.wsite-background
{
box-shadow: 0px 10px 5px #888888;
}
Putting a shadow is something I already did a lot of times but this one is not working.
Thanks.
Your box-shadow is covered by the elements that follow it (namely #main-wrap). You can change the z-index of your element to have it show 'above' other elements.
You will need to position your element something other than static for the z-index to be acknowledged:
.wsite-background {
box-shadow: 0px 10px 5px #888888;
position: relative;
z-index: 1;
}
For background image, you need inset property to handle it with the position relative or absolute.
Try this one:
.wsite-background{
position:relative;
-webkit-box-shadow: inset 0px 10px 5px #888888;
-moz-box-shadow: inset 0px 10px 5px #888888;
box-shadow: inset 0px 10px 5px #888888;
}

Apply Custom Border Style for Sharepoint 2013 Webparts

I want to give my custom border style to all the Webparts available in sharepoint. So that i have added the following class.
.s4-wpcell-plain
{
border:1px solid #d8d8d8;
}
It is applying almost all the webparts. But the problem is it is adding border unnecessarily other places also. Like when search using E-Search page all the results are coming with the borders. It is applying for sharepoint Blog page also.
How can I get rid of those unnecessary borders? or Which CSS I need to apply so that it will only apply for the webparts.
Try applying your border to the following class instead:
.ms-webpartzone-cell {
border: 1px solid #D8D8D8;
}
Okay so I was messing with this as well. The only way it worked for me was to apply the code to the following
.s4-wpcell {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.ms-webpart-chrome {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
So this will apply it to all web parts (I was using a wiki page so "hidden" parts also had this applied and suddenly appeared). To only apply this style to specific web parts add the .MSOZoneCell_WebPartWPQ# in front of the class.
#MSOZoneCell_WebPartWPQ2 .s4-wpcell,
#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome,
#MSOZoneCell_WebPartWPQ2 .s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
Hope this helps.

CSS Shadows (how to get rid of top shadow?)

Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.

How to hide one side shadow effect?

<div id="cat"></div>
How to box-shadow for left and right side only?
(no shadow of upper lower side)
set the z-index of woof above meow and grrrr will show up on top of hisssss's shadow.
Here's an overflow hidden approach for one side shadow http://starikovs.com/2011/11/09/css3-one-side-shadow/. Hope it will help you.
With this you can do it http://jsfiddle.net/QkXqU/
CSS:
div {
float: left;
overflow: hidden;
padding: 0px 0px 10px 0px; /* Use padding on the side where you want to show shadow. Padding amount should be same as shadows blur length. */
}
img {
-webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;
}
HTML:
<div>
<img src="http://lorempixum.com/output/nature-q-c-309-249-8.jpg" alt="trees" />
</div>

CSS : How can I add shadow to a label or box

I have an button just as have Ask Question on SO and here is the CSS for it:
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}
Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.
Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.
Hope I have made my question clear. Any guidance would be highly appreciated.
Thanks.
The box-shadow property is not yet widely supported, but can be implemented like:
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Not sure what you're asking about the label/box?
Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/
You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.
For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?
EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}
EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

Resources