HI i have a small Problem with my :hover CSS code. On IE8 my link hover just when i move mouse over text but outer text it doesn't work. I don't really know where my mistake is. Need some help!
html:-
text text text
CSS:-
.ctaBlock {
border: 1px solid #333;
font: 400 10px/43px arial,helvetica,sans-serif;
color: #333;
letter-spacing: .1em;
display: inline-block;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: uppercase;
line-height: 42px;
width: 34%;
}
#content .ctaBlock:after {
font-size: 7px;
font-weight: 400;
line-height: 1;
font-family: iconFont;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greyscale;
font-style: normal;
font-variant: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
content: '>';
display: inline;
margin-left: 3px;
}
#content .ctaBlock:hover {
background:rgb(255,255,255);
background: transparent\9;
background:rgba(255,255,255,0.3);
filter:progid:DXImageTransform.
Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
zoom: 1;
text-decoration: none;
cursor: pointer;
}
IE8 has some problems handling transparent parts of elements. I had the very same problem a while ago and I solved it by adding a transparent image (1px by 1px) as background in CSS:
background-image: url("transparent.png");
Or with a data-URL:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);
I think an even simpler solution could be adding a non transparent background color to your link. But this depends on your needs of a transparent background. I havn't tested the second solution, but you could give it a try.
opacity property does not work in IE8. add this background:rgb(255,255,255); and then add opacity:0.8 separately at the end. Or it would be better if you use hash color code.
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
am facing one issue on gradient css on web and android devices text are visible but on Safari its not showing at all. Please have look on both the screen shots.
I've checked with caniuse.com, and both -webkit-text-fill-color and background-clip: text are said to be supported both in Safari/Desktop as well as Safari/iOS.
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
There is an unresolved, open issue about this on the WebKit Bugzilla since 2017: background-clip:text doesn't work with display:flex. Apple has ignored this bug for 4 years, it will probably never be resolved.
Remove display: flex and it works:
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
I have an icon and I would like to change the background color inside the shape of the icon:
<i class="icon-sm icon-number-one"></i>
This is the css:
.icon-sm {
position: relative;
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
color: #949494 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-number-one:before {
content: "\e600";
}
The icon looks like a circle with a number in it. Based on this how can I change the background color of the circle?
if you need effect look like this
then you only need
.icon-sm {
background: red;
}
I'm using selectize-rails gem and it doesn't look good because of the CSS from application.css being applied to it...
application.css:
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
I created separated css file for that particular view and copied as above into it and replaced the color with color: black !important;, similar with other params... But it doesn't give any effect. The label color is still white. Please help!
When I add
overflow:hidden
to any of the buttons on my page, it creates 13px of margin at the bottom of the button. When I remove the above CSS, the margin disappears, however some content inside the button overflows.
How can I remove the margin at the bottom, while keeping the
overflow:hidden
CSS style?
WITH overflow:hidden
WITHOUT overflow:hidden
, however, the Facebook logo overflows into the next button (it is a custom font)
CURRENT BUTTON CSS:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
CURRENT BUTTON HTML:
<a class="btn btn-fb btn-xl" id="login_fb"><span class="icon-socialfacebookvariant"></span>Log In</a>
CURRENT FACEBOOK LOGO CSS:
[class^="icon-"], [class*=" icon-"] {
overflow:hidden;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size:2em;
line-height:0;
font-family: 'icomoon';
position:relative;
top:-1px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
vertical-align:middle;
}
// Facebook logo from a font
.icon-socialfacebookvariant:before {
content: "\e9e3";
}
Thanks Jaunt for the help.
Although your idea is the most logical, it's not very nice when editing!
Luckily I happened to come across a simple fix to my problem!
All I had to do was add vertical-align:top to my button CSS, and wham! it works!
Thanks for your help :)
It's because you have white-spacing between the HTML elements. This snippet is with the white-spacing:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
And this one is without:
.btn {
background-color: #FF6347;
border: 1px solid #CC4F39;
color: #FFFFFF;
text-decoration: none;
padding: 7px 15px;
cursor: pointer;
font-size: 1em;
text-shadow: 0 1px 2px #000000;
display: inline-block;
overflow: hidden;
}
<div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn"></div>
There is a notable difference and I believe this is where your mysterious margin is coming from.