I have checked every solution I can find listed on Stackoverflow for this common question and none are working for me. I have tried adjusting font-size, line-height, height, box-sizing, padding, vertical-align, display and position. I don't want to use absolute positioning because I want the container to adjust naturally to the size of the text.
The text inside the inner most span of all button elements tends to slide off the top of its container (into padding territory) resulting in text that isn't vertically aligned centrally, see image above. I added display: flex; align-items: flex-end which pulled it in a tiny bit but hasn't fixed the problem. What is happening?
I am using a page builder so I will try to pull out the relevant CSS but I might miss something. Please use inspector on any button on the staging website to check working code.
.elementor-button-wrapper {box-sizing: border-box}
.elementor-button {
line-height: 1.2em;
display: inline-block;
padding: 12px 24px;
box-sizing: border-box;
}
.elementor-button-content-wrapper {
display: flex;
justify-content: center;
box-sizing: border-box;
line-height: 1.2em;
}
.elementor-button-text {
display: flex;
align-items: flex-end;
box-sizing: border-box;
line-height: 1.2em;
}
<div class="elementor-button-wrapper">
<a class="elementor-button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">
Order Now
</span>
</span>
</a>
</div>
Thank you for your time.
A couple of things to think about:
Use a button if it's a button. Don't try to masking t a div as a button, because you will loose a lot of functionality, like hover state, tab order and things like that.
Second of all, always try to use as little HTML and CSS as possible. You have over-complicated the whole element.
Thirdly, and this is actually the solution: you had 1.2em as line-height, which means that you will automatically get a space underneath your text. A suggestion is to instead use padding inside the button to create space around the characters, so you never need to bother about how big the text is.
.elementor-button {
line-height: 1em;
border: 1px solid;
border-radius: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
<button class="elementor-button">
Order Now
</button>
The thought occurred to me to try a different font. I tried the default sans-serif as well as Montserrat and it seems to be displaying correctly. I didn't realise fonts could come with alignment issues like this!
Related
Display Flex bug
I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.
#autocomplete a {
font-weight: bold;
text-decoration: none;
color: #111;
padding: 0.2rem 0.5rem;
border-radius: 20px;
align-items: center;
display: flex;
}
#autocomplete .fa.fa-search {
padding: 5px;
float: left;
}
without Flex and content-aligin: center;
with Flex and content-aligin: center;
you can try using "flex-direction: row-reverse;" it should reverse your items inside the container with the display flex applied.
have a nice day and good luck 😁
My approach would be like this:
Add the following CSS definition:
#autocomplete a * {
vertical-align: middle;
}
The "bold" text is outside a span or similar element. You should also put it into a <span>, so the correct style will be applied to it.
Example:
<a href="./search?q=abcdef&source=autocomplete" data-index="1">
<span class="nobold">abc</span>
<span>def</span>
<i class="fa fa-search"></i>
</a>
(The span around def is the new one.)
Explanation:
The * in the CSS definition in 1. will make the style apply to the selected element and all its children. So, in 2. you just add a matching "child" by using the span. I've tested it and it works for me.
Hint: I don't know if you know about this technique, but you can always use the browser's development tools in order to try such things "on the fly" within the page being shown.
Okay i am working on this and the Ori Guy add me some Idea and i make this code
justify-content: flex-end;
flex-direction: row-reverse;
And look is working :D
Really Thank all who help ME!! THANK YOU <3
While assembling a site, I discovered that it's quite complicated to get buttons work with other elements, so that all elements look all the same.
That happens for example in a menu, where some buttons are real buttons, while other are just HTML links to other pages. Other example may be a form, where buttons are expected to be as large as other inputs.
Please see my jsFiddle to understand what I'm talking about. In the example, I want button to look like other elements!
Some code since SO requests it:
HTML:
Both elements shole be of the same size
<div id="menulike">
<button>DO SOMETHING</button>
GO TO SOMETHING
</div>
CSS:
div#menulike button, div#menulike a {
/*reset some default styles*/
border-style: none;
border-width: 0px;
text-decoration: none;
/*Inline or inline-block*/
display: inline;
display: inline-block;
/*colors and stuff*/
color: white;
font-weight: bold;
background: black;
/*This is important - size is expected to be the same*/
padding: 3px;
margin: 1px;
width: 220px;
font-size: 12pt;
text-align: center;
}
Why does this happen?
The reason your elements do not look the same when applying the same styling is due to default styling applied on elements. This is due to the elements being different. The differences may also be different depending on the browser.
How do you fix this?
You simply need to override all the properties that are different between elements. A lot of the differences between browsers can be solved with CSS resets.
Why isn't my example working?
Regarding your particular issue, the button has different width because you are not overriding all of the button's CSS properties. Try adding the following to your text inputs:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
This should give them all the same width. Alternatively, you can give your button box-sizing: content-box, which is the default for most elements.
As for the difference between the button and link, all I can see is the cursor icon when you hover over them. This can be changed with the cursor property:
cursor: default;
Edit:
I just noticed the second example has different heights for the button and link in Firefox (I was using Chrome before, which didn't show it). I believe this is combination of both height and box-sizing. Setting both to the same value for the elements should give them the same size.
I'm only guessing, but I think the reason height is needed in this case is because the font is treated differently between buttons and links in FF. Since no height was set, the fonts took up different amounts of space in the two elements, even if it was the same font with same font size.
I'm not sure, but the form elements (buttons, select, radio buttons) are provided by the browser. Each browser/OS have an way to show it. So I think you need to write a separated css block for it.
Here's a jsFiddle with my situation demoed: http://jsfiddle.net/SFrbZ/4/
Basically, I want to have input fields in table cells and have the inputs set to a fixed height and font-size. What's happening now is that users are able to hover over or click on the input and using the mouse wheel can scroll the text up and partially out of frame. Highlighting the text also allows you to move it up. The following code shows the barebones of this issue as well:
HTML:
<input class="scroll" type="text" value="1"></input>
CSS:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
Oddly enough, this is only occuring on Firefox and not Chrome, IE, or Safari. As you can see in the jsFiddle, increasing the height of the field (or lowering the font-size) solves the problem, but this is not a viable solution for me.
I've tried a number of alterations in an attempt to fix it but have come up dry. Messing with overflow, line-height, padding, margins, display type, etc. and nothing seemed to do the trick. Any pointers or suggestions would be greatly appreciated!
Your best option is probably to install a Javascript handler for scroll events, on elements of class .scroll, which simply swallows the event and returns false -- this will prevent the element from being scrolled by any means, which should solve the problem as stated. This fiddle, using jQuery, demonstrates the solution, and the meat of it is as follows:
$(document).ready(function() {
$('.scroll').scroll(function(e) {
e.preventDefault();
return false;
});
});
Without jQuery, the solution is still feasible by means of window.addEventListener &c., but jQuery makes it so much simpler that, if you're not already using that library in your project, I'd recommend adding it just for this purpose.
The easiest solution is to change the line-height property of the .scroll css class to match the height. Using you're example:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
line-height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
The issue is that the text technically doesn't fit in that box. Text with a height of 11px usually has a couple of pixels on top and bottom as 'padding' to make it so that multi-line text has spacing between the lines. As a result, it appears the text fits, but it doesn't actually.
On this page there's a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don't understand why because they both have the same:
font-size
top and bottom border sizes
top and bottom padding sizes
I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?
Update
I'm not bothered about supporting IE <= 7
You have to define height of your buttons.
of Write like this:
a.primaryAction, .primaryAction.matchLink {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
font-size: 13px;
font-weight: normal;
height: 30px;
padding: 5px 11px;
text-decoration: none;
}
You should apply display: inline-block to the a, to match the button which already has display: inline-block.
You also need this to remove the extra spacing in Firefox:
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
This kind of problem can be a real hassle to solve.
Only block elements accept a height. You can use either display:block or display:inline-block to achieve this.
At first, display:inline-block; seems like it's a nice, easy way to go - but is not supported in IE7 or earlier.
So, you can either use inline-block and leave old browsers in the wake, or add a conditional stylesheet for ie7, or you can display:block and give them a width (if it's appropriate).
The following CSS rule would work in your case:
.buttonHolder * { height:17px; }
I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}