I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
Related
I've a small problem with text-align of my button.
Here's the button itself:
It has same padding:
But, the link itself gives extra height, not 2.3rem how I ask it to.
You can see that highlighted link gives extra space at the bottom, it's not centrelized.
Maybe someone know how to fix it?
Html:
Proceed to the Brief
SCSS:
.btn{
&,
&:link,
&:visited{
color: $color-white;
cursor: pointer;
border: none;
border-radius: $border-radius-medium;
background-color: $color-candy;
display: inline-block;
padding: 1.5rem 5rem;
font-size: 2.3rem;
#include FilsonProRegular;
text-align: center;
text-transform: uppercase;
transition: all .2s;
white-space: nowrap;
#include respond(tab-port){
padding: 1.5rem 4rem;
}
#include respond(phone){
width: 100%;
}
}
}
As #TemaniAfif said, that space is for the descender that certain characters like jpQç3 etc have. And you seem to be using a custom font with rather large descenders.
See explanation on fonts.com.
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.
I have an issue with IE9 and css. It looks like IE9 doesn't accept the padding definition of the two elements p and a. The background color shrinked and is only in the upper left corner of the elements. The following css works fine in firefox though:
<div class="slider">
<p class="claim orange">Some Text</p>
<a class="claim blue" href="">Some Link</a>
</div>
<style type="text/css">
.slider p {
position: absolute;
top: -200px;
z-index: 8000;
padding: 0.5% 2%;
line-height: 100%;
color: #fff;
white-space: nowrap;
text-transform: uppercase;
}
.claim {
line-height: 100%;
font-size: 18px;
}
.orange { background: #EF7D00 }
.blue {
color: white;
font-weight: bold;
padding: 10px 15px;
border-color: white;
}
.blue:hover {
color: white;
font-weight: bold;
padding: 10px 15px;
background: #2e6da4;
border-color: #2e6da4;
text-decoration: none;
}
</style>
What might be the issue and how can I get the background color work in IE9 in this case?
Your code as-is doesn't seem to display a working page, at least for me in Chrome or Firefox. The p element containing "some text" is displaying with top: -200px, off the page to the top, and the background is white so I can't see anything until I mouseover the link.
Did you forget to include some key lines in your code? Try pasting everything into a text file and testing it out, before uploading it in a question, or it's going to be hard for us to help you.
It's not clear to me what you're trying to do here!
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}