I am using foundation and I have some issues when aligning a button containing an icon in Internet Explorer. It is fine if I put text inside instead of an icon. Any ideas? Thank you very much.
HTML
<div class="medium-3 column">
<button class="tiny round expand btn-green" type="submit" value="Submit">
<span class="fi-magnifying-glass btn-i iconic-s" title="magnifying glass" aria-hidden="true"></span>
</button>
</div>
CSS
button, .button {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: "Titillium Web", Helvetica, Roboto, Arial, sans-serif;
font-weight: 400;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 1rem 2rem 1.0625rem 2rem;
font-size: 0.875rem;
background-color: #1B98E0;
border-color: #167ab3;
color: #FFFFFF;
-webkit-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
}
span.btn-i {
margin-left: 5px;
font-size: 1rem;
}
button.tiny, .button.tiny {
padding: 0.625rem 1.25rem 0.6875rem 1.25rem;
font-size: 0.6875rem;
}
.button, button {
letter-spacing: 1px;
text-transform: uppercase;
}
You can see that it is perfectly aligned in chrome
In internet explorer the height goes over the input and does not stay in the row. IE Is the only browser with this issue.
Related
I tried to create a corresponding button that contains the name of the button and a number.
I used padding to separate the button name from the number, however when the number is very high, that same number overlaps the button name.
Is there a way to center the name on the button and make the button fully responsive regardless of the number displayed?
DEMO
Html
<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">
<a style="color: #51CC8B;" class="btnP">Prepared
<span class="nav-link btn-glyphicon1">1500</span>
</a>
</div>
Css
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
outline: none;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
right: 0;
position: absolute;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #51CC8B;
}
PROBLEM
As you can see in the image, the number overlaps the name :( I want the text to always remain centered on the button and the width to adjust according to the size of the number.
Can someone help me?
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
justify-content:center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
outline: none;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
border-radius: 16px;
align-items:center;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
margin-left:20px;
color: #51CC8B;
}
<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">
<a style="color: #51CC8B;" class="btnP">Prepared
<span class="nav-link btn-glyphicon1">1500</span>
</a>
</div>
I have defined two links and made them look like buttons using css styling.
HTML code looks like this:
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
How it should look
But on mobile devices, these two buttons collide.
Wrong mobile device look
Is it possible to style them using css, to display correctly, without collision?
btn-red class example is here:
.btn-red {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 40px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-red {
background-color: #dd0000; /* change background color here */
border: 2px solid transparent;
color: #fff!important; /* change font color here */
font-weight: bold;}
a.btn-red:hover {
background: #dd0000; /* change background color on hover here */
border: 2px solid transparent;
padding: 8px 54px 8px 40px !important;}
a.btn-red:after {
font-family: 'ETmodules';
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: "\35";
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-red:hover:after {
opacity:1;
display: block!important;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
EDIT:
I tried to use responsiveness for padding, which should be enough to solve my issue, but its not working as intended. What exactly is wrong? Code is included in btn-red class.
code here:
#media only screen and (min-width : 1024px){ padding: 8px 40px;}
#media only screen and (max-device-width : 320px) {padding: 2px 10px;}
I think this might work. However, I am not sure.
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
I had just added six times.
You can do this ...
Place "Continue to" & the buttons in two separate div elements.
HTML:
<div class="display-ib">Continue to</div>
<div class="display-ib">
<button class="btn1"></button>
<button class="btn2"></button>
</div>
CSS:
.display-ib {
display: block;
}
#media (min-width: 768px) {
.display-ib {
display: inline-block;
}
}
Being mobile first as per the trend today
I have this element:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
Its height must be 17px, horizontal padding should be 4px and font size should be 12px. It looks like a prototype in Chrome and Firefox:
But there is a problem in Internet Explorer:
It lowers the text inside, it is not well aligned vertically. If I set line-height and width of element to 18px (as well as every other even value), everything is OK, but I need 17px. How to avoid text lowering in IE?
You can add a specific style for IE. You can try this:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE Edge 12+ CSS styles go here */
.counter {
display: inline-block;
min-width: 9px;
padding: 0px 4px 1px 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
I have a button for my page that I'm also styling it
<button id="logButton" >Iniciar sesión</button>
And then the css code
#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Here's a fiddle also.
If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?
It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.
#logButton
{
min-width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
min-height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>
and If you want to know about bootstrap's .btn here is css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
#logButton
{
/* Removed height & width*/
padding: 10px 20px; /* Added */
margin-bottom: 5px;
margin-left:35%;
font-weight: bold;
font-size: 31px;
font-family: helvetica, arial, sans-serif;
}
Don't hardcode a width. Using padding on the left and right sides. Here you go.
#logButton
{
padding: 3px 15px 0 15px;
margin-bottom: 5px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
if you want to hide overflow of text then use {overflow:hidden} is css code.
if you want to keep text but not want to increase with then use {height:auto}
I want to apply the same class to two different elements and am noticing that the padding surrounding each element (or at least their heights) is different.
Here is the fiddle -- https://jsfiddle.net/v9vnru0j/1/ . How do I make both elements the same height (which I interpret to be having the padding apply equally to both)?
.btn {
font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
That's because both links and inputs are inline by default.
However, inputs are replaced elements, and that makes them behave closer to inline-blocks.
Therefore, the solution is
.btn {
display: inline-block;
}
.btn {
display: inline-block;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
But on Firefox there is still a 2px difference. It might be that the value of the input is placed inside an inner wrapper. You can specify a height to fix this.
.btn {
display: inline-block;
height: 1.42em; /* Same as line-height */
box-sizing: content-box;
}
.btn {
display: inline-block;
height: 1.42em;
box-sizing: content-box;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
All of the styling that you have in your two buttons is at btn. However in one of your buttons your btn is being addressed inside an href tag and is not being hit.
I would go on your html
<span class="btn"><a data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="btn"><input type="submit" name="commit" value="Save" method="put"></span>
If you happen to need that other class, then just set it as
<span class="buttonContainer btn">
That should do the trick.
You need to change line-height to 1.