No matter what I do I cannot get the background-image property to work correctly in IE8.
I've even stripped everything down to the bare minimum and just have a functioning HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Fritz PT!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="myClass">
</div>
</body>
</html>
with the CSS for the class as follows:
.myClass {
background-image: url(/images/header_image_fallback.gif);
height: 300px;
width: 300px;
}
but still nothing is showing up in IE8 and lower.
I have tried multiple image formats (.gif, .jpg, .png), putting quotes around the folder path ('/images/header_image_fallback.gif') and then HTML. Does IE8 not support the background-image property? If it makes a difference I'm currently testing this out in VirtualBox.
Okay, if anyone else is having the same problem as me I found the issue. Apparently, even though the syntax works in all modern browsers, you need to make sure you have the ../ for the folder path for IE. So in my original code (which works in modern browsers) I had the folder path as seen above /images/header_image_fallback.gif however, for IE I would need to do this ../images/header_image_fallback.gif. My images folder is up a directory from my css file and I suppose that matters for IE as opposed to modern browsers
Related
I'm creating a website.My .html file is not linking to my .css file.
HTML:
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="404.css">
<title>Pacebi - 404</title>
</head>
<body>
body text here
</body>
</html>
CSS:
body{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Note that I've done the exact same thing to my other pages. This is specifically not working.
Could it be the fact this is a 404 page in any way?
Using an online web programming tool (replit.com). (OS would not affect. If it did, I've been editing from a Windows 10 and Android 11.
Update: It's working now, I cleared browser cache and put the path for 404.html in the same directory as my .css.
i think your linked it wrong, well that is the only reason why it would not be connected
Your code is correct. It's working fine on my side.
Yes. I'd change the name to something still relevant and see if the issue persists.
I checked with your code. It was working fine on my side. Could be a cache issue. Empty your browser cache and refresh it. It should work fine then.
It is not linking because your css body code should be the html file code and if that doesn't work I think your file name should be style.css cuz 404 is a interactive code for windows to follow your file path.
It does not matter if your file is named 404.css or 503.css, it has to be in the same folder as your html file in your case.
That said, it seems your CSS is ill-formed or badly copy/pasted.
You miss the tag name for which you are defining the first styles. i guess it's the body
MISSING_SELECTOR {
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Also you can add the type but that does not matter much:
<link rel="stylesheet" type="text/css" href="404.css" />
Browsers HTML parsers are quite robust to the fact they don't really need the HEAD and BODY tags in order to know where to place the objects.
Nevertheless try to put all your links and metas inside the head if you are using it.
Good luck! :)
I tried the code on replit.com and it worked fine for me:
The only reasons why I think it might not have worked on your computer is if you named the file incorrectly, or if you put the css in a different folder.
Suppose you did it like this, then it would not work because the file path would be incorrect:
The second reason is if you put the css in a different folder, so the file path would be wrong:
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
I changed the background-color css property. The files are as follows:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>test</title>
</head>
<body>
<h1>hi</h1>
</body>
</html>
main.css
body {
background-color: blue;
}
In chrome:
In firefox:
Can anyone tell me what's wrong?
Here is the developer tools view on chrome:
click here
Have you tried using a hex value instead of the color name "blue"?
Perhaps try :
background-color: #0000FE;
This is the hex value for that color blue you are using, I believe.
Try clearing the cache or refreshing the css file in the browser by viewing the source in the page.
Sometimes the cache may contain some definitions from previous programs.
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.
I'm using the 960.gs CSS framework on a site and have hit problems almost instantly with IE (7, though I assume 6 is no better).
<html>
<head>
<link rel="stylesheet" href="design/reset.css" />
<link rel="stylesheet" href="design/960.css" />
<link rel="stylesheet" href="design/text.css" />
</head>
<body>
<div class="container_12">abc</div>
</body>
</html>
Given this HTML above (the CSS is just the files bundled with 960), Firefox and Chrome centre the grid, whereas IE pushes it to the left.
I've used 960 before without any issues, so I think I must just be doing something really stupid. Can anyone help?
You need to include a DOCTYPE at the beginning of your HTML, otherwise the CSS won't come out right in IE. You can use the one from the demo file that came with the 960 package.
It should be noted that there can not be anything in front of the DOCTYPE-tag.
For example, the default Netbeans HTML-template has a few lines of HTML comments before DOCTYPE, so be sure to delete that in order to get 960.gs to work.