I would like my ".tag" div to only be as wide as the text inside it. But, for some reason the paragraph element spans the whole width of the parent element. How can I stop this from happening? So that the ".tag" divs are only as wide as the text inside them?
JSFIDDLE: http://jsfiddle.net/X77e7/
My HTML:
<div class="tag">
<p> Hiking </p>
</div>
My CSS:
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
Add display:inline-block
It is stretching now because div is by default block element which occupies the whole space.
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4; display:inline-block
}
DEMO
Both div and p are block elements.
So you should consider setting the display at inline.
.tag {
display: inline;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
http://jsfiddle.net/X77e7/2/
just float your .tag and your problem is solved
.tag {
float:left;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
demo
Related
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
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 have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
I've created a div and input and given both exactly the same borders, padding, margins, fonts and font-sizes. But they're still not the same height. Why?
Edit: Using Firefox
Example: http://jsfiddle.net/a8n6qxaz/
HTML:
<div class="close">X</div>
<input type="submit" value="TEST" />
CSS:
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: red;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: #3e3f39;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
The problem is that you didn't specify any height, so use e.g.
height: 1em;
However, by default the height of the input is considered using the border-box model, and the height of the div using the content-box model. Use the box-sizing property to specify the same model for both elements:
box-sizing: content-box;
input[type="submit"], .close {
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
padding: 0.125em;
padding-left: .25em;
padding-right: .25em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
height: 1em;
box-sizing: content-box;
}
<div class="close">TEST</div>
<input type="submit" value="TEST" />
For some reason, in Firefox, padding is applied differently in an input than a div even if they're both display: block and you remove the appearance of the input. line-height also messes up in an input.
Removing the top/bottom padding from both and line-height from the input, allows making them the same height:
http://jsfiddle.net/a8n6qxaz/4/
input[type="submit"]
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
vertical-align: middle;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
.close
{
position: relative;
margin-right: .5em;
float: right;
margin: 0em;
height: 1.5em;
padding: 0em;
font-family: Arial, Helvetica;
font-size: 1.25em;
line-height: 1.5em;
color: #ffffff;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
background-color: red;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
display: block;
cursor: pointer;
}
Because you don't specify the height, and firefox applies different default height for div and for input than chrome
If you want to force the input to behave like the div, you must change the box-model of the input:
box-sizing: content-box;
Add that CSS property to the input, and then in firefox both div and input will consider the padding in the same manner.
I want the button and the text to line up. I've used vertical align but it doesn't seem to be working. (So the button is centered with the input box)
Here is HTML:
<div class="elegantaeronamefinder">
<div>
<input type="text" id="search_name" name="search_name" />
<input type="submit" class="button" value="GO" id="search_button" name="search_button" />
</div>
</div>
CSS:
.elegantaeronamefinder{
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px; /*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px 4px 0px 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle; /*added in to align*/
}
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
margin-bottom: 20px;
margin-top: 5px;
}
Here is demo:
http://jsfiddle.net/5CN67/2/
Thank you in advance for your help!
The simple way would be to remove the margin settings from the rule .elegantaeronamefinder .button
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
}
Fiddle
You can remove vertical-align and make bigger height of input, like this
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
background: none repeat scroll 0 0 #FBFBFB;
border: 1px solid #CEE2E7;
box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset;
color: #888888;
font: 200 20px/20px Arial,Helvetica,sans-serif;
height: 32px;
margin-left: 5px;
margin-right: 6px;
outline: 0 none;
padding: 5px 4px 0 5px;
width: 250px;
}
http://jsfiddle.net/5CN67/9/
Also, you can remove margin from .elegantaeronamefinder .button{} and input will be on level of the middle of button.
You can use display: table + display: table-cell + vertical-align: middle
Fiddle
HTML:
<div class="elegantaeronamefinder">
<div class="wrapper">
<input type="text" id="search_name" name="search_name" />
<input type="submit" class="button" value="GO" id="search_button" name="search_button" />
</div>
</div>
CSS:
.elegantaeronamefinder {
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;
/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px;
/*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
display: table;
text-align: center;
}
.elegantaeronamefinder input[type="text"], .elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px 4px 0px 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle;
/*added in to align*/
}
.elegantaeronamefinder .button {
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
vertical-align: middle;
/*added in to align*/
margin-bottom: 6px;
margin-top: 5px;
}
.wrapper {
display: table-cell;
vertical-align: middle;
}
You have 'messed up' the vertical alignment due to the additional margin declarations on the .button class.
If you remove them they align:
JSfiddle Demo
CSS
.elegantaeronamefinder{
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;/*#DDF0F8;*/
padding: 30px 30px 0px 30px;
min-height: 120px; /*make additional service box bigger*/
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}
.elegantaeronamefinder input[type="text"],
.elegant-aeronamefinder textarea {
color: #888;
width:250px;
padding: 5px;
margin-right: 6px;
margin-left: 5px;
border: 1px solid #CEE2E7;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
font: 200 20px/20px Arial, Helvetica, sans-serif;
vertical-align: middle; /*added in to align*/
}
.elegantaeronamefinder .button{
padding: 10px 30px 10px 30px;
background: #44B6F5;
border: none;
color: #FFF;
font-weight:bold;
}