I have a CSS similar to the one below.
.ui-icon {
font-size: 6em;
height: 180px;
width: 180px;
}
.ui-icon .ui-icon-label {
padding-top: 15%;
}
The top padding doesn't display the text in IE9 (i.e. ui-icon-label).
HTML is also given below.
<div class="ui-icon-color ui-icon">
<div id="icon-1">
<i class="icon-cog"></i>
</div>
<div class="ui-icon-label">My Label</div>
</div>
But the same code works well in Chrome and Firefox. IE9 displays the ui-icon-label till the padding is 13.4%. Till the value, when I increase it gradually the text moves downwards a bit. Above that value it suddenly disappears. But For me 15% looks the best position to place the label. I went through different solutions provided in the suggest like 'clear:both' or using the W3C validator. But they didn't help.
FYI, the icon-cog class comes from font-awesome.
Have you considered using a IE9 targeted stylesheet with media queries to solve that issue?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
// In the CSS:
#media (max-width: ???px) {
.ui-icon .ui-icon-label {
padding-top: 30%;
}
}
Related
I'm working on a site that needs full-page scroll-snaps for portfolio items. I got the snap-scroll and HTML smooth-scroll set up and working fine. I then added a link to a Google Font in HTML and set some text to that font in CSS. The font displayed as expected, but it seems to disable the scroll-snap behavior.
I've tried multiple Google fonts and have had the same result each time. It seems that it only disables scroll-snap when the font is correctly installed.
HTML...
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
CSS Below...
body{
scroll-snap-type: y mandatory;
color: #222;
}
.tech-list-header {
font-size: 1.333em;
font-family: 'IBM Plex Sans';
}
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
/* background-repeat: no-repeat; */
background-size: cover;
margin: 0px -10px;
position: relative;
min-height: 90vh;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
It seems like I should be able to use Google Fonts and Scroll-Snap in tandem, but I can only get one working at a time... Any thoughts? Thanks!
There was a similar question with an answer here: https://stackoverflow.com/a/52886080/1173898
But, to expound on that - the root issue seems to be a conflict between scroll-snap-type and a #font-face declaration. When you link to Google Fonts, all you're linking to is a short CSS file that is composed of one or two #font-face declarations.
Specifically the issue is with a any #font-face declaration with a src: rule and a url(...) value. Which, unfortunately, is pretty much all of the time, and this includes Google Fonts stylesheets.
The other SO answer mentions that it’s Chrome only. However, I've seen the same broken behavior in Firefox.
The way around this, as alluded to in the other SO answer, is to add a wrapper element, inside the <body>, like so:
<body>
<div class="wrapper">
<div id="#bgimg-1">
<div id="#bgimg-2">
<div id="#bgimg-3">
</div>
</body>
CSS
.wrapper {
scroll-snap-type: y mandatory;
}
...
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
...
scroll-snap-align: start;
scroll-snap-stop: normal;
}
I'm trying to get hyphens working on text that has <span> elements inside for highlighting. This seems to break the hyphen algorithm. Is there any way to fix the behaviour so that hyphens are placed the same as without <span> elements?
I'm not asking about a workaround like
The Code (sandbox: https://codepen.io/anon/pen/ayzxpM):
.limit {
max-width: 50px;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
Using the lang attribute
Adding the lang attribute as Vadim Ovchinnikov suggested (<div class="limit" lang="en">) can lead better results on some platform/browser combinations. On Firefox 54, Windows 10 this is the result:
But even that seems buggy. The hyphen should be black in my opinon and the hyphen algorithm seems to miss the chance to make a line break between "fruit" and "tree", also completly ignoring the max-width that is set for the container.
Actually, it does work with spans, in a number of browsers. You just used a word that is not recognized. Here's an example with a normal English word, that works in IE (should also work in Edge) and FF on Win7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<title>Demo</title>
<style>
div {
max-width: 50px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
</style>
</head>
<body>
<div>
<p>Incomprehensibilities</p>
<p>Incom<span>pre</span>hensibilities</p>
</div>
</body>
</html>
It does not work in Chrome on Win, because that currently (June 2018) still does not support hyphens at all. It also does not work in any iOS browser. So you will have to use soft hyphens after all. But as you stated that you were curious about the mechanism, I thought it worthwhile to still post this answer.
Chrome has only partial support for hyphens property (only Mac and Android platforms), so you can't make it work on Windows.
I don't see any difference between span presence and absence in Firefox, IE and Edge (all on Windows) for this code.
To make it work there you'll need set lang for container and add vendor prefixes (for -ms-hyphens IE/Edge and -webkit-hyphens for Safari). Demo:
.limit {
max-width: 50px;
font-size: 20px;
/* Safari */
-webkit-hyphens: auto;
/* IE, Edge */
-ms-hyphens: auto;
hyphens: auto;
background-color: #eee;
}
span {
color: red;
}
<div class="limit" lang="en">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
To work in all browsers you may shouldn't use CSS hyphens property, just insert manually where you want hyphens.
.limit {
max-width: 50px;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
hyphens: manual
togteher with
might work
see documentation here
https://css-tricks.com/almanac/properties/h/hyphenate/
this code on codepen seems to work
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
CSS
.limit {
hyphens: manual;
}
i am using following css code for displaying flash text in my website. Flash Text Displaying in Chrome Browser nicely but not in Mozilla Firefox Browser. if i add this code width:650px; position: absolute; in css, displaying flash text in mozilla firebos nicely but not in chrome browser again. what should i do ??
.flash_text { padding-left: 50px; margin-left: 50px; }
Chrome Browser
Flash News : Training Programme on Personality Development
Mozilla Browser
Flash News :
Training Programme on Personality Development
how to make it proper display in both browser
the following css code working nicely for chrome browser
.flash_text { padding-left: 50px; margin-left: 50px; }
but not to Mozilla Browser
if i add this coding width:650px; position: absolute; displaying nicely but again chrome browser not displaying properly
what to do??
<html>
<head>
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
All 3 browsers
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
I'm trying to get this effect to work in IE8, but can't seem to find a good solution.
http://jsfiddle.net/aarhG/2/
Have any ideas?
I've tried adding:
.image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.box:hover .image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
but that doesn't seem to work on hover...
if you don't have a correct doc-type
The problem will most likely be down to that :hover is not supported in IE8 outside of a tags when using certain doc-types.
Is :hover:after supported in IE8?
Css IE6IE7/IE8 hover problem
Hover effects not working with IE8
Generally if I wanted a hover effect in an older browser I would use an a tag to wrap the element:
<img />
And then target using the following:
a:hover img { opacity: 0.5; filter: Alpha(opacity=50); }
You'll probably find that it isn't the opacity causing the problem, if you switched to changing another css property onhover — say border — it still wouldn't work without using a a tag.
after a further look
It seems that your doctype is ok, so the above note is not the issue. However it does seem that you are utilising html5 tags, which will also cause you issues in IE8. A fix for this is as follows.
Older versions of Internet Explorer do not fully recognise the new html5 tags, however if you create a singular instance of the tags you wish to use in JavaScript, IE starts believing the tags are real. This is generally part of what a html5.js shim would do. It is also a good idea to make sure these new tags are displaying as block in your css.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title> Opacity IE8 </title>
<style>
.container {
display: block;
position: relative;
}
.container .box {
display: block;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
opacity: 0;
filter: Alpha(opacity=0);
}
.container:hover .box {
opacity: 1;
filter: Alpha(opacity=100);
}
</style>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
</head>
<body>
<figure class="container">
hover me
<figcaption class="box">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</figcaption>
</figure>
</body>
</html>
This is what I use in my sites and I have never had any problems with any browser, including older versions of IE: { filter: Alpha(opacity=80); opacity: .8; -moz-opacity: .8; }.
I have an element that currently has margin-left: -110px of course, this works with my design in all browsers except IE. With IE I need to make it margin-left: 10px
Normally, I would do my IE hacks by adding \9;, such as:
margin-left: 10px\9;
but it doesnt seem to work with margins. Does anyone know a way to acheive this? Many thanks!
<div id="nav">
<ul>
<li id="newstab">News</li>
<li id="offerstab">Offers</li>
<li id="specialsstab">Specials</li>
</ul>
</div>
#nav {
position:absolute;
margin-left: -110px;
margin-left: 10px\9;
margin-top: 160px;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
}
If you really need to, you can use an IE conditional block:
<link href="style.css" rel="stylesheet" />
<!--[if lt IE 10]>
<style type="text/css">
.thing {
margin-left: 10px;
}
</style>
<![endif]-->
Found it was
writing-mode:tb-rl;
IE didnt like.
This site was useful:
http://www.useragentman.com/IETransformsTranslator/
.class {
text-align:right;
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
margin-left: 30px
}
margin-left: 90px;
}
You can write the specific css for IE, then overwrite other css for other browser.
You can use like this
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
Then in your CSS, you would target IE7, IE8 or IE9 like this:
.element {
margin-left: 20px;
}
.ie7 .element {
margin-left: 10px;
}
.ie8 .element {
margin-left: 15px;
}
.ie9 .element {
margin-left: 10px;
}
Now every browser will have a left margin of 20px on the element in question, but IE7, IE8 and IE0 will have a left margin of 10px, 15px and 10px respectively.
Why are you using margin-left, when you are also using position:absolute?
You won't ever gain the desired effect of a margin when using position absolute (but that is not the actual issue here).
When using position absolute, you should always define the elements default datum point consisting of at least a top/bottom and left/right position - in your case, top:0; left:110px; (this is assuming the absolute positioned element is within a position:relative; parent container).
You are allowing the browsers to assume what you want to display, rather than actually defining and telling the browsers what you want to display - You should be doing this without fail on everything you build in CSS.
In not strictly defining where you want an element to sit using absolute positioning, you are asking for trouble in IE (especially lt IE9).