I'm working on a website and my website has to work in Chrome and in Internet Explorer 9. I'm almost finished and I have only one problem left. If i want to load an image with "content: url()" it works perfectly in Chrome but not in IE9. Can somebody please give me another solution where I where i don't have to change my HTML.
My HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<header>
</header>
<a id="photo">Photo</a>
<footer>
</footer>
</body>
</html>
My css:
#photo {
content: url('right-button.png');
}
Try this:
#photo {
background: url("right-button.png") no-repeat;
}
For more informations read here some articles i found for content attribute:
content property,W3c
Related
I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}
I'm trying to set black for one line. There are more web links on the line. But the link is still blue. Thanks for the help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2 style="color:black;">YouTube Google</h2>
</body>
</html>
Because there is a default style from <a> tag, which it hides the set style from <h2>. There are 2 ways (not only 2) to resolve the problem.
Way 1: by adding a <style> tag and put your styles inside it.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h2>YouTube Google</h2>
</body>
</html>
Way 2 (not recommended because it looks not really tidy): add styles to each <a> tag.
<html>
<head>
<meta charset="utf-8">
<title>Titulek stránky</title>
</head>
<body>
<h2>
YouTube
Google
</h2>
</body>
</html>
Hope helped.
I'm having a problem with linking html to CSS. It doesn't work on Google Chrome, but it does on IE. Is there anything wrong with it. By the way, I downloaded the newest version of Google Chrome moments ago.
This is my html:
body{
background:black;
color:white;
font-family:arial,helvetica,sans-serif;
float:left;
}
h1{
font:"courier new"
size:14px;
color:yellow;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8"/>
<meta name="author" content="Alvex"/>
<link rel="stylesheet" href="../CSS/test.css"/>
</head>
<body>
<h1>Hello World</h1>
<p>Nothing here</p>
</body>
</html>
Thank You!
If it is working in IE then path must not be an issue.
Did you check network tab in chrome developer tools? See if the .css file loads.
<link rel="stylesheet" href="CSS/test.css"/>
use like above
Here is an example, i boiled it down to as simple as i could
(random web image)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>
Just a picture
</TITLE>
</HEAD>
<BODY>
<img crossorigin="Anonymous" src="http://www.fnordware.com/j2k/relax-orig.png" height="256" width="256">
</BODY>
</HTML>
Works perfectly fine in IE, but does not show in chrome or firefox (I need it to work in firefox specifically).
Get Response is 200, but with no content (has content in IE response)
only remove , crossorigin="Anonymous"
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>
Just a picture
</TITLE>
</HEAD>
<BODY>
<img src="http://www.fnordware.com/j2k/relax-orig.png" height="256" width="256">
</BODY>
image sample in Firefox
I'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!
mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.