we have a button, its displaying like this :
we want to display like :
.saveall
{
text-transform: capitalize;
font-weight: bold;
float: left;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab,Arial,Helvetica,sans-serif;
overflow: visible;
width: auto;
cursor: pointer;
vertical-align: middle;
display: inline-table;
padding: 9px;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
<button class="saveall" title="Save all'" type="button" style="float: left;padding: 5px 5px 5px 0;" onclick="changeaction()" id="mass_update_butn">
<span><span>Invoice</span></span>
</button>
Please help me to find solution
thanks in advance
Seems simple enough.
Remove the inline styling and the border, then tweak the padding.
Those inner spand aren't really necessary unless you have a particular reason for having them.
.saveall {
text-transform: capitalize;
font-weight: bold;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab, Arial, Helvetica, sans-serif;
cursor: pointer;
vertical-align: middle;
display: inline-block;
padding: 6px 24px;
position: relative;
border: none;
}
<button class="saveall" title="Save all'" type="button" onclick="changeaction()" id="mass_update_butn">
Invoice
</button>
Try this
button {
border: none;
background: #3FBDF7;
color: white;
font-size: 13px;
font-weight: bold;
padding: 5px 25px;
}
<button>Invoice</button>
Related
I have a span like this:
<span class="indicator"></span>
Inside this span sometimes I have numbers like this:
<span class="indicator">
<span>10</span>
</span>
And, sometimes some Kendo-UI icons, like this:
<span class="indicator">
<span class="k-font-icon k-i-checkmark"></span>
</span>
And, here is my css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: 0.85em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
font-size: 1.3em;
line-height: 1;
opacity: 1;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none;
font-size: 16px;
}
There are two problems:
I want the two span indicators to have the same heights. The height of
the one with icon is one pixel more than the other one.
The icon in the span with icon is not vertically aligned.
UPDATE:
I realized if I change the font-size of .k-font-icon to 1em, both issues will be resolved, but the icon will be too small.
UPDATE 2:
Here's a Kendo UI Dojo.
.k-font-icon {
vertical-align: middle;
}
Simplest way, hope this help.
if you're setting the height and with of your .indicator, there are a few ways you could do this, but the easiest is probably to change the display to flex instead of inline-box and add a couple of properties (I haven't added the vendor prefixes, mostly because I'm lazy…):
.indicator {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
border-radius: 4px;
}
Unrelated side note: unless you have an .indicator class that behaves different ways depending on what HTML element it's on (and if that's the case, you should probably refactor that) you shouldn't add a span at the beginning of you CSS rule. It increases the specificity for no reason and makes your CSS less flexible/future proof.
Try using line-height and vertical-align css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
line-height: 20px;
vertical-align: middle;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
span.indicator .k-font-icon {
line-height: 20px !important;
}
DEMO
Updated
what about this?
span.indicator {
background: #8a8a8a;
color: #ffffff;
font-size: 1.35em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have next html element:
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
With these styles:
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: text-bottom;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
I'm trying to achieve next: span with text and another span in it with "X" symbol. All it must be vertical aligned to middle. Now I have this at MacOS X Chrome (and it looks OK to me) and at Windows7 Chrome. How can I make they looks the same? And I sure exists a better way to centering span than I used.
UPDATE:
In addition, I cannot change html because it is a part of an addon.
You had repeated properties such as padding which will override the first one in the same class. Plus using bothinline-block and float:left will not do the effect desired on float so just use inline-block.
I've a made a few tweaks to your code:
Snippet
body {
box-sizing: border-box;
}
.ember-power-select-multiple-option {
margin:2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff;
line-height: 17px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 17px;
padding: 0;
vertical-align: middle;
color: #fff;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Your symbol 'x' is vertically aligned, but is docked to top of symbols line. It's such a symbol.
Try to use ×
This simbol with this style work for me
.ember-power-select-multiple-remove-btn {
vertical-align: middle;
}
Threre is a question about which symbol to use
Which font for CSS "x" close button?
I have just replaced the vertical-align: text-bottom; to vertical-align: middle; And I have check this in Windows7 Chrome,IE & FF and looks aligned to me. please check in MAC also.
.ember-power-select-multiple-option {
padding-left: 2px;
padding-right: 5px;
margin: 2px;
font-size: 13px;
font-family: CenturyGothic;
height: 21px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
color: #fff!important;
line-height: 19px;
background-color: #FFB000;
padding: 0 4px;
display: inline-block;
float: left;
}
.ember-power-select-multiple-remove-btn {
width: 15px;
height: 15px;
display: inline-block;
line-height: 13px;
padding: 0;
text-align: center;
vertical-align: middle;
color: #fff;
opacity: 1!important;
font-size: 15px;
font-family: sans-serif;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>
Hope this helps you.
Here is a solution that make use of display: inline-flex;
How does that look in Mac?
.ember-power-select-multiple-option {
padding: 0px 4px 1px;
margin: 2px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
background-color: #FFB000;
display: inline-flex;
align-items: center;
height: 21px;
}
.ember-power-select-multiple-option .text {
display: inline-block;
font-size: 13px;
font-family: CenturyGothic;
border-radius: 10px;
border: none;
color: #fff!important;
height: 16px;
line-height: 14px;
}
.ember-power-select-multiple-remove-btn {
display: inline-block;
padding: 0;
color: #fff;
opacity: 1!important;
font-size: 14px;
font-family: sans-serif;
margin-right: 4px;
height: 16px;
line-height: 14px;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">x</span>
<span class="text">самбука</span>
</span>
I solved my problem in unexpected way.
First of all, I have update addon to newest version, and structure was changed.
<li class="ember-power-select-multiple-option">
<span role="button" aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</li>
Also I set:
vertical-align: middle;
font-family: verdana;
for ember-power-select-multiple-remove-btn class and it looks great. So I assumed that span in another span was not very good structure =).
Now it looks next on both OS.
I've created a button but I'd like to align it within a container div so it looks like:
My code is:
body {
background-color: black;
}
.buttoncontainer {
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
#button2:hover {
background-color: #feb73b;
}
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 20px;
}
HTML
<div class="buttoncontainer">
start a free trial
</div>
Link to Fiddle
Any advice?
Apologies for not posting the links as pictures, I do not have enough reputation yet.
Remove margin-top: 20px; from your #button2 CSS
See the fiddle
Thus the CSS would be like
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
/* margin-top: 20px; */
}
UPDATE
See the updated fiddle
I've changed the padding in the css as padding: 14px 32px;. So it gets centered.
In button2' style :
Remove margin-top
Set display as block
Then :
width:100%;
height:100%;
box-sizing: border-box;
Fiddle : http://jsfiddle.net/by3pe47d/7/
So what I did was swap the id's and class and I added the button 2 class to the html.
I added a position: relative; attribute to the container so the insides would stay inside.
Also if you want to change the position of it like left, right, etc. you can.
I also changed the top margain to 2px instead of 20px
http://jsfiddle.net/by3pe47d/10/
Html-
<div id="buttoncontainer">
<div class="button2">
start a free trial
</div>
</div>
Css-
body {
background-color: black;
}
#buttoncontainer {
position: relative;
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
.button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 2px;
}
.button2:hover {
background-color: #feb73b;
}
Large Update
Saw the image that was removed and made a thing that mimics it. It will stay formatted even if you use the left, right, etc. attributes.
http://jsfiddle.net/by3pe47d/11/
I need help figuring out why it is when I add a link in this code that it is altering my entire div block.
This is what the page looks like:
As soon as I make the text a link, it adds about 8px to the bottom (notice how the image is smaller than the div block).
What can I do to make this look like all of my other blocks?
Update: I believe I found the code that is causing the problem, it is in the CSS of the body. There is a style that has line-height at line-height: 1.625; - when I delete this, it fixes the issue. But now I am wondering how can I remove this code for my page, without effecting the rest of the site?
Here is the problem CSS:
body {
color: #3B3F42;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.625;
}
And here is the rest of the coding
.ratingWrapTopRated {
background: #fff;
width: 100% !important;
height: 90px !important;
margin: 0 auto;
display: table;
font-family: Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background: #fff;
color: #fff;
display: table-cell;
line-height: 0;
width: 90px;
padding-right: 4px;
}
.cigarName {
background: #ff5100;
color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1.2em;
padding: 0px 3px 0px 3px;
}
.numericalScoreTopCigars {
background: #000;
color: #fff;
text-align: center;
width: 25%;
display: table-cell;
font-size: 4.9em;
letter-spacing: 3px;
vertical-align: middle;
font-weight: bold;
border-left: 4px solid;
border-color: #fff;
line-height: 0;
}
a.ratingsLink:link {
text-decoration: none;
background: #ff5100;
color: #fff;
text-align: center;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1em;
padding: 0px 3px 0px 3px;
}
<span class="ratingWrapTopRated">
<span class="cigarImage hidebuttons"><img class="alignnone size-thumbnail wp-image-2352" src="http://cigardojo.com/wp-content/uploads/2012/08/padron-serie-1926-150x150.jpg" alt="Padron Serie 1926 No. 9 Maduro" width="150" height="150" /></span>
<span class="cigarName shortenText"><a class="ratingsLink" href="http://cigardojo.com/?p=1019">Fuente Fuente OpusX XXX Belicoso</a></span>
<span class="numericalScoreTopCigars">96</span>
</span>
So I have a button, but here's the issue. On Firefox only does it not completely fill up. As seen here
This is what it should look like
I'm not really sure what to do. Here's the CSS
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
}
And a demo http://jsfiddle.net/h7PXe/
Reason why it showing up is that you use line-height bigger than height of element.
Here you can see how box model is woking and were are outlines:
http://i.stack.imgur.com/Q6J6n.png
You can achieve the same look without using basic properties (then it will work in every browser)
.button-panel .button {
display: inline-block;
padding: 7px 0 5px;
border: 3px solid #6699FF;
width: 100%;
font-family: 'Avenir Next';
font-size: 27px;
font-weight: 300;
letter-spacing: 0.05em;
text-align: center;
background-color: #6699FF;
cursor: pointer;
}
http://jsfiddle.net/h7PXe/1/
Do height: 100%. You need to do this or else the browser won't know what to set the height to.
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
height: 100%
}
And a demo.