I can't see some icons on my html using IE11.
This is the css code for the icon
.icon_sms:before {
display: block;
content: '';
height: 8em;
width: 8em;
vertical-align: middle;
background-repeat: no-repeat;
background-image:
url([...]);
}
I've tried also with display: inline-block, but it doesn't work either.
Also with no-cache property on html head
And also with
<meta http-equiv="X-UA-Compatible" content="IE=edge">
on first property on head
Any suggestion?
Thank you so much
Best regards
I think you can not use pseudoelements in IE11. To know what technology you can use in each browser, i recommend the web caniuse. It's very clear with a lot of technologies.
You can see the browsers that accept the before pseudoelement in this link. I hope that you will be useful.
According to your description and the code you provided, I did a simple test and found that it works fine in IE11.
A simple test:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.icon_sms:before {
display: block;
clear: both;
content: '';
height: 40em;
width: 40em;
vertical-align: middle;
background-repeat: no-repeat;
background-image: url(https://i.stack.imgur.com/UzYKM.gif);
}
</style>
</head>
<body>
<div class="icon_sms" style="border:1px solid red">some text</div>
</body>
</html>
Because you haven't posted the image url and any html code yet. I guess it may be because the size in the before style is not large enough to display the image.
Try to modify the height and width in the example to 8em, it will not be displayed.
If you can post relevant complete examples, it will help solve the problem, thank you for your understanding.
Related
I have been creating a webpage teaching about Mars, and I wanted to see if I could make the background of an HTML5 page an image instead of a boring white colour. I do want this with a link, so teaching with a .jpg will not be useful. Here is some code I have tried:
<!DOCTYPE HTML>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background: url(https://phys.org/news/2020-05-astrobiologists-mars-rover-life-detecting-equipment.html);
}
</style>
</head>
<body>
My text here...
</body>
</html>
I am not the most experienced programmer, as you can see from this, but any help (even if it is just a little) will be much appreciated. Thank you for your time and have a great rest of your day.
--
isharief
use the link to the jpg file in the src attribute instead of the html link, for this case,
<style>
body {
background: url(https://scx1.b-cdn.net/csz/news/800/2020/astrobiologi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
overflow: hidden
}
</style>
Alright, so I am trying to challenge myself in my html/css class by adding a custom cursor to all pages.
I have it working, but it seems to randomly stop being the custom cursor, and become the default instead?
The css I'm using for it:
* {
cursor: url("image.gif") 33 33, auto;
}
I have also tried using <span> for entire html documents, and that is not fixing it either for me.
I have also tried setting the cursor in
body{} and it didn't fix it.
Any help would be appreciated! I googled and searched the site for over 2 hours trying to find an answer that would work.
Posting the site below so you can see what I mean. (IE won't show the cursor, not sure about safari or opera yet)
http://www.rvertbleu.com/2014fa/dbrown/index.html
EDIT:
Made a shorter version of my index.html and my main.css that recreates the problem. Here it is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Gundam Base</title>
</head>
<body bgcolor="#000000">
<h1><center>Gundam Base</center></h1>
</body>
</html>
main.css
* {
cursor: url("gundam.gif") 33 33, auto;
}
body {
font-family: Impact;
font-size:1.5vw;
text-align: center;
color: #CC3300;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
z-index: -5000;
background-attachment: scroll
background-color: black;
}
add a div after the body tag with the following styles position: relative; width: 100%; min-height: 600px;cursor: url("gundam.gif"), auto;:
place all your other content in the above div. let me know if it works.
I've been scouring the web for a while now, on how to add pinyin/furigana to Chinese and Japanese respectively. I'd really love to just add like a class like class="furigana" to the texts that require it. I'm making a language learning game that will need to be able to display this information. Can anyone shed any light on this matter? Thanks a lot!
pinyin/furigana can be added using the ruby HTML element which is part of a W3C Recommendation and is supported on about 95% of web browsers as of July 2017.
Example:
<ruby>漢字<rt>かんじ</rt></ruby>
Edited to change link to W3C recommendation instead of draft and change browser support
You can add it to a custom HTML tag with CSS which is what I did.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
fg:before {
content: attr(t);
display: block;
font-size: 50%;
text-align: start;
line-height: 1.5;
}
fg {
display: inline-block;
text-indent: 0px;
line-height: normal;
-webkit-text-emphasis: none;
text-align: center;
line-height: 1;
}
</style>
</head>
<body>
<fg t="わたし">私</fg>はケンです。<br><br>
</body>
</html>
I want to write a div for every print page. So i did height of div 100%. Normally in every browser it is working well. But when i print this page it is not working in Chrome.
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<style>
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
.sayfa{
height: 100%;
width: 768px;
}
</style>
</head>
<body>
<div class="sayfa" style="background-color:#666666">fds</div>
<div class="sayfa" style="background-color:#cccccc">fds</div>
<div class="sayfa" style="background-color:#aaaaaa">fds</div>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</body>
</html>
This is solution, man...
Try this code that is
#media print and (-webkit-min-device-pixel-ratio:0) {
.sayfa{
height: 1101px;
width: 768px;
}
}
This CSS/Chrome issue has been gone over here:
height 100% in chrome
Hope this helps.
Set the width and height of your html and body elements to 100%:
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
</style>
I can't find any documentation on this bug, but it's definitely a bug, no doubt about it.
Your code will execute perfectly in non-Webkit browsers (I'm assuming Safari does the same thing) and shows up fine on the screen, then goes into a magic can of fail upon clicking print, right? What's a guy to do?
Answer, give the HTML and BODY tags a defined height in an "actual" measurement, not percents:
html, body {
margin: 0;
padding: 0;
/* etc */
height: 880px;
}
div.sayfa {
height: 33%;
}
The pages print the same from Firefox 14 and Chrome 19+ using the styles above.
My experiments yielded a printed-page height of 880 pixels for the printer we were using, your mileage will probably vary. EMs work, too, but that caused too many headaches, so I figure a definitive pixel value would work best.
It's a messy workaround, but at least it actually works.
I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.
My problem is not on jsfiddle.
And here is my folder structure:
localhost/website/img
localhost/website/css
localhost/website
http://jsfiddle.net/p8eS3/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="description" />
<meta name="author" content="author" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Title</title>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo"></div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* Body */
#body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: #ccc;
}
/* Container */
#container {
width: 100%;
background: #000;
}
/* Sidebar */
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40%;
float: left;
position: fixed;
}
/* Logo */
#logo {
background-image: url(../img/logo.png);
}
You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.
If not the paths to the images are wrong.
The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.
I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.
I would recommend 'rooting' your image url so that it works from the root folder to the location like:
background: url(/img/sidebar.png) repeat-y;
Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images
Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?
It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.
Alternatively, you might want to consider using HTML img tags.
You have to specify a width and a height to your #logo element so that the BG can appear.
Try,
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40px; /* your background width */
height:60px; /* your background height */
float: left;
position: fixed;
}
/* Logo */
#logo {
background: url(../img/logo.png) 0 0 no-repeat;
width: 40px; /* your logo width */
height:60px; /* your logo height */
}