I have a button and inside it i have an image and a separator.
The html code is as follows:
<button class="uiImageButton" id="btFactors" style="flex:1 1 0px;" type="button">
<img id="btFactorsImgID" style="vertical-align: bottom;" src="">
<div class="uiImageButtonSeperator">Factors/Formulas</div>
</button>
And the css:
.uiImageButton {
border: 1px solid;
padding: 0px;
border-color: #007AC3;
background-color: white;
color: #007ac3;
text-align: left;
height: 23px;
width: 100%;
font-size: 14px;
font-family: Muli-Light;
}
.uiImageButtonSeperator {
border-left: 1px solid lightgrey;
padding-left: 4px;
vertical-align: bottom;
display: inline;
margin-left: 1px;
margin-right: 2px;
}
The problem I am facing with is that when viewing the page in Internet explorer the image inside the button is being cut off (The image is being placed at the bottom of the button and some of it is cut off).
When using Chrome it looks fins...
I also found that when adding this line of code to the class uiImageButton
display: flex;
it gives a result that is close to what I`m trying to get but not close enough.
It would be great if someone can explain why I`m having this problem only in IE and also how to fix it properly.
I don't understand what the problem is.
Just use this code to make a button. No flexbox, no additional styles and wraps. And perfectly works with IE.
Jsfiddle.
.button {
/* no specific styles needed */
background: blue;
}
.button__image {
display: inline-block; /* to be on one line with text */
width: 10px; /* don't forget sizes for your image */
height: 10px;
margin-right: 10px;
}
.button__text {
font-size: 3em; /* just for fun */
vertical-align: middle; /* set image to vertical center */
}
<button class='button'>
<img class='button__image' src='http://i.imgur.com/jB0PDw1.png'>
<span class='button__text'>Factors/Formulas</span>
</button>
Related
Here is a code snippet with the exact behavior I would like to replicate.
I want to add an effect to the title when the mouse is hovering anywhere on the link.
.link {
display: block;
width: 250px;
text-decoration: none;
color: black;
padding: 10px;
border: solid black 1px;
}
.link .title {
margin-bottom: 8px;
width: fit-content;
}
.link:hover .title {
background-color: lightblue;
}
<a href="#" class="link">
<div class="title">Title</div>
<div class="subtitle">Subtitle that is usually longer than the title</div>
</a>
My problem: I can't use the width: fit-content; CSS rule as it is not supported by IE.
If you try running this snippet in IE, you will see something like this: image (on imgur)
My question: How can I make sure the .title div always fits its's content without using width: fit-content?
I have buttons on my page, sometimes with icon images and a text label in them, sometimes only with icon, no text.
I've styled the images in the buttons so that there is a margin to the right, to separate the icon from the text.
The problem is that because of that margin, if there is no text in the button, the icon is not in the center of the button, so it looks crappy.
button {
border: none;
border-radius: 0.5rem;
background-color: pink;
line-height: 32px;
font-size: 1rem;
padding: 0.5rem;
}
button > img {
float: left;
margin-right: 0.5rem;
}
<div>
<p>
This looks OK:
</p>
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png"> OK
</button>
</div>
<div>
<p>
This doesn't (icon not in the center of the button):
</p>
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>
</div>
(see fiddle)
An easy and obvious fix would be to put the text in a span element and then style the image element with :only-child.
But then I would have to change a lot of places in our code base that already use this style and I would have to somehow convince my fellow developers to always put their button labels in span elements, only to make the buttons without text labels look OK.
Is there another way that allows me to keep my HTML code the same while getting rid of the margin on the image if it is not followed by text?
I have tried experimenting with :not and :empty pseudo class selectors but couldn't make it work. The problem is that you cannot select or style plain text nodes.
I'd go with
button { display: flex; text-indent: 0.5rem; }
You can then get rid of the styling for the img tag altogther
To expand a bit on #rejas answer - it can be done if all the spacing is the same size.
EDIT: Since Chrome 87, I think, there is a bug that prevents the below solution from working - https://bugs.chromium.org/p/chromium/issues/detail?id=1159311. Fortunately there is a workaround, but only for newer browsers, that support CSS Grid. So, the new combined solution should be something like this:
button {
border: none;
border-radius: .5rem;
background-color: pink;
line-height: 32px;
font-size: 1rem;
padding: 5px 10px 5px 0;
vertical-align: middle;
display: inline-flex;
text-indent: 10px;
}
button::-moz-focus-inner {
border: 0;
}
button > img {
margin-left: 10px;
}
#supports (display: grid) {
button {
text-indent: 0;
padding: 5px 10px;
display: inline-grid;
grid-gap: 10px;
grid-auto-flow: column;
}
button > img {
margin-left: 0;
}
}
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">OK
</button>
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>
<button>
OK
</button>
Of course, you can choose to support just newer browsers, in which case you can have your grid-gap different from the button padding, allowing for greater flexibility.
The old solution:
button {
border: none;
border-radius: .5rem;
background-color: pink;
line-height: 32px;
font-size: 1rem;
padding: 5px 10px 5px 0;
vertical-align: middle;
display: inline-flex;
text-indent: 10px;
}
button::-moz-focus-inner {
border: 0;
}
button > img {
margin-left: 10px
}
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">OK
</button>
<button>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>
<button>
OK
</button>
I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.
How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/
Answer
While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.
use a fixed width with inline-block on the buttons.
Working Fiddle
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
using inline-block provides a little-bit of margin between the elements (caused by a white-space in the HTML) so I removed the marin from the CSS, but you can put it back.
Easily done with flexbox:
.button {
padding: 10px 15px;
width: 150px; /* Fixed width links */
background-color:deepskyblue;
color: white;
margin: 3px;
}
.callToAction {
margin: 30px 0;
display: flex; /* Magic! */
justify-content: center; /* Centering magic! */
}
Working Example
.button
{
width: 150px; /* Your custome size */
background-color:deepskyblue;
color: white;
margin: 3px;
padding: 10px 15px;
}
Section a
{
width: 150px; /* for your all buttons */
}
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/