Push button under dynamically added select-boxes - css

I have a button with a function that adds selectboxes to the page. I have a H1 with some text, a button, and boxes that are added above the button. I want the button the be right under the H1, but when I add selectboxes it will be pushed down.
This is what is currently happening, the button follows the select-boxes:
CSS
#interesses select{
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 1%;
width:30%;
margin-right: 2%;
margin-bottom: 15px;
padding: 0%;
font-size: 18px;
float: left;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
line-height: 1.5;
height: 38px;
-webkit-appearance: none;
}
#interesses-option{
float:left;
display: block;
position:inline;
margin-bottom: 25px;
}
.wide-button-thin{
width: 30%;
height: 40px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 18px;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
color: #494d59;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 2px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}
It works if I insert two <br> before the button, but I didn't get it to work with margin-top. Any suggestions what I could try?
EDIT:
Here are jsfiddle: http://jsfiddle.net/DWtPt/

To fix this, you should only move the button code above the interesser id like this:
<div id="velg-interesse">
<h2>Legg til interessene dine under:</h2>
<input type="button" class="wide-button-thin" id="leggtilInteresse" value="Legg til interesse">
<div id="interesser"></div>
</div>

Related

chrome is overriding my button css

I was trying to set the style of a button in my page: http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2010# (click on any QP or MS link) but chrome is overriding it or something I don't know, It's crossing out my css everything is in thic picture: http://s10.postimg.org/5v8htii4p/Untitled.png
This is the code that should be applied on the button but it wasn't
.button {
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #eeeeee;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color- stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
background: linear-gradient(top, #fbfbfb, #e1e1e1);
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
border: 1px solid #d4d4d4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
color: #666666;
text-shadow: 0 1px 1px white;
margin: 0;
text-decoration: none;
text-align: center; }

Getting bootstrap 2 button styling in bootstrap 3

I really liked the look & feel of btn btn-primary buttons in bootstrap 2 . I'm using bootstrap 3, and I don't like the flat look. I tried adding bootstrap-theme.css, which came long with bootstrap 3. But still its not the same.
Bootstrap 2 button:
Bootstrap 3 button:
As #AzDesign suggested, you want to copy the relevant css from BS 2 and use this as an override in your custom CSS. Here's a working example of BSv2 primary button styling in BS v3:
http://jsfiddle.net/panchroma/39zmy/
Good luck!
HTML
<button type="button" class="btn btn-primary">Primary</button>
CSS
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
.btn-primary:active,
.btn-primary.active {
background-color: #003399 \9;
}

Change button color of wordpress plugin

Can you help me to find css of "Submit Listenig" button?
I want to change primary color.
http://demo.sabaiapps.com/sabaidirectory/businesses/add
.sabai-btn {
display: inline-block !important;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.menu-toggle, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input[type=submit], li.bypostauthor cite span
style.css - Line 238
The button uses CSS gradients for background color.
http://css-tricks.com/css3-gradients/
input[type="submit"].sabai-btn { background-image: linear-gradient(to bottom,#c8d6ff,#c8d6ff); }
This code changes only submit button. But hover effect changes. It hover only on half button.

Safari: Submit is one pixel lower

I have issue with my submit button. It is one pixel lower than txt input, but only in Safari. Chrome and Firefox are just fine.
input[type=text] {
height: 45px;
width: 238px;
padding: 0;
background-color: #ebebeb;
border: 1px solid #cecece;
border-radius: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
color: #999999;
font-size: 16px;
font-family: 'Noticia Text', serif;
padding-left: 20px;
}
input[type=text]:focus {
outline: 0;
}
#subscribe {
padding: 0;
margin: 0;
background: #3eb0ef;
background: -moz-linear-gradient(top, #3eb0ef 0%, #1b8dd4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3eb0ef), color-stop(100%,#1b8dd4));
background: -webkit-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: -o-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: -ms-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: linear-gradient(to bottom, #3eb0ef 0%,#1b8dd4 100%);
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eb0ef', endColorstr='#1b8dd4',GradientType=0 );
border-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #1082c8;
height: 47px;
width: 107px;
font-family: 'Noticia Text', serif;
font-size: 16px;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
and HTML:
<form name="subscription" method="post">
<input name="email" id="email" type="text" placeholder="Enter your email address"><input name="subscribe" id="subscribe" value="Notify me" type="submit">
</form>
http://jsfiddle.net/SV3VS/
Does this help?
http://jsfiddle.net/panchroma/ERhLP/
I could see the blip on Safari as well so I tried explicitly setting the height of the input box and the submit button and changed them to an even number.
input#email{
height:48px;
}
#subscribe {
....
height: 48px;
....
}
Good luck!

Styling an asp.net button

I'm pretty new to Asp.net so sorry if this is elementary. I'm trying to get a button control to look a certain way.
I'm using a CSS file I used before that would style my tags a certain way.
If I'm using an asp.net button control, how can I apply this style to the button control?
I tried setting CSSClass='button' but that doesn't work. I put the tags around my asp.net button control, but that just makes the asp.net be inside of my stylized button.
Any ideas what I need to do?
Thanks for any help.
/******************** Button ********************/
button,
.big-button {
display: inline-block;
border: 1px solid;
border-color: #50a3c8 #297cb4 #083f6f;
background: #0c5fa5 url(../images/old-browsers-bg/button-element-bg.png) repeat-x left top;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -moz-linear-gradient(
top,
white,
#72c6e4 4%,
#0c5fa5
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#0c5fa5),
color-stop(0.03, #72c6e4)
);
-moz-border-radius: 0.333em;
-webkit-border-radius: 0.333em;
-webkit-background-clip: padding-box;
border-radius: 0.333em;
color: white;
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
font-size: 1.167em;
padding: 0.286em 1em 0.357em;
line-height: 1.429em;
cursor: pointer;
font-weight: bold;
}
/* IE class */
.ie button {
overflow: visible;
}
/* IE class */
.ie7 button {
padding-top: 0.357em;
padding-bottom: 0.214em;
line-height: 1.143em;
}
button img,
.big-button img {
margin-bottom: -3px;
}
button:hover,
.big-button:hover {
border-color: #1eafdc #1193d5 #035592;
background: #057fdb url(../images/old-browsers-bg/button-element-hover-bg.png) repeat-x left top;
background: -moz-linear-gradient(
top,
white,
#2bcef3 4%,
#057fdb
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#057fdb),
color-stop(0.03, #2bcef3)
);
}
button:active,
.big-button:active {
border-color: #5b848b #b2def1 #b2def1 #68a6ba;
background: #3dbfed url(../images/old-browsers-bg/button-element-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#89e7f9,
#3dbfed
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#89e7f9),
to(#3dbfed)
);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
button.red,
.red button,
.big-button.red,
.red .big-button {
color: white;
border-color: #bf3636 #5d0000 #0a0000;
background: #790000 url(../images/old-browsers-bg/button-element-red-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#ca3535 4%,
#790000
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#790000),
color-stop(0.03, #ca3535)
);
}
button.red:hover,
.red button:hover,
.big-button.red:hover,
.red .big-button:hover {
border-color: #c24949 #9d3d3d #590909;
background: #9d0404 url(../images/old-browsers-bg/button-element-red-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#fe6565 4%,
#9d0404
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9d0404),
color-stop(0.03, #fe6565)
);
}
button.red:active,
.red button:active,
.big-button.red:active,
.red .big-button:active {
border-color: #7c5656 #f7cbcb #f7cbcb #a15151;
background: #ff5252 url(../images/old-browsers-bg/button-element-red-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#ff9d9d,
#ff5252
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#ff9d9d),
to(#ff5252)
);
}
button:disabled,
button:disabled:hover,
.big-button.disabled,
.big-button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f0f2f2,
#c8c8c8
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f0f2f2),
to(#c8c8c8)
);
-moz-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-webkit-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
cursor: auto;
}
/* IE class */
button.disabled,
button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
cursor: auto;
}
button.grey,
.big-button.grey {
color: white;
border-color: #a1a7ae #909498 #6b7076;
background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#c5cbce 5%,
#9fa7b0
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9fa7b0),
color-stop(0.05, #c5cbce)
);
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
button.grey:hover,
.big-button.grey:hover {
border-color: #a1a7b0 #939798 #6e7275;
background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#d6dadc 4%,
#b1b5ba
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#b1b5ba),
color-stop(0.03, #d6dadc)
);
}
button.grey:active
.big-button.grey:active {
border-color: #666666 #ffffff #ffffff #979898;
background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f1f1f1,
#dddddd
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f1f1f1),
to(#dddddd)
);
}
button.small,
.big-button.small {
font-size: 0.833em;
padding: 0.2em 0.3em 0.3em 0.2em;
vertical-align: 0.2em;
}
/* IE class */
.ie button.small {
padding: 0.5em 0.3em;
vertical-align: 0.1em;
}
.ie7 button + button {
margin-left: 0.25em;
}
Button:
<asp:Button ID="LoginButton" runat="server" CommandName="Login"
Text="Log In" type="button"
ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/>
After investigating your CSS the lines below have the issue and the reason for css not working for you asp:button in CssClass
button,
.big-button {
You must use css this way
.button,
.big-button {
so the issue is that you missed period operator . before
the button,
The class selector uses the HTML class attribute, and is defined with a "." http://www.w3schools.com/css/css_id_class.asp

Resources