I’m trying to fit a button with a textfield so I’ve been trying different dimensions (height’s button) until they conceded. The problem is: on Chrome looks great but in Firefox they don’t fit as I expected. How can I fix it?
Thank you for your help!
Chrome:
http://imageshack.us/a/img401/5964/mlvq.png
Firefox:
http://imageshack.us/a/img707/2672/u1c.png
Code:
#textfield
width: 120px;
border: 1px solid #aaa;
border-radius: 8px 0 0 8px;
padding-top: 5px;
font: 22px Arial, Helvetica;
padding-bottom: 5px;
padding-left: 5px;
box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset;
outline: none;
}
#button {
border-radius: 0 8px 8px 0;
border: 1px solid #aaa;
padding-top: 5px;
margin-left: -5px;
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background-color:#77d42a;
display:inline-block;
color:#306108;
font-family:arial;
font-size: 20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
padding-top: 7px;
text-shadow:0px 1px 0px #aade7c;
}
Shouldn't you specify the height for both of them ?
height: XXpx;
Related
The text hangs outside of the DIV container. Perhaps I have the wrong elements in my CSS. On my actual website it hangs below but when I check snippet here it doesn't hang. Here is the code.
screenshot of problem
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: -350px;
top: 27px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
}
<div class="bodybox">
Print
</div>
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
//left: -350px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
text-align:center;
cursor:pointer;
display:flex;
}
.bodybox span{
margin : auto;
}
<div class="bodybox">
<span>Print</span>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I want to create something like this with CSS only, is it possible?
div {
height: 50px;
width: 200px;
background: #006B96;
box-shadow: 0px 0px 0px 4px #006B96;
border: 4px solid #fff;
margin: 0 auto;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div>
</div>
div{
height:50px;
width:200px;
background:#006B96;
box-shadow:0px 0px 0px 4px #006B96;
border:4px solid #fff;
margin:0 auto;
}
<div>
</div>
span {
display:inline-block;
padding:5px;
box-shadow:
0px 0px 0px 5px #000,
0px 0px 0px 10px #fff,
0px 0px 0px 15px #000;
}
http://jsfiddle.net/gwhq3uk6/
Try to go with Bootstrap and you will no longer have to worry about designing buttons because it is much easier get all kind of buttons and other stuff you need without writing a single line of code.
I have a gridview and the first column has a checkbox to select every row. I have written some CSS for the checkbox but as the checkbox doesn't have any text within it nothing is displayed. If I include any text in the checkbox then the CSS works fine.
I don't need text or to hide the text (if dummy required) to make the look and feel the same throughout.
This is my CSS:
input[type="checkbox"] {
position:absolute;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
}
input[type="checkbox"] + label {
position:relative;
padding: 3px 0 0 25px;
}
input[type="checkbox"] + label:before {
content:"";
display:block;
position:absolute;
top:2px;
height: 12px;
width: 12px;
background: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
background: #88bbd4;
}
I need the grid column like the image shown here:
Your CSS just doesn't sync with what you are after. You don't need all that stuff. And why border-radius? Do you want them to look like radio buttons?
What you could do is simply this:
Demo: http://jsfiddle.net/abhitalks/ZdyC7/
CSS:
input[type="checkbox"]::after {
content: '';
display: inline-block;
width: 16px; height: 16px;
background-color: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
}
input[type="checkbox"]:checked::after {
background-color: red;
}
The first Click here for a Demo button of this site has text-shadhow applied to it but it doesn't show:
http://www.chineselearnonline.com/ver7
Here's the CSS:
#content .call-to-act a {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
color: #ffffff;
padding: 15px 21px;
width: auto;
height: auto;
text-align: center;
}
background: -moz-linear-gradient(
top,#e45b2d 0%,#e34e18);
background: -webkit-gradient(linear, left top, left bottom,from(#e45b2d),
to(#e34e18));
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
border: 1px solid #a04830;
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
text-shadow: 1px 1px 1px #000;
}
and HTML:
<div class="call-to-act">
Click here for a Demo
</div>
What could be the problem?
I don't see any problem. Works for me in Chrome and Firefox. I noticed in your code an extra } maybe thats the problem (but with that the css wouldn't work at all.
P.S. You don't need the -webkit- or -moz-.
My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/
I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>